From Gulp to NPM Scripts
For a recent project refactor, I decided to give NPM scripts a go. It went really well.
Here are the tasks I need to perform for this project:
- Postcss my CSS with some plugins
- Minimize/optimize my images
- Handlerbars my HTML
- Create folders and copy files
- Run a live reload server for development
Here’s what that ended up looking like in
To build the project I type
npm run build. To run the development environment, it’s
npm start. To make sure it works on Windows and Linux, I’m eschewing system commands for node modules, like the node module
mkdirp instead of bash’s
npm-run-all has a
--parallel option to run scripts synchronously, speeding things up.
Further down in my
package.json I set some modules plugins I need:
let handlebars = require('handlebars'),
It get excuted in NPM scripts via
"build:html": "mkdirp public && node build/cachebuster.js".
This setup is much easier to grok and manage than my ever-swelling Gulp file, at least for me.
On a side note, when dealing with Browserify in conjunction with Reactify or Vueify, use watchify for your live server stuff. It does incremental rebuilds and really speeds things along.
Hat tip to Why npm Scripts? for code snippets and inspiring me to try this.