Theme SCSS to CSS preprocessing (gulp 4)

README.md

For dev

• to build, same as $ gulp build. Includes clean, sourcemap, SASS compilation, autoprefixer.

$ gulp

• to watch changes and compile

$ gulp watch

• to clean up CSS

$ gulp clean

For production

Prepend NODE_ENV=production to trigger production mode, e.g.

$ NODE_ENV=production gulp

gulpfile.js

var gulp = require('gulp'),
    util = require('gulp-util'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    del=require('del'),
    log = util.log;
    runSequence = require('run-sequence'),
    sourcemaps = require('gulp-sourcemaps');

var config = {
  dist: './css'
};


gulp.task('set-dev-node-env', function() {
  return process.env.NODE_ENV = 'dev';
});

gulp.task('set-prod-node-env', function() {
  return process.env.NODE_ENV = 'prod';
});


var sassFiles = './scss/**/*.scss';
gulp.task('sass', function() {
  log('Generate CSS files ' + (new Date()).toString());
  var env = process.env.NODE_ENV || 'dev'; //environment variable that defaults to 'dev'

  var sassOptions = {
    errLogToConsole: true
  };

  if (env === 'dev') {
    log('==> for dev');
    sassOptions.outputStyle = 'expanded';
    sassOptions.sourceComments = 'map';

    gulp.src(sassFiles)
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 3 version','safari 5', 'ie 8', 'ie 9'))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('css'))
  }

  if (env === 'prod') {
    log('==> for prod');
    sassOptions.outputStyle = 'compressed';

    gulp.src(sassFiles)
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 3 version','safari 5', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('css'))
  }

});

// deletes content of the target directory.
gulp.task('clean', function(cb) {
  del(config.dist + '/**/*', cb);
});

gulp.task('build', ['set-prod-node-env', 'clean', 'sass']);

gulp.task('watch', function() {
  log('Watching scss files for modifications');
  gulp.watch(sassFiles, ['set-dev-node-env', 'sass']);
});

gulp.task('default', function() {
  runSequence('build');
});

package.json

{
  "name": "THEMENAME",
  "version": "1.0.0",
  "description": "The theme description.",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": {
    "name": "Ng Chin Kiong",
    "email": "[email protected]"
  },
  "license": "GPL-3.0",
  "devDependencies": {
    "del": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "gulp-wrapper": "^1.0.0",
    "jshint": "^2.10.2",
    "run-sequence": "^2.2.1"
  }
}