Frontend Build Systems

Prathik Shetty

awebdeveloper

• Convert Less/Sass to CSS

• Convert TypeScript/Es6 to Es5 JS

• Install dependencies

• Run Linters

• Run Test cases  

• Minify and Uglify your code

After any Frontend Work

Enter

Unified Tools

• One software does many things 
• Need to run manually 
• Simple to use

Enter

Build Tools

• Configuration over code
• Everything is a plugin
• Designed for small projects and plugins
• Things happens in parallel 

npm install -g grunt grunt-cli grunt-init

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

grunt-init gruntfile
# answer a few questions

npm install

grunt 
# start the default task

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt)
  grunt.initConfig({
    yeoman: {
      src: 'src/', 
      dist: 'dist/' 
    },
    less: {
      main: {
        expand: true,
        cwd: '<%= yeoman.src %>',
        src: ['*.less'],
        dest: '<%= yeoman.dist %>',
        ext: '.css'
      }
    }
  })

  grunt.registerTask('default', ['less'])
}

gruntfile.js

npm install --save-dev load-grunt-tasks grunt-contrib-less

grunt

• No more pre-process (compile, compress, concat)

• No more compiled files (e.g. CSS) in Git / SVN
• No more 3rd-party application (CodeKit, Koala)
• No more inconsistent configuration
• No more build system explanation for new members
• Easy to do tests before commit and merge

But I don't understand anything

• Stream-based
• Code over configuration
• Everything is code (Node modules)
• Not a task runner
• Task is not just a plugin

npm install -g gulp

npm init

npm install --save-dev gulp

mkdir PROJECT_NAME && cd PROJECT_NAME

touch gulpfile.js

const gulp = require('gulp'),
      less = require('gulp-less')

gulp.task('less', function () {
  return gulp
          .src('/less/*.less')
          .pipe(less({ compress: true }))
          .pipe(gulp.dest('/css'))
});

gulp.task('default', ['less']);

gulpfile.js

npm install --save-dev gulp-less

gulp less

Enter

React

• Not a task runner
• It is a module bundler
•  Analyzes dependencies among your modules and generates assets
• Not only for JS but also CSS, HTML, etc

npm init

npm install --save-dev webpack

mkdir PROJECT_NAME && cd PROJECT_NAME

touch webpack.config.js

var path = require("path");
var Webpack = require("webpack");

// Our configuration
module.exports = {
    // Define the entry point
    entry: path.resolve(__dirname, "js", "app.js"),

    // Output configuration
    output: {
        path: path.resolve(__dirname, "assets"),
        filename: "budle.js"
    },

    module: {
        loaders: [
            // Inform about CSS loaders so that it can be bundled too
        { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },

    // Generate source map files
    devtool: "source-map"
};

webpack.config.js

webpack --config webpack.config.js

But this isn't task runner

Enter

Fatigue

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

package.json 

npm run build

Present & Future

Thank You