You Might Not Need Gulp.js
As a front-end developer, you may notice that lately some folks are moving away from using build automation tools (task runners) such as Gulp or Grunt towards custom scripts and npm script runner. What is the reason for that?
Module bundlers such as Browserify and Webpack are steadily taking over, and there is very little room left for Gulp’s stream-based tasks. The majority of the work which you were previously doing with Gulp is now handled by Webpack — bundling and optimization for JavaScript, CSS and images; code splitting; targeted bundles for different environments (see isomorphic apps).
Still the idea of using JavaScript for build automation sounds quite reasonable, because it allows (1) to reduce the stack of technologies used in the front-end project and/or project dependencies, (2) it’s truly cross-platform (as opposed to bash scripts for example), and (3) there is a plethora of 3rd party libraries available to you via NPM registry which you can use directly without Gulp plugins inside your automation scripts.
Here is how a vanilla JavaScript build task may look like (assuming you’re using modern JavaScript syntax with async/await):
tools/build.js
You can slightly improve it by adding logging and error handling functionality:
tools/build.js
tools/run.js
Now you can list your script in package.json file as demonstrated below, and execute it with npm run build command.
package.json
The tools/build.js script will be converted to ES5 on the fly and executed by Node.js. No need to have any global dependencies installed to make it work (other than Node.js and npm).
BTW, in WebStorm IDE11 you can run the same command right from the UI:
For a complete example visit React Starter Kit on GitHub.
Published in #SWLH (Startups, Wanderlust, and Life Hacking)
