“NPM Scripts vs. Gulp” Round 2, feat. gulp-shelter

The “NPM as a build tool” revolution

The guide “How to use NPM as a build tool” was a big sensation when it appeared online, and for good reasons. Developers realized that, with just Node installed, they had a very capable build tool available, and that it resulted in significantly shorter build scripts.

$ npm install
$ npm run build

The day I wrote my first build+deploy script in a package.json felt really good. I was experimenting with Browserify, Surge.sh and Travis, and I was able to quickly setup continuous-deployment for a small Single Page Application. I even managed to learn a bit of bash magic!
The day I had to revisit these NPM scripts didn’t feel quite as good, though :-(

Maintaining and growing NPM scripts

One day or another, you’ll find yourself with a line in your package.json that looks worse than this:

"browserify": "browserify src/project.js --standalone project --noparse node_modules/dep1/dist/dep1.js node_modules/dep2/dist/dep2.js --dg --debug | exorcist dist/project.js.map > dist/project.js",

Reusing NPM scripts and not repeating yourself

The only way to make your NPM scripts reusable and DRY is to use config variables.

Learning Bash syntax

The language used in NPM scripts is Bash, which is a rich and powerful language, with a syntax far from JS. Learning another language can surely be personally appealing for a developer. But unless you’re comfortable with being the only one who knows how “the code goes to the cloud”, you’re also making it a pre-requisite for your teammates and contributors. And that doesn’t make them more productive: it simply gets in the way.

Introducing Gulp-Shelter!

This is how I’ll write my build scripts, starting this year.

"scripts": {
"gulp": "gulp",
"help": "gulp --tasks"
$ npm run help

> project.js@1.0.0 help /home/myself/workspace/project.js
> gulp --tasks
[22:56:47] Tasks for ~/workspace/project.js/gulpfile.js
[22:56:47] ├── build Generate project lib and source-map
[22:56:47] ├── deploy Run by Travis to deploy on Surge
[22:56:47] └── serve Open index.html and live-reload on changes
$ npm run gulp -- <task name>

Do you share our interest in using JS to create simple tools that help creative people out there? Drop us an email: jobs@prototypo.io



My parents were the Pierre & Marie Curie of SEO: you can google me with my first-name.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Louis-Rémi Babé

Louis-Rémi Babé

My parents were the Pierre & Marie Curie of SEO: you can google me with my first-name.