Front-end development using Gulp

Gulp is a JavaScript toolkit which helps you in implementing multiple front end tasks during web development, it can be used to do wide range of things which can help you in reducing the development time. You can create your own customized build process that suits your development needs.

Task Runner are tools to simplify your tedious work on development, like automating sass/sass compiler, bundling assets, linting source code, hot reloading local server. Some popular task runner are gulp and grunt. They are JavaScript tools where you can configure your task automation.

Why need Gulp

1.     Run multiple tasks together

2.     Using babel, convert latest JavaScript to old browser friendly versions

3.     Minimize images size to make better performance

4.     Merge and Minimize js files together to make better performance

5.     Compile Typescript to javascript

6.     Bundle and Convert CSS pre-processors: SASS, LESS SASS to CSS

7.     Can use template engines like twig, ejs etc

8.     Live reloading is probably the most important feature of BrowserSync. Change your code and the page is auto-reloaded.

9.     Easy to use/upgrade npm packages as your project’s requirement

10. Good project structure and easy to handle

Installing Gulp

1. Before we install gulp you need to have Node.js (Node) installed in your computer. If Node.js is not already installed in your computer, you can download the installer from Node’s website.
2. Once we’re done with installing Node, you can install Gulp using the following code in the command line tool.

// for windows users
npm install gulp -g

// for mac users
sudo npm install gulp -g

Reference URLs for Gulp setup

1. https://developers.google.com/web/ilt/pwa/introduction-to-gulp
2. https://gulpjs.com/docs/en/getting-started/quick-start/
3. https://semaphoreci.com/community/tutorials/getting-started-with-gulp-js

Gulp Project Structure

1. package.json

{
  "name": "Gulp-Project",
  "version": "1.0.0",
  "description": "Gulp Project",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Piyali Das",
  "license": "ISC",
  "engines": {
    "node": ">=12"
  },
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/preset-env": "^7.13.12",
    "@babel/register": "^7.13.8",
    "babel-cli": "^6.26.0",
    "browser-sync": "^2.26.14",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "^1.1.3",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify": "^3.1.0",
    "gulp-sass": "^4.1.0",
    "imagemin": "^7.0.0",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-jpegtran": "^6.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^6.0.0",
    "imagemin-pngquant": "^5.0.1",
    "imagemin-svgo": "^7.0.0",
    "pngquant": "^4.0.0",
    "pngquant-bin": "^3.1.1",
    "svgo": "^2.3.1"
  },
  "dependencies": {
    "npm": "^7.19.0"
  }
}

Why Babel ?

1. Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.
2. I have used to convert ES6 to ES5 JavaScript code.

gulpfile.js

const { src, dest, watch, parallel, series } = require("gulp");
const browserSync = require('browser-sync').create();
const babel = require('gulp-babel');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');
const {extendDefaultPlugins} = require('svgo');
const cache = require('gulp-cache');
const del = require('del');
const paths = {
  html: {
    src: 'src/**/*.html',
    dest: 'output/'
  },
  css: {
    src: 'src/scss/**/*.scss',
    dest: 'output/assets/css'
  },
  scripts: {
    src: 'src/js/**/*.js',
    dest: 'output/assets/js'
  },
  images: {
    src: 'src/images/*',
    dest: 'output/assets/images'
  }
};


function clean() {
  return del([
      'output/css/*.css',
      'output/js/*.js'
  ]);
}


function html() {
  return src(paths.html.src)
        .pipe(dest(paths.html.dest))
}


function css() {
  return src(paths.css.src)
        .pipe(sass().on('error',sass.logError))
        .pipe(concat('style.css'))
        .pipe(autoprefixer())
        .pipe(minify())
        .pipe(dest(paths.css.dest))
}


function scripts() {
  return src(paths.scripts.src) // src() can also be placed in the middle of a pipeline to add files to the stream based on the given globs.
    .pipe(concat('bundle.js'))    
    .pipe(babel())
    .pipe(minify())
    .pipe(dest(paths.scripts.dest)); // dest() is given an output directory string
}


function images() {
  return imagemin([paths.images.src], {
    destination: paths.images.dest,
    plugins: [
      imageminMozjpeg({ // minify jpg images
        quality: [50]
      }),
      imageminPngquant({ // minify png images
        quality: [50]
      }),
      imageminGifsicle({ // minify gif images
        optimizationLevel: 2 // Select an optimization level between 1 and 3
      }),
      imageminSvgo({
        plugins: extendDefaultPlugins([
          {name: 'removeViewBox', active: false}
        ])
      })
    ]
  });
}


function watchFiles() {  
  browserSync.init({
    server: {
      baseDir: "./output",
      index: "/index.html"
    }
  }); 
  watch(paths.html.src, html);  
  watch(paths.css.src, css);
  watch(paths.scripts.src, scripts); 
  watch(paths.images.src, images); 
  watch(paths.html.src).on('change', browserSync.reload); // any change in output folder, reload page
}


/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
const build = series(clean, parallel(html, css, scripts, images), watchFiles);


/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.css = css;
exports.scripts = scripts;
exports.images = images;
exports.watch = watchFiles;
exports.build = build;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.default = build;

gulp.parallel

Tasks will be executed simultaneously

gulp.series

Tasks will be executed one after another, in sequential order

CSS function

function css() {
  return src(paths.css.src)
        .pipe(sass().on('error',sass.logError))
        .pipe(concat('style.css'))
        .pipe(autoprefixer())
        .pipe(minify())
        .pipe(dest(paths.css.dest))
}

Minimize Images (jpg/png/gif/svg)

return imagemin([paths.images.src], {
    destination: paths.images.dest,
    plugins: [
      imageminMozjpeg({ // minify jpg images
        quality: [50]
      }),
      imageminPngquant({ // minify png images
        quality: [50]
      }),
      imageminGifsicle({ // minify gif images
        optimizationLevel: 2 // Select an optimization level between 1 and 3
      }),
      imageminSvgo({
        plugins: extendDefaultPlugins([
          {name: 'removeViewBox', active: false}
        ])
      })
    ]
  
});

Packages are needed for minimization of images

    "imagemin": "^7.0.0",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-jpegtran": "^6.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^6.0.0",
    "imagemin-pngquant": "^5.0.1",
    "imagemin-svgo": "^7.0.0",
    "pngquant": "^4.0.0",
    "pngquant-bin": "^3.1.1",
    
    "svgo": "^2.3.1"

Run Gulp

gulp build

1. write "gulp" script in control panel / git and press Enter.. It will execute build command by default and open a page "localhost:3000".