Ihave 2 problems with gulp sass watch
1- when i save my sass file gulp create extra css folder and i already have one
2- gulp watch is only watching for my style.scss and not the other files inside the other folders
My project structure
assets
css
style.css
sass
1-basics
_base.scss
_colors.scss
2-layout
_grid.scss
_header.scss
style.scss
index.html
gulp
const gulp = require('gulp');
const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src('assets/sass/**/*style.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("assets/sass/**/*style.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
I modified a few parts of your code, see the comments:
const gulp = require('gulp');
// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
// const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
// note I moved the watch tasks to within the browser-sync task
// and changed the sass watch glob below
// so it watches both the partials and style.scss
gulp.watch("assets/sass/**/*.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
gulp.task('sass', function () {
// this appears to be the correct path to your style.scss file
return gulp.src('assets/style.scss')
.pipe(sass())
// with the change to the gulp.src above, now the gulp.dest is correct
// before you had a globstar ** and that effects the base directory
// that will be used below. Without the globstar it is a little easier
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));
// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
//gulp.watch("assets/sass/**/*style.scss", ['sass']);
//gulp.watch("*.html").on('change', bs.reload);
//});
Related
I have created a gulpfile.js file for a project I'm building. When I try to run it, I get this error.
[18:29:03] Using gulpfile ~\Documents\codeprojects\antenna\gulpfile.js
[18:29:03] Starting 'default'...
[18:29:03] Starting 'sass'...
[18:29:03] The following tasks did not complete: default, sass
[18:29:03] Did you forget to signal async completion?
Here is my gulpfile.js code
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('public/stylesheets/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('public/stylesheets/*.scss', ['sass']);
});
gulp.task('default', gulp.series('sass', 'watch'));
gulp.task('sass', function() {
return gulp.src('public/stylesheets/style.scss') // return added here
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
// the return above will suffice to "signal async completion"
gulp.task('watch', function() {
// gulp.watch('public/stylesheets/*.scss', ['sass']); // old gulp v3 synatx
gulp.watch('public/stylesheets/*.scss', gulp.series('sass')); // v4 syntax
});
Also, you will want to switch to the plugin gulp-dart-sass instead of gulp-sass. It supports more recent features like #use for example.
Below is a copy of my gulpfile.js. For some reason /util.js, /alert.js & push.js are not being compiled into my scripts.js file when I run "gulp scripts" from the terminal in VSCode. I would appreciate an advice to help me sort out this problem. I'm new to gulpfile format, so I wouldn't be surprised if I've
made a mistake somewhere
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
function scripts() {
return gulp.src(
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/js/dist/util.js',
'node_modules/bootstrap/js/dist/alert.js',
'node_modules/var/push.js',
'js/main.js',
'js/other.js'
)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./js'));
}
// compile scss into css
function style() {
// 1 where is scss file
return gulp.src('scss/**/*.scss')
// 2 pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3 where do iI have the compiled css?
.pipe(gulp.dest('./css'))
// 4 stream changes to all browsers
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('scss/**/*.scss', style);
gulp.watch('*.html').on('change', browserSync.reload);
gulp.watch('js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
exports.scripts = scripts;
When passing several globs or paths to gulp.src, you should wrap them in an array:
return gulp.src([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/js/dist/util.js',
'node_modules/bootstrap/js/dist/alert.js',
'node_modules/var/push.js',
'js/main.js',
'js/other.js'
])
first time I'm using browser sync with gulp, this is my project structure:
-root
-assets
-img
-src
-css
-js
-scss
index.html
gulpfile.js
package.json
and this is the gulpfile.js:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass'), () => {
browserSync.init({
server: "./src"
});
gulp.watch("./src/scss/*.scss", ['sass']);
gulp.watch("./src/*.html").on('change', browserSync.reload({stream:true}));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve'));
I take the code by the browser sync docs here and modified a bit, but when I type 'gulp' on the console, I get this:
[22:24:59] Starting 'default'...
[22:24:59] Starting 'serve'...
[22:24:59] Starting 'sass'...
[22:24:59] Finished 'sass' after 40 ms
[22:24:59] Finished 'serve' after 43 ms
[22:24:59] Finished 'default' after
Probably I missed something, shouldn't browser sync run indefinitely?
thanks
ok now seems I solved:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', function() {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve','sass'));
Trying to use sass with browserSync, here's my gulp js.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', browserSync.reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css));
/*.pipe(reload({stream: true}));*/
});
gulp.task('default', ['serve']);
I have to comment out this line .pipe(reload({stream: true})); then it will work. I've no clue what's wrong here.
Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).