Gulp watch all files but render only one (sass)

Question

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?

Baziotes

Answer 1

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'

Baziotes

Answer 2

No need to change anything in gulpfile.js. There is another simpler method you need only add underscore to all SCSS files that are being imported with @import statement (like _*.scss), this will forbid compiler to create separate CSS files.

Example: mymodular.scss => _mymodular.scss

Guidelines from SCSS documentation

Partials You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Kakalina