Infosys experts share their views on how digital is significantly impacting enterprises and consumers by redefining experiences, simplifying processes and pushing collaborative innovation to new levels

« How and where Salesforce trumps Competition - II | Main | Infosys Digital Breaks Out At Adobe Summit »

Defining an effective JavaScript build system using cutting edge tools

Introduction

As front JavaScript developer, there are several tasks that need to be repeatedly completed within a project. Few of them are transpiling, linting, concatenation, minification of scripts, pre -processing CSS, optimizing images, running unit tests and moving files. If all these tasks are done manually then it leads to a tedious complex project.

Defining a JavaScript build system can reduce the effort spend on these type of tasks. Eventually, results in team focus only on development of functionality. Plenty of JavaScript build tools available in market, they are classified in-to two types, task runners and module bundlers. An effective build system for JavaScript applications can be defined by both task runner and module bundler.

Grunt, Gulp and npm scripts are mostly used task runners and browserify, brunch and webpack are mostly used as module bundlers. Task runners are good tools for specific task such as transpiling, linting, etc. However, for splice various files together and produce single bundle file module bundlers are required.

In below sections discussing on how Grunt, Gulp and npm scripts task runner and webpack module bundler can be configured and used as an effective JavaScript build system. Also we are comparing them with npm download trends.          

Grunt

Grunt was created by Ben Alman in 2012. Grunt is a JavaScript task runner, used to perform linting, unit testing, concatenation, minification, etc as part of build. Grunt depends on node.js runtime and npm (node package manager) to define and run different tasks.

Grunt is highly configurable. All grunt tasks have a set of configuration options therefore user can set those accordingly to meet their specific needs. Also, they provide ability to define custom tasks and combine multiple tasks to a single task. Grunt has more than five thousand predefined plugins available.

In typical grunt task files are read, modify and write to temp location and same repeat for other tasks as well. The final task will write file to the destination location.

Gulp

Gulp is a JavaScript base task runner by Fractal innovations. Gulp is a fast and intuitive streaming build tool built on Node.js. Gulp uses code over configuration approach to define tasks.

Gulp makes more efficient way for continuous integration, testing and development. It helps in creating production build with minify, concatenation, vendor prefixes, less to CCS compilation, injecting files in to HTML, unit testing, code analysis. Gulp with tasks for code quality, tests and build pipeline results in improve quality, fast delivery in repeatable and consistent manner.

Gulp has four simple API's gulp.task, gulp.src, gulp.dest and gulp.watch. In gulp, output files are piped between tasks. Gulp uses streams. So files are stored in memory streams, modification of files by the tasks are performed on same streams. Elimination of temporary file writing results in less disk operation and makes the gulp faster.

 

npm scripts

Node provides an another approach to implement build with npm and package.json. It gives you the best option over other task runners such as grunt and gulp. npm is part of node system. Hence no additional tools or plugins are required. npm scripts can be used for linting, compilation, clean destination, less to CSS, bundling and minifying tasks. Pre and Post hooks scripts for npm scripts are available, which can be configured to run before or after the npm scripts. Also, npm scripts can be run on concurrent or parallel manner.

Webpack

Webpack is a module bundler. It uses modular systems to bundle files in right order.It provides a unique way to combine js, css, image, fonts in to one bundle.js file. Only constraint with webpack is internally project should use any one of the modular systems (AMD, CommonJs or ES6). Also, webpack works well with npm scripts for tasks.

Webpack can keep both development and production configuration as separate files as Webpack.config.dev.js and webpack.config.prod.js. Important aspect of webpack is it extensively uses loaders. Custom tasks could be written with loaders. Loaders like babel-loader for es6 to es5 transpilation, jshint-loader for linting JavaScript code, css- loader for loading styles, sass-loader and less-loader for preprocessor to css can be used in webpack by configuring them on webpack.config file.

Webpack can be think as specialized task runner, which can do all the tasks that task runners can do (transpilation, concatenation and minification). Additionally, it will give a feature of combine your CSS to java scripts and same can be done with html, images and fonts.

Webpack is getting popular among the javascript build tools, below npm downloads and github statistics data from http://www.npmtrends.com/grunt-vs-gulp-vs-webpack will give how webpack is getting momentum compare with other build tools

Conclusion

Task runner such as grunt and gulp are great tools. They perform multiple specific tasks in cross-platform manner. When required to build all your client assets (JavaScript, css, html, images and fonts) in-to single JavaScript file(bundle.js) task runners cannot do this alone therefore it requires bundler. Bundlers such as browserify, Brunch or webpack can be used for bundling client assets in to single file. Webpack and npm scripts could be used as an effective JavaScript build system.

References

 

https://gruntjs.com/

http://gulpjs.com/

https://docs.npmjs.com/misc/scripts

https://webpack.js.org/

https://en.wikipedia.org/wiki/

http://www.npmtrends.com/grunt-vs-gulp-vs-webpack


Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.