How to use Gulp for CSS changes ?

If you are not familiar with javascript language, you will not understand how the Gulp works. But Javascript knowledge is not mandatory to use Gulp, you can get started easily from this link.

Note: Continue if you tried Gulp using above Css-tricks link or other.

Everybody knows Gulp is used to

Compile Sass/Less to CSS,
Reload the webpage automatically after saving HTML, Less/Sass, JS files,
minifying images, stylesheets, scripts,
and many more which someone knows…,

but if you want to use Gulp in non-Sass/Less projects, then this post will be useful for you.

In the beginning, as i am not a good Js programmer, i was struggling how to just tweak the code to watch the change for css files alone. I googled for an answer, but not able to get it so then after some days, finally i figured it out. This is a very simple one actually.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('directory/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML, JS, CSS files change
  gulp.watch('directory/*.html', browserSync.reload); 
  gulp.watch('directory/js/**/*.js', browserSync.reload);
  gulp.watch('directory/css/**/*.css', browserSync.reload);  
});

As i added just one line of code in line number 7, whenever you save browserSync module will apply your changes in HTML. You can use this code in your gulpfile.

I linked with my Gist Github page for full Gulp file.

How to use Gulp for CSS changes ?

Comments