Today I Learned How to Add Build Shortcuts to npm

Hello Internet!

This is yet another attempt of mine to revive my blog and revive my coding spirit. It’s amazing how much work can drain your motivation to do any coding in your spare time. So my plan is this: every day or perhaps every other day (we’ll see how committed I’ll be), I plan to write about at least one thing I learned today. Most of them will be simple and very short posts which about things that 99% of developers already know and I am in that 1% who doesn’t. I am also very easily amused by such things.😆.

Adding Shortcuts to npm with package.json

Often times, when I am developing a Javascript project and using node modules, I’ll find myself constantly typing out the same of the commands to run the project. For instance:

git clean -fd
git reset --hard
git pull
node_modules/.bin/webpack

One quick solution is to make a BASH script to run these. While I’d normally stop there, it seems that the standard (at least for JS developers) is to go one step further and add it to the scripts section of the package.json. Also, this is beneficial since when other developers join the project, they have a standard place for finding build tasks. I am still looking into gulp and grunt but those seem quite heavy-weight compared to this.

Ok so let’s start. So our cleanbuild.sh file will look like this:

#!/bin/bash

git clean -fd
git reset --hard
git pull
node_modules/.bin/webpack

Then to make the script executable and then run it, we’re going to do

chmod u+x cleanbuild.sh
./cleanbuild.sh

and then we’re going to put the above as a build shortcut in our package.json

...
"scripts": {
"cleanbuild": "chmod u+x cleanbuild.sh; ./cleanbuild.sh"
},
...

and finally you can now do

npm run cleanbuild

which will run the above commands.

Pretty simple, right?

If this helps you, share it. If you disagree with it or have suggestions, let me know in the non-existent comments section below! (Open a github issue here for now lol: https://github.com/SyedWasiHaider/blog/tree/gh-pages/)

Credit

I recently found this awesome tutorial/guide to get started with webdev: webpack_react. I may have shamelessly copied some snippets from one of the tutorials. 😁