Updating Dependencies in a package.json

I am currently working for a client helping to build out a front-end framework, design pattern library for them to use throughout their company, for both internal teams and developers as well as external agencies and freelancers (like myself). A project that can will allow for simple prototyping, making a marketing site and beyond.

Together we have been reiterating the requirements of what is needed and have added and removed things as necessary. The whole package will be distributed using Yeoman. We picked the “web’s scaffolding tool” because of the various parts of the codebase that may or may not be required for any project it might get used on.

To start, I picked out the preexisting gulp webapp Yeoman generator to work on and adapt as needed. From the off this is fantastic as it allows a quick setup and creation of a project folder but the way the gulpfile.js is written does not and will not suit the needs of the entire project going forward.

As this was decided I made a start hacking together a gulpfile.js that would work for the project goals. This was by taking bits of the existing JavaScript, borrowing bits from another gulp-based boilerplate I have been using and adding new code and plugins as required.

Doing this leaves the package.json file in a bit of a mess. Borrowing from here and there I could not be sure if I was up-to-date on all the packages I included.

I wanted a way to update all of the dependencies in a quick and painless manner.

Updating ‘all the things’

After typing various combinations of words into a search engine. I clicked on a result that took me to npm-check-updates. This Node module when invoked on the command line will run through your package.json file, check to see if each dependency is the latest and, depending on what else you give in the command, replace the dependency version number with the latest.

To install the Node module you enter the following code into your terminal and let it fly off and install itself globally.

$ npm install npm-check-updates -g

After this is installed you would need to cd into the relevant project folder. If you then type:

$ npm-check-updates

You will be presented with what packages you have and then if there is an update for each one.

To update all of the dependencies within that package.json you would enter:

$ npm-check-updates -u

To only see if certain dependencies are out-dated (for example, gulp-sass) and have newer versions you would use something like:

$ npm-check-updates -f gulp-sass 

So, this is great. The Node module helps me quickly check to see if the dependencies are up-to-date and (if I choose to) update them (all) if required.

This is only half way there though. I have already got a folder of Node modules. So I need to override what is there already now that I have an updated package.json.

Back to day 0

I decided the easiest way to do this was to delete the folder completely and re-install the dependencies. As we are in terminal, we can do it all from the command line too. Making sure we are in the correct project folder we would simply write:

$ rm -fr node_modules

Which would make sure (-f, force) we remove all of the files and folders (-r, recursively) in one go (-fr). After that has happened we will then need to re-install all of the depenencies again:

$ npm install

Now we have got a an up-to-date project, using the latest (chosen) gulp dependencies for our awesome website making. Automating this as much as possible to a few lines of code for the command line helps speed up and maintain a working project. There should, of course, be a slight note of caution. Running npm-check-updates -u whilst quickly updating all the dependencies within your package.json could by doing so break things where and updated dependency has changed.