gulpgulp-watchgulp-sass

Gulp watch all files but render only one (sass)


I want to make gulp watch for all changes on my work folders but to generate only one file. Because I use scss which imports all required files, there is no need to compile all .css files, only main one.

Now, my gulpfile.js contains:

var gulp    = require('gulp');
var util    = require('gulp-util');
var sass    = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/style.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

And I have to go in ./sass/style.scss and save it to triger gulp watch.

I want gulp to watch all files (something like ./**/*.scss) but to render only one - ./sass/style.scss. How to achieve that?


Solution

  • Solution to this is simple, just edit watch part of the gulpfile.js to:

    gulp.task('watch', function() {
      gulp.watch('./**/*.scss', ['sass']);
    });
    

    Which says: watch for all .scss and on change run 'sass' taks.

    'sass' taks compiles only ./sass/style.scss'