Gulp.js SASS to CSS watching file change – Use Example

Simple development setup for SASS CSS compilation, watching changes, JavaScript margin and code minification with gulp.js.

Install Node.js here, then create package.json in a project directory. Open terminal and navigate to project directory. From there run npm run install, npm install. Now create second file – gulpfile.js, now run npm run build

Now you can write CSS in SASS and have it compiled on the fly. Gulp is a powerful tool and use to be very popular before the WebPack arrival.

Gulp has over 4000 plugins, and it still has a lot to offer in terms of functionality.

Demo – Example setup:

File: package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "sass, js, gulp - convert, oglify, minify, move",
  "main": "../index.php",
  "scripts": {
    "build": "gulp",
    "install": "npm i -D gulp gulp-clean-css gulp-concat gulp-minify gulp-sass gulp-uglify"
  },
  "author": "devel",
  "license": "WP ISC/ Theme Copyrighted",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify": "^3.1.0",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.49.10"
  }
}

File: gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const minify = require('gulp-minify');

// custom config object - config = name => src, dest
const config = {
  scripts: 
    {
      src: ['./src/js/jquery-3.1.1.min.js', './src/js/**/*.js','./src/js/custom.js'], 
      dest: './js'
    },
  sass: 
    {
      src: ['./src/sass/*.sass'], 
      dest: './css'
    },
};
 
gulp.task('scripts', function() {
  // Minify and copy all JavaScript (except vendor scripts) 
  return gulp.src(config.scripts.src)
      .pipe(concat('custom.js'))
      .pipe(minify({
        ext:{
            src:'.js',
            min:'.min.js'
        },
      }))
    .pipe(gulp.dest(config.scripts.dest));
});

gulp.task('sass', function() {
  // SASS and copy all JavaScript
  return gulp.src(config.sass.src)
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest(config.sass.dest));
});

// Rerun the task when a file changes 
gulp.task('watch', function() {
  // gulp.watch(config.scripts.src, gulp.series('scripts'));
  gulp.watch(config.sass.src, gulp.series('sass'));
});
 
// The default task (called when you run `gulp` from cli) 
gulp.task('default', gulp.series('sass', 'scripts', 'watch'));

File main.sass:

@import variables
@import styles
@import layout