Using Gulp to Concatenate and Uglify files

by

It turns out that I needed to use gulp-rename and also output the concatenated file first before ‘uglification’. Here’s the code:

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify');

gulp.task('js-fef', function(){
    return gulp.src(['file1.js', 'file2.js', 'file3.js'])
        .pipe(gp_concat('concat.js'))
        .pipe(gulp.dest('dist'))
        .pipe(gp_rename('uglify.js'))
        .pipe(gp_uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

Coming from grunt it was a little confusing at first but it makes sense now. I hope it helps the gulp noobs.

And, if you need sourcemaps, here’s the updated code:

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify'),
    gp_sourcemaps = require('gulp-sourcemaps');

gulp.task('js-fef', function(){
    return gulp.src(['file1.js', 'file2.js', 'file3.js'])
        .pipe(gp_sourcemaps.init())
        .pipe(gp_concat('concat.js'))
        .pipe(gulp.dest('dist'))
        .pipe(gp_rename('uglify.js'))
        .pipe(gp_uglify())
        .pipe(gp_sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

See gulp-sourcemaps for more on options and configuration.

UPDATE – FEB 2022

These days, it may be easier for you to handle build tasks using Gulp4 and Async/Await functionality:

// gulpfile.js

const fs = require('fs/promises');
const concat = require('concat');
const uglify = require('uglify-js');

let files_arr = ['file1.js', 'file2.js', 'file3.js'];

async function myGulpTask()
{
    var concat_str,
        uglify_str
    ;

    // concat content
    concat_str = await concat(files_arr);

    // save to file
    await fs.writeFile('concat.js', concat_str, 'utf8');

    // uglify content
    uglify_str = await uglify.minify(concat_str, {mangle:false}).code;

    // save to file
    await fs.writeFile('uglify.js', uglify_str, 'utf8');
}

module.exports = {
    myTask: myGulpTask
};

Then from the CLI:

gulp myTask

More Related Contents:

  1. Gulp error: The following tasks did not complete: Did you forget to signal async completion?
  2. Pass Parameter to Gulp Task
  3. What is the ** glob character?
  4. Get the current file name in gulp.src()
  5. Can you remove a folder structure when copying files in gulp?
  6. how base option affects gulp.src & gulp.dest
  7. about GULP and application development [closed]
  8. NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed]
  9. Stylesheet not loaded because of MIME-type
  10. How to run Gulp tasks sequentially one after the other
  11. How to fix “ReferenceError: primordials is not defined” in Node.js
  12. gulp command not found – error after installing gulp
  13. Why do we need to install gulp globally and locally?
  14. How to prevent moment.js from loading locales with webpack?
  15. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  16. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  17. After installation of Gulp: “no command ‘gulp’ found”
  18. Gulp.js task, return on src?
  19. Concat scripts in order with Gulp
  20. Modify file in place (same dest) using Gulp.js and a globbing pattern
  21. Uglify SyntaxError: Unexpected token: punc ())
  22. npm install not work
  23. Configure Spring Boot for SPA frontend
  24. Try reinstalling `node-sass` on node 0.12?
  25. Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project
  26. Can I use a Gulp task with multiple sources and multiple destinations?
  27. Gulp TypeError: Arguments to path.join must be strings
  28. Disable chrome react DevTools for production
  29. Permission denied to Docker daemon socket at unix:///var/run/docker.sock
  30. How to solve npm install error “npm ERR! code 1”

Leave a Comment