Replacing Grunt/Gulp with NPM

Grunt/Gulp are Overkill (for me)

I have come to the conclusion that specialized wrapper/runner systems such as Grunt and Gulp are unnecessary technical debt.  I had previously been using Gulp and all the pertinent Gulp add-ons that I needed and it was a source of complexity.

So I decided to port a codebase into a new data visualization project called dex.js.

Previously, in my node_modules directory I had 54 node packages spread across 31,239 files taking up 343M of disk space.  That’s a lot of overhead for a javascript visualization library!

$ ls -1 node_modules/|wc -l
54

$ find node_modules -name \* | wc -l
31239

$ du -sh node_modules
343M node_modules

As I considered ripping all of this out with a simple Makefile replacement, I came across an insightful article  “Why we should stop using Grunt & Gulp” written by Keith Cirkel.  He follows up with a prescriptive article “How to us NPM as a build tool”.

Keith points out that adding layers like Grunt/Gulp contribute complexity, unnecessary dependencies and bloat to your project.

By using npm and a well configured package.json, you can reduce the complexity greatly.

So I decided to put it to the test…

Life without Gulp

Things are much simplier now.  I have a package.json that specifies how my application is laid out and defines a few scripts for creating build distributions, testing and creating documentation.

package.json:

{
  "name": "dexjs",
  "description": "dexjs : dexvis javascript visualization component library.",
  "version": "0.1.0",
  "license": "Apache-2.0",
  "keywords": [
    "chart",
    "charting",
    "dataviz",
    "visualization",
    "c3",
    "d3"
  ],
  "homepage": "http://dexvis.com",
  "email"   : "patrick145@msn.com",
  "url"     : "https://dexvis.wordpress.com",
  "files": [
    "src/dex.js"
  ],
  "main": "dex",
  "repository": {
    "type": "git",
    "url": "https://www.github.com/PatMartin/dexjs.git"
  },
  "dependencies": {
    "jquery": "latest",
    "underscore": "latest"
  },
  "devDependencies": {
    "jshint": "latest",
    "jasmine": "latest",
    "browserify": "latest"
  },
  "scripts": {
    "lint": "jshint src/**.js",
    "docs": "jsdoc -c conf.json -t ./node_modules/ink-docstrap/template -R README.md",
    "build": "browserify src/dex.js --standalone dex > dist/dex.js && browserify src/dex.js --standalone dex | uglifyjs > dist/dex.min.js && browserify src/dex.maps.js --standalone dex > dist/dex.maps.js && browserify src/dex.maps.js --standalone dex | uglifyjs > dist/dex.maps.min.js",
    "test": "jasmine SpecRunner.html"
  }
}

I have my main 4 task defined as scripts. Within WebStorm I can execue individual scripts with a single button click.  It’s minimalistic, though script strings can get unwieldy.  Here are my new set of dependencies.   I now have 7 package dependencies spread across 6,750 files taking up a total of 45M of disk space.  That’s much better than my previous 54 node packages spread across 31,239 files taking up 343M of disk space.

$ ls -1 node_modules/|wc -l
7

$ find node_modules/ -name \* | wc -l
6760

$ du -sh node_modules
45M node_modules

I also get rid of 6-7 gulpfiles and targets and my build system is a lot more understandable, much less complex with an order of magnitude fewer dependencies.

Where to go from here?

From here, I am going to focus on defining a package.json compliant enough to allow for distribution via npm in addition to the github repository.

Finally, it feels like my build system is working for me rather than creating work for me.

  • Pat
Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s