JS: JavaScript Optimization with Gulp

Aug 19 2017- POSTED BY projecth 0 Comment

Gulp Modules

Build a Gulp pipeline resource that will minify the resources in our app to their smallest footprint possible.

 

JS Optimization Steps:
  1. Concat and minify CSS pf JS libraries
  2. Add HTML with new CSS file
Module Name Module Keyword Role
Basic Gulp Script ‘gulp’ Basic definitions.
Concat Module ‘gulp-concat’ Combine CSS files.
Clean CSS Module ‘gulp-clean-css’ Minify CSS, combine media queries, removes useless code.
Inline Source Module ‘gulp-inline-source’ Adds AtF necessary inline CSS.
Uglify Module ‘gulp-uglify’ Minify JavaScript code.
Rename Module ‘gulp-rename’ Add suffix ‘min’ to JS file names.
Pump Module ‘pump’ Pipes streams together and destroys all of them if one of them closes.
HTML Min Module ‘gulp-htmlmin’ Minify HTML code.
GZip Module ‘gulp-gzip’ Optional: GZip all files.

To unminify a certain minified CSS file, run the following script:

> cssunminifier prod.min.css

Gulp: JavaScript Optimization file

var gulp = require('gulp');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var inlinesource = require('gulp-inline-source');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var pump = require('pump');
var htmlmin = require('gulp-htmlmin');
var gzip = require('gulp-gzip');

gulp.task('compress-css', function() {
  return gulp.src(['./src/css/pikaday.css', './src/css/theme.css'])
    .pipe(cleanCSS({
      level: {
        1: {},
        2: {}
      }
    }))
    .pipe(concat('date-picker.min.css'))
    .pipe(gzip())
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('inlinesource', function () {
    return gulp.src('./src/index.html')
        .pipe(inlinesource())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./dist'));
});

gulp.task('compress-js', function (cb) {
  pump([
        gulp.src('./src/js/*.js'),
        uglify(),
        rename({ suffix: '.min' }),
        gzip(),
        gulp.dest('./dist/js')
    ],
    cb
  );
});

gulp.task('default', ['compress-css', 'compress-js', 'inlinesource']);