Search code examples
npmconcatenationbuild-processgulpminify

Gulp-js task to minify non-minified files and concatenate with minified files


How to write a gulp-js task which minifies only non-minified files and concatenated them with already minified files.


Solution

  • //Minify and transfer non-minified files to a temp folder
    gulp.task('scripts1', function() {
      return gulp.src(['js/*.js', '!js/*.min.js'])
        .pipe(fixmyjs({}))
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js/new'))
        //.pipe(notify({ message: 'Scripts1 task complete to minify' }));
    });
    //transfer minified files to the same temp folder
    gulp.task('scripts2',['scripts1'], function() {
      return gulp.src(['js/*.min.js','js/rev-slider/*.min.js'])
        .pipe(gulp.dest('dist/assets/js/new'))
        //.pipe(notify({ message: 'Scripts2 task complete to copy minified files' }));
    });
    //concat all minified files to a new dist folder
    gulp.task('scripts3',['scripts2'], function() {
      return gulp.src('dist/assets/js/new/*.min.js')
        .pipe(order([
                    'dist/assets/js/new/jquery-1.10.2.min.js',
                    'dist/assets/js/new/bootstrap.min.js',
                    'dist/assets/js/new/jquery.appear.min.js',
                    'dist/assets/js/new/jquery.countTo.min.js',
                    'dist/assets/js/new/waypoints.min.js',
                    'dist/assets/js/new/jquery.prettyPhoto.min.js',
                    'dist/assets/js/new/modernizr-latest.min.js',
                    'dist/assets/js/new/SmoothScroll.min.js',
                    'dist/assets/js/new/jquery.parallax-1.1.3.min.js',
                    'dist/assets/js/new/jquery.easing.1.3.min.js',
                    'dist/assets/js/new/jquery.sticky.min.js',
                    'dist/assets/js/new/owl.carousel.min.js',
                    'dist/assets/js/new/jquery.isotope.min.js',
                    'dist/assets/js/new/jquery.themepunch.plugins.min.js',
                    'dist/assets/js/new/jquery.themepunch.revolution.min.js',
                    'dist/assets/js/new/jquery.mb.YTPlayer.min.js',
                    'dist/assets/js/new/jquery.mapmarker.min.js',
                    'dist/assets/js/new/scripts.min.js'
                ], { base: './' }))
        .pipe(concat('scripts.min.js'))
        .pipe(gulp.dest('dist/assets/js'))
        .pipe(notify({ message: 'Scripts3 task complete to concat all minified files' }));
    });
    //delete the temp folder
    gulp.task('cleantempjs',['scripts3'], function(cb) {
        del('dist/assets/js/new', cb)
    });
    //Now run the default task with clean task
    gulp.task('clean', function(cb) {
       del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
    });
    
    gulp.task('default', ['clean'], function() {
       gulp.start('cleantempjs');
    });