Saving Disk Space With A Global Gulp.js

gulp.js is a wonderful tool, and it’s become an integral part of my workflow. There is one thing that I really, really hate about using it though, and that’s the fact that every project has it’s own node_packages directory which usually grows to 50 Megs or so when all the dependencies for the stuff I use are installed. If I only worked on one or two projects at a time, no big deal; drive space is cheap, right? But usually I’m working on several client projects at once, and I’ve lost count of all the little personal projects I have in various states of completion at the moment. A rough guess would be fourteen or fifteen of these at any given time, probably more. Add in finished (or abandoned) ones that I never quite got around to trashing the modules directory out of, and all those 50 Meg folders start to pile up.

Warning: Not For Production

Note that this disk-saving process is great for local development, when you are the lone developer, or for personal projects. For production work, on a team, etc. it might not be the best thing in the world to do, because if you update any of your packages, all your projects just got updated, and this may not be what you want.

A Global gulp

The good news is you can just install all your gulp stuff once–globally–and then use the npm link command to fake a local install for each project. The better news is that it’s incredibly easy!

Step One: Install gulp globally

If you’ve ever used gulp before, you’ve already done this. In case you haven’t, do this:

$ sudo npm install -g gulp

This assumes you have node installed as well. You may or may not need the sudo part of the command as well, but I’m leaving it on all my examples just in case. Omit it if you know you don’t need it.

Step Two: Link gulp locally in your project

Let’s make a fake project directory:

$ mkdir ~/fake_project
$ cd ~/fake_project

Normally you would do a second, local, install of gulp, but not this time! We are going to create a local link to the global version instead:

$ sudo npm link gulp

The dreaded node_modules directroy show up, but if you look inside, you’ll see it created a tiny link instead of installing another copy.

Step Three: Make sure it worked

Stealing a page from the gulp quickstart instructions, make a dummy gulpfile.js in your project directory and put this in it:

var gulp = require('gulp');
gulp.task('default', function() {
    console.log("Hey look at that!");
});

Then check that all is well by running gulp from the command line:

$ gulp

You should see something like this:

[gulp] Using gulpfile /Users/you/fake_project/gulpfile.js
[gulp] Starting 'default'...
Hey look at that!
[gulp] Finished 'default' after 107 μs

And that’s that.

Step Four: Install plugins

When you install plugins, you repeat the process: install globally, link locally. Using gulp-react as an example:

$ sudo npm install -g gulp-react
$ sudo npm link gulp-react

Do this for every plugin you haven’t installed before. If you know you’ve already installed a copy of gulp-react you can just link it.

Step Five: Enjoy more disk space

That’s it. Now you can have all sorts of extra room for cat pictures or videos of cats or cat stories, or whatever it is that people put on their computers these days.

I hope you found this useful, and until next time, happy coding! I would love to hear feedback or answer any questions on twitter: @veddermatic

back to top