Search code examples
gulpgulp-concatgulp-uglify

Gulp, concat and uglify files and concat with vendor


I want to concat and uglify my JS files with gulp. After that I want to conact the result with a vendor folder which includes jquery, bootstrap, ...

How can I concat the files from the vendor folder after uglify my js code?

Here is my current gulp file:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  gulp.src([
          './src/resources/assets/js/**/*.js',
          '!./src/resources/assets/js/vendor/**/*.js'
      ])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js/'));
});

gulp.task('default', ['scripts'], function() {
});

Solution

  • if I understand your question correctly, you want to concat your js.files with the libraries, but keep a concat version of your own js ?

    I would do that, you get to keep both files :

    var runSequence = require('run-sequence');
    
    gulp.task('myJs', function() {
      gulp.src([
              './src/resources/assets/js/**/*.js',
              '!./src/resources/assets/js/vendor/**/*.js'
          ])
        .pipe(concat('myJs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/'));
    });
    
    gulp.task('allJs', function() {
        gulp.src([
              './src/resources/assets/js/vendor/**/*.js',
              './public/js/myJs.js'
          ])
        .pipe(concat('allJs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/'));
    })
    
    
    gulp.task('default', function() {
      runSequence('myJs',
                  'allJs',
                  );
    });
    

    or that, you only keep one file :

    var merge = require('merge2');
    
    gulp.task('scripts', function() {
        // Get your js
        var myJs = gulp.src([
            src + 'my/*.js',
            src + '!not/my/*.js'])
    
        // Get vendor js
        var vendorJs = gulp.src(src + 'not/my/*.js')
    
        return merge(myJs, vendorJs)
            .pipe(concat('main.js'))
            .pipe(uglify())
            .pipe(gulp.dest(dest));
    });