Node.js command-line tools for front-end development

You may already know that Node.js enables you to create server-side applications using JavaScript. While this is a powerful and compelling capability, perhaps you aren’t a server-side developer or you aren’t yet ready to commit to server-side development using JavaScript. You may not yet be aware, however, that Node.js has also become the platform behind a growing number of command-line utilities that can run on all platforms on which Node runs and that are incredibly useful for front-end developers, regardless of their need for, or interest in, server-side JavaScript. In fact, there are a ton of command-line interface (CLI) utilities already out there for Node. In this article I discuss five Node CLI utilities that can help improve your front-end development workflow.

UglifyJS is a JavaScript code beautifier and compressor, among other things, that is available as a node package manager (NPM) module. Assuming you have Node.js installed, UglifyJS can be installed simply by typing npm install uglify-js at the command line. Obviously, you will need to write JavaScript code for this tool to be useful; however you do not need to be writing code intended for a Node server.

If you are curious about what UglifyJS will generate as output, you can test it out via the browser. UglifyJS has many more options available via the command line as well as via its JavaScript API.

After you've installed UglifyJS with npm, you can use the following steps to try it out by executing the following command:

For example, I executed:

The -b option beautifies the code and the -o option is used to specify the output file name. (If you want it to simply overwrite your existing file, you can use --overwrite, though to me that seems like a potentially bad idea.)

The original version of the file I used is a simple JavaScript file from a sample jQuery Mobile PhoneGap application and is available at http://pastebin.com/9skqS8VL and the result file is at http://pastebin.com/WRXXeL1a.

Admittedly, this is a simple file (and it could use some manual cleanup) but the resulting file is 52 lines shorter and arguably more readable than the original.

Grunt is a build tool for JavaScript development that simplifies several common tasks. It can generate project scaffolding based on a number of predefined but configurable templates, run tests (using QUnit and PhantomJS), lint files (using JSHint), minify files (using UglifyJS), and start a static web server, among other tasks.

While many of the default templates are very much geared towards developing applications on a Node server, there is a jQuery template for building jQuery plugins as well as a default template that includes just basic files needed by Grunt. In addition, there are numerous community contributed Grunt plugins to handle a huge list of tasks.

To see how it works, you can use the following steps to generate the jQuery plugin files:

1. Install Grunt via NPM using the following command:

2. Navigate to the folder you want to hold the files, and then execute the following command:

3. Provide answers to the quests that Grunt asks. It needs these answers before it can properly generate the files.

Grunt will then generate your files based on the responses you provided (see Figure 1).

You can now edit your generated files and configure and use other commands like grunt test or grunt lint. You can get help with grunt --help.

Note: After you've generated files via Grunt, on subsequent runs Grunt will try to read the grunt.js file in the directory for configuration settings. On Windows, you'll need to type grunt.cmd to run the command rather than simply grunt, which will invoke grunt.js in order to prevent Windows from trying to open the js file.

For a more detailed tutorial on Grunt, check out the Meet Grunt: The Build Tool for JavaScript  tutorial from Nettuts+. If you like Grunt, you should also check out Yeoman, which is similar to Grunt but includes a number of additional features. I haven't covered Yeoman in detail here because it doesn't currently support Windows.

GruntIcon, which depends on Grunt, is a Grunt task that converts SVG files for your web page icons (including those developed in Illustrator) into PNG files while also creating stylesheets with a CSS class references for each icon generated.

To test this out, you can use the SVG files provided in the GruntIcon example source.

1. Download the project zip or check it out of GitHub.
2. Copy the SVG icon files to a new directory you create called src/icons-source/ within the Grunt project from the previous section.
3. Change to your Grunt project's home directory and install GruntIcon by executing the following command:

4. GruntIcon requires PhantomJS, so download and install that as well. PhantomJS needs to be executable via the command phantomjs at the command line. To enable this on Windows, you either need to add it to your path or, for a quick and dirty solution, simply put the phantomjs.exe file in the project folder.
5. Edit grunt.js. Load GruntIcon as a task inside your grunt.js file by adding the following line (I added it right after the default task line near the end of the document):

6. Next you need to define the Grunt task for GruntIcon, by simply supplying the source folder and the output folder (I placed this after the empty uglify task, adding a comma following uglify: {}):

7. Now that our task is defined, you can run it from the command line:

If you're on Windows use:

The output folder now contains a folder with PNG files and multiple CSS files as well as an example HTML file that displays all the generated icons (see Figure 2).

JSHint, like its well-known counterpart JSLint, is a JavaScript code linter that can be used to detect possible problems with your code and to enforce code standards. Also like JSLint, it is highly configurable either through inline comments in your JavaScript files or via a configuration file. It is, however, far less strict than JSLint by default. To see the kind of output that it provides, you can use the web-based version of JSHint. Several text editors have freely available plugins for JSHint, including Brackets, which uses JSLint by default.

Follow these steps to use JSHint to check the main.js JavaScript file from the previous UglifyJS example (keep in mind, this is not a complex file):

1. Install JSHint via the command line:

2. Change to the project's directory via the command line.
3. Execute the following command:

For example, I executed the following:

Note that you can also use JSHint to check an entire directory and it will report on every .js file it finds.

4. Examine the output for potential problems in your JavaScript code (see Figure 3).

With node-static you can quickly and easily start up a local web server in any directory on your machine. Sometimes, when developing and testing your applications, you need to use a web server. For instance, certain HTML5 APIs and features (for example, CORS) do not run using the file:/// protocol in the browser. In these cases, being able to start a local server instance, or even multiple instances on different ports, can be helpful.

Follow these steps to get started:

1. To install node-static, execute the following command:

2. Via the command line, navigate to the folder in which you would like to start up the local server.
3. Execute the following command:

By default the port is 8080 (see Figure 4). You can specify a different port, which is needed if you want to run multiple servers in different folders at the same time. You can also specify cache settings and headers.

This article has covered only a handful of the many Node command-line utilities available. You may also want to explore bunyip for client-side unit testing (for a good tutorial on this, see Cross Browser Testing with bunyip by Jack Franklin), Underscore-CLI for parsing and manipulating JSON data, and Dox for generating documentation.

If you are curious about additional Node CLI tools, you can view the current list of all Node modules, Smashing Magazine's comprehensive list of Node resources, and Nodejitsu's short list of Node CLI applications.