Preface: This post assumes you’re fairly comfortable using the command line, or at least open to new things.
Node.js is a strange one. With so many applicable uses, it can often be misconstrued and pigeon-holed. What I hope to show you in this post, is how we can utilise Node.js in our front-end projects and not label them as “Node.js projects”.
As it can run on a server, it can also run on our development machines, just like the rest of the languages mentioned above. Again, what does this mean for us? Well, we can create & use tools that run on Node.js to aid our front-end workflow. Ace.
I thought these concepts would be better visualised by a screencast, but don’t worry, if you’re not a fan of screencasts, the same content continues below the video embed.
Node.js & npm
npm is Node.js’s package manager. Once you’ve downloaded Node.js from their website, you’ll automatically be able to use npm. Don’t believe me? Open up your command line (On Mac, this is Terminal.app) and type
npm -v and it should tell you what version of npm you’re running. For a more in-depth look at what a package manager is and does, check out this previous post.
If you’ve not already got a project on-the-go (by the way, you can 100% retrofit this workflow to an existing project), create a folder anywhere on your system, ie.
portfolio (you can do this in Finder, or with
Jump into that folder with
Next up, we’re going to generate a file in our project that’s read by Node.js (npm) when we tell it to run. If you type
npm init in the root of your project, we can begin generating the file. The prompt will present you with a series of questions, most of which are pre-filled with an educated guess at what the answer might be, so feel free to just keep hitting the
Enter key. It will finish off by asking if you’re happy with what it’s going to generate, just type
You’ll now notice a
package.json file has been created in your project and contains metadata about your project.
Lets create some dummy files and data to work with. Lets create an
index.html file which contains this content:
Now create two folders:
css. Leave the
css folder empty, but place an
app.scss file into the
sass folder with this content:
Ok, so we now have our first real requirement to compile this Sass into valid CSS to run in the browser.
If you’ve not got Sass installed, you can do this via instructions on the Sass website.
If you’re quite familiar with Sass, and you use the command line, at this point you’d probably just use this command:
sass --watch sass/app.scss:css/app.css
Which is 100% valid and gets the job done. However, we’re hoping to use npm as the glue which manages lots of different commands and tools running sequentially and when we need them to.
If we open up the “package.json” file up in an editor, you’ll notice the
scripts key in the config object. If you remove the existing line inside that object, take the Sass command from above and make it look like this:
We’ve now declared our first npm command; “watch-sass”. Which, if you type
npm run watch-sass on the command line, you should see output from the Sass compiler and it telling you that it’s written to
If you open up the file
css/app.css, it should now contain:
Following on from the concepts we employed above with the Sass, if you create another line in the
scripts object called “watch-js”, and put this:
You can now see that when we do
npm run watch-js, its going to kick off Watchify (sister package to Browserify used for watching files with intelligent caching). Ace.
We can now create ourselves a command for our development workflow:
Excellent. You’ll now see the output from both Sass & Watchify and also see it writing the new files when you change the source Sass or JS files.
npm install uglify-js -g (you may need to prefix this command with
sudo if it complains about folder permissions). This will make the package available on the command line, system-wide, so it’s project-agnostic.
If you create another line in our
scripts object like so:
When we run
If we now create a build CSS command, we’re almost done with our production workflow:
And then tying it all together with one command:
So now, we can type
npm run watch when we’re developing, and
npm run build when we need to deploy our project. How lovely.
Points (mindump of thoughts on this topic)