CODEWITHSUNDEEP
javascriptcsssassgulpwatch
houstongolden
houstongolden

Reputation: 113

Gulp Watch Task not working for SASS

My gulp watch task is working for JS, but not for my SASS. It's only compiling the new CSS file when I re-run my gulp command.

Here's my 'styles' and 'watch' tasks code, any help would be appreciated:

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload');

function errorLog(error) {
  console.error.bind(error);
  this.emit('end');
}

// Scripts task
// Uglifies js
gulp.task('scripts', function() {
  gulp.src('js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('build/js'));
});

// Styles Task
// Uglifies scss/css
gulp.task('styles', function() {
 return sass('sass/*.scss', {
  style: 'compressed'
 })
  .on('error', errorLog)
  .pipe(gulp.dest('build/css'))
  .pipe(livereload());
});

// Watch Task
// Watches JS
gulp.task('watch', function() {

  var server = livereload();

  gulp.watch('js/*.js', ['scripts']);
  gulp.watch('sass/*.scss', ['styles']);
});

gulp.task('default', ['scripts', 'styles', 'watch']);

Upvotes: 1

Views: 4482

Answers (2)

Ariel guzman
Ariel guzman

Reputation: 171

Check your directory and globs for your sass. In my example below, I used an object for the paths but I had the commented out as my main since thats the file importing the partials. It works for a single $ gulp sass but when I would watch nothing happened. I just need to tell gulp task to check all file ending with .sass. Simple but its easy to miss sometimes when doing a lot.

var paths = {
sass: ['./src/sass/**/*.sass'],
//sass: ['./src/sass/main.sass'],
};

Upvotes: 0

Dwayne Charrington
Dwayne Charrington

Reputation: 6632

Your question is a little light on details, but I think you could make some improvements to your code which will help. You are only including files in the root of the js and sass directories (this might be intentional).

This means if changes are made in js/myfolder/somefile.js the watch task will run. Likewise if you have changes made to a file sass/myfolder/somestyle.scss or partial sass/myfolder/_mypartial.scss the task gets run.

You might only want the root directory, if so, ignore the double asterisk below and just stick with what you have. I personally use a double asterisk as it is rare all your files are just in the root directory (especially using Sass and partials).

gulp.task('watch', function() {

    livereload.listen();

    gulp.watch('js/**/*.js', ['scripts']);
    gulp.watch('sass/**/*.scss', ['styles']);
});

Notice above how I added livereload.listen() this is the recommended way the plugin works. What you were doing would not work properly and changes not updated via LiveReload.

My advice would also be to store your file paths in variables. You have a little bit of duplicate in your file (which is fine, but makes for harder to maintain Gulp files).

I realise my recommendations go beyond the scope of your question, the fix for your question specifically is to use livereload.listen() in your watch task. The rest is sage advice based on what has worked for me the last couple of years.

My final recommendation would be something like this:

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload');

var outputDir = 'build/';

var path = {
    styles: 'sass/**/*.scss',
    stylesOutput: outputDir + 'css',
    js: 'js/**/*.js',
    jsOutput: outputDir + 'js'
};

function errorLog(error) {
  console.error.bind(error);
  this.emit('end');
}

// Scripts task
// Uglifies js
gulp.task('scripts', function() {
  gulp.src(path.js)
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest(path.jsOutput));
});

// Styles Task
// Uglifies scss/css
gulp.task('styles', function() {
 return sass(path.styles, {
  style: 'compressed'
 })
  .on('error', errorLog)
  .pipe(gulp.dest(path.stylesOutput))
  .pipe(livereload());
});

// Watch Task
// Watches JS
gulp.task('watch', function() {

  var server = livereload();

  gulp.watch(path.js, ['scripts']);
  gulp.watch(path.styles, ['styles']);
});

gulp.task('default', ['scripts', 'styles', 'watch']);

Upvotes: 2

Related Questions