How to watch one gulp file that imports other? - css

Question

My sass structure look like this.
- /base
-- _fonts.scss
-- _all.scss
- /components
-- _all.scss
-- _header.scss
-- _footer.scss
- main.scss
Each _all.scss imports all files in the current folder, then the main.scss imports all _all files from each folder.
The problem I am facing is that I actually need to save main.scss in order for gulp to generate the .css file. If i watch all files it will then generate a lot of .css files which I don't need.
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./src/stylesheets/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css/'));
});
gulp.task('sass:watch', function () {
gulp.watch('./src/stylesheets/main.scss', ['sass']);
});
How do I make gulp watch all files and generate only one css file in the public folder?

Answer 1

Here's how I do it.
Main.scss
#import "your/relative/path/of/your/_partial-file1";
#import "your/relative/path/of/your/_partial-file2";
/*Other scss stylings if needed*/
In your gulpfile.js, add the sass task
gulp.task('css', ()=>{
 return gulp.src('src/scss/*.scss') //target all the .css files in the specified directory
   .pipe(sass()) //gulp-sass module to convert scss files into css file
   .pipe(minifyCSS()) //method to minify the final css file
   .pipe(gulp.dest('build/css')); //outputs final css file into the specified directory
   console.log('CSS build');
});
gulp.task('default', [ 'css','your', 'other','tasks' ],()=>{
console.log("All done. Watching files...");
 //watch the files in the specified directory.
 //if any changes are made to the files, the specified task will be executed in the watch method
gulp.watch('src/**/*.scss',['css']);
});
Find the full article here: http://todarman.com/gulp-configuration-build-html-css-js/
Hope this helps.