Concatenate js files in correct order using Gulp

Question

I am trying to concatenate a bunch of js files with gulp, but in a specific order. I want a file called 'custom.js' to be last (could be any other filename, though.

This is my gulp task:

gulp.task('scripts', function() {
  return gulp.src(['src/scripts/**/!(custom)*.js','src/scripts/custom.js'])
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    //.pipe(gulp.src('src/scripts/**/*.js')) not needed(?)
    .pipe(order([
        '!(custom)*.js', // all files that end in .js EXCEPT custom*.js
        'custom.js'
    ]))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('static/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('static/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

However, this just concatenates files in alphabetical order. What can I do to solve this, except renaming the custom.js file to something like zzz-custom.js?

Answer 1

You need something along the lines of ....

gulp.task('scripts', function() {
    return gulp.src(['src/scripts/**/*.js','!src/scripts/custom.js', 'src/scripts/custom.js'])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('static/js'));
});

1. gulp.src
   • Globs all js files in src/scripts
   • Excludes src/scripts/custom.js
   • Loads src/scripts/custom.js
2. Concat the stream into main.js
3. Uglify the stream
4. Add '.min' suffix
5. Save to static/js

Key part is to first exclude custom.js from the glob and then adding it.

** EDIT **

Well, I suppose you could break down the steps. Not the most elegant but should do the job:

var sequence = require(‘run-sequnce’);
var rimraf = require(‘rimraf’);

// This gets called and runs each subtask in turn
gulp.task('scripts', function(done) {
    sequence('scripts:temp', 'scripts:main', 'scripts:ugly', 'scripts:clean', done);
});

// Concat all other js files but without custom.js into temp file - 'main_temp.js'
gulp.task('scripts:temp', function() {
    return gulp.src(['src/scripts/**/*.js','!src/scripts/custom.js'])
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main_temp.js'))
    .pipe(gulp.dest('static/js/temp'));
});

// Concat temp file with custom.js - 'main.js'
gulp.task('scripts:main', function() {
    return gulp.src(['static/js/temp/main_temp.js','src/scripts/custom.js'])
    .pipe(concat('main.js'))
    .pipe(gulp.dest('static/js'));
});

// Uglify and rename - 'main.min.js'
gulp.task('scripts:ugly', function() {
    return gulp.src('static/js/main.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('static/js'));
});

// Delete temp file and folder
gulp.task('scripts:clean', function(done) {
    rimraf('static/js/temp', done);
});

You could perhaps combine them back bit by bit if it works in this way and you want a "cleaner" file