Gulp 4 dev and production method

Question

I've recently decided to update some really old gulp files to gulp 4. I pretty much started from scratch as my workflow is totally different and therefore I wanted a bespoke solution to fit how I now work.

So far I have a file that will process my files and watch for changes and reload the browser. My question is - at the moment I pipe files to a tmp folder for development but when I'm ready to produce my production files, is there a neat way to incorporate this logic into my existing functions or is it better to make new function specifically to handle final build processes?

I mainly ask because I could make some buildStylesProd function but is there a neater more DRY way to handle this all within a single function?

Current progress:

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, lastRun, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const del = require('del');
const browserSync = require('browser-sync').create();
var replace = require('gulp-replace');

var settings = {
    reload: true,
    styles: true,
    scripts: true,
    clean: true
};

// File paths
const files = { 
    input: 'src/',
    tmp: 'tmp/',
    scssPath: 'src/scss/**/*.scss',
    jsPath: 'src/js/**/*.js',
    cssTmp: 'tmp/css',
    jsTmp: 'tmp/js',
    htmlPath: 'perch/templates/**/*.html',
    pageFiles: 'perch/templates/**/*.php',
}

// Watch for changes to the tmp directory
var startServer = function (done) {

    // Make sure this feature is activated before running
    if (!settings.reload) return done();

    // Initialize BrowserSync
    browserSync.init({
        injectChanges: true,
    });

    // Signal completion
    done();

};

// Reload the browser when files change
var reloadBrowser = function (done) {
    if (!settings.reload) return done();
    browserSync.reload();
    done();
};

function buildStyles(done){    
    // Make sure this feature is activated before running
    if (!settings.styles) return done();

    return src(files.scssPath)
            .pipe(sourcemaps.init()) // initialize sourcemaps first
            .pipe(sass()) // compile SCSS to CSS
            .on("error", sass.logError)
            .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
            .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
            .pipe(dest(files.cssTmp)
    ); // put final CSS in dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function buildScripts(done){
    // Make sure this feature is activated before running
    if (!settings.scripts) return done();

    return src([
            files.jsPath
            //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
            ])
            //.pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(dest(files.jsTmp)
    );
}

// Remove pre-existing content from output folders
var cleanTmp = function (done) {

    // Make sure this feature is activated before running
    if (!settings.clean) return done();

    // Clean the dist folder
    del.sync([
        files.tmp
    ]);

    // Signal completion
    return done();
};

// Watch for changes
var watchSource = function (done) {
    watch([files.input, files.pageFiles], series(exports.default, reloadBrowser));
    done();
};

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
    cleanTmp,
    parallel(
        buildStyles, 
        buildScripts
        )
);

// Watch and reload
// gulp watch
exports.watch = series(
    exports.default,
    startServer,
    watchSource
);

score 2 · Answer 1 · answered Oct 18 '19 at 17:17

First, you'll need to install gulp utility plugin npm i --save-dev gulp-util to access environmental variable. So that when you run gulp --env=production, you can access this "env" thing in your gulp.js file. Then require gulp-util const gutil = require('gulp-util');

Then add this function to your gulp file:

function uglifyIfNeeded() {
  return gutil.env.env === 'production'
    ? uglify()
    : gutil.noop();
}

Then you'll be able to use this function in your build definitions like this:

function buildScripts(done){
  if (!settings.scripts) return done();

  return src([
        files.jsPath            
        ])
        .pipe(concat('all.js'))

        //NOTE THIS LINE
        .pipe(uglifyIfNeeded())

        .pipe(dest(files.jsTmp)
   );
}

Surely, you don't have to create uglifyIfNeeded() function. You can use environmental function inside your pipe like this:

function buildScripts(done){
  if (!settings.scripts) return done();

  return src([
        files.jsPath            
        ])
        .pipe(concat('all.js'))

        //NOTE THIS LINE
        .pipe(gutil.env.env === 'prod' ? uglify() : gutil.noop())

        .pipe(dest(files.jsTmp)
   );
}

Make sure that you have uglify plugin though.

Gulp 4 dev and production method

1 Answers1