Tooling with NPM Scripts...is it worth it?

Running Scripts and Builds using the Node Package Manager's Script functionality is become more and more popular these days, but it it the best approach?

Tooling is one of the biggest pain points for front-end developers. That's because they change so often, that just when you get comfortable using one, the community has already moved on. And a lot of people make you feel guilty about using older tools. Grunt, Gulp, Broccoli, Webpack. The list goes on. A few developers have eschewed solutions like this and moved on to pure NPM scripts. But is it a better? Here's some of the stuff I learned.

Complex build process with NPM Scripts

I recorded the course Tooling with NPM Scripts because I wanted to explore the differences between build tools like GulpJS and plain old NPM scripts. Here's what my finished NPM script for the course looked like:

"scripts": {
    "start": "npm-run-all --parallel dev:*",
    "dev:sass-dev": "node-sass --watch process/scss --output-style expanded --source-map true  process/scss/style.scss --output builds/development/css",
    "dev:js-transform": "babel process/js/**/*.js --watch --out-file builds/development/js/script.js --source-maps",
    "dev:serve": "live-server builds/development",
    "build": "npm-run-all prod:*",
    "prod:setup": "mkdirp builds/production/js",
    "prod:sass-dev": "node-sass --output-style compressed process/scss/style.scss --output builds/production/css",
    "prod:js-uglify": "uglifyjs builds/development/js/script.js --compress --mangle --output builds/production/js/script.js",
    "prod:html-minify": "html-minifier --collapse-whitespace builds/development/index.html > builds/production/index.html",
    "prod:img-compress": "imagemin builds/development/images/**/*.* --out-dir=builds/production/images --plugin=jpeg-recompress --plugin=svgo",
    "prod:serve": "live-server builds/production"
  },

That looks pretty intimidating, but it's definitely shorter than what the equivalent would be with something like gulp. There's a few things going on in there that are interesting. The first thing you'll probably notice is that I have two similar sets of processes dev as well as prod. You can run dev process by typing in > npm start in your terminal, or run the build process run using > npm run build.

Cross Platform Compatibility

I'm running a module called npm-run-all in order to run tasks concurrently. Normally, you could run several commands using &&, but some windows machines won't understand that command. The other nice thing about this module is that it can let you run tasks sequentially as well as in parallel. Notice that I can also use a wildcard to run a series of sub-tasks (dev:* to run all of my development tasks). Another command you can't use in a cross-platform environment is mkdir (use the mkdirp module).

Variables...where are you?

The other advantage tools like Gulp have is the ability to create variables for things like paths. Not all modules accept globs (the ability to use wildcards or go through a whole folder of files at once). That means that keep entering in folder locations over and over, which is a bit harder to maintain. Variables make things easier and more consistent with tools like GulpJS, so this is something you'll definitely miss.

Inconsistencies

Another problem is that modules are not consistent in their implementation of options. And so in one module, you'll have to use a --source-map option, while in another tool it will be called --source-maps (with an extra s). The same thing happens when you have to specify output directories and other options. Every module has a different way of expressing those. Gulp, on the other hand, gives you a consistent input and output syntax, variables and the ability to use glob patterns.

Why Bother?

I'm pretty sure I'll continue to use Gulp as my primary build tool. However, you should learn how to work with pure NPM scripts. Learning about NPM scripts will help you understand the NodeJS module system deeply and it will be easier to read scripts when you're using other modules in your applications. Plus, you may end up in a team that works this way.

For small projects, NPM Scripts make a lot of sense. For very large projects, the because it is more succinct makes sense too. It's really up to you. Study the technique and learn what works for you and your team. You're always more valuable if you understand different perspectives.

If you want to learn more, make sure you checkout my check out my course.Tooling with NPM Scripts. At a short 1:21 minutes, it's definitely worth your time.