Go Node Without Code

Posted on Nov 20, 2012

You , like most everyone these days, have probably heard a lot about NodeJS. What you may have heard is how NodeJS allows you to create server-side applications using JavaScript. What you may not yet know, however, is that you can build command line utilities using Node that can run on whatever platforms Node runs on. In fact, there are a ton of CLI utilities already out there for Node. The point of this post is to cover a Node CLI utilities that you can use whether or not you are doing any server-side JavaScript development. So, admittedly, the title of this post is a bit misleading; these tools do require code, but not necessarily server-side JavaScript code.

UglifyJS
https://github.com/mishoo/UglifyJS

UglifyJS is a JavaScript code beautifier and compressor, among other things, that is available as a NPM module and can be installed simply by typing npm install uglify-js into the command line. Obviously, you will need to write JavaScript code for this tool to be useful, however it does not mean you are writing code intended to be run on a Node server.

If you are curious what UglifyJS will output, you can test it out via the browser at http://marijnhaverbeke.nl//uglifyjs. However, as you might expect, via the command line (as well as via its JavaScript API), UglifyJS has a plethora of options available.

Let's look at a simple example where I am using UglifyJS to clean up the simple JavaScript file used in a recent workshop I gave on building PhoneGap applications. First, I need to change directory to the location of the uglifyjs/bin folder within your Node modules directory. Next, I will run the following code which is only using a couple of options.

node uglifyjs -b -o C:\Users\brinaldi\Documents\projects\brinaldi-phonegap-workshop\step5\js\index-clean.js C:\Users\brinaldi\Documents\projects\brinaldi-phonegap-workshop\step5\js\index.js

The options I specified are "-b" which beautifies the code and "-o" which specifies the output file name (if you want it to simply overwrite your existing file, you can use "--overwrite", though that seems like a potentially bad idea).

Admittedly, this is a simple file (and could use some by hand cleanup). You can view the original file here and the final file here. The result is still readable (arguably more so) but also 52 lines shorter.

Grunt
https://github.com/gruntjs

Grunt is a build tool for JavaScript development built to simplify common tasks. The built-in tasks include the ability to 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) or start a static web server among others.
While many of the default templates are very much suited towards developing applications on a Node server, there is a jQuery template for building jQuery plugins as well as a default template that only includes just some basic files needed by Grunt.

Let's look at how to generate the jQuery plugin files. After, installing Grunt via NPM using the command npm install -g grunt, let's tell grunt to generate the jQuery template files. Navigate to the folder you would like the files generated into, and then enter the command grunt init:jquery. You will be asked several questions that Grunt needs in order to properly generate the files but, in the end, you should see results similar to below (I am on Windows).

Grunt

Now, you can edit your generated files and utilize other commands like grunt test or grunt lint. If you are ever lost, you can also always type grunt --help. (Note: after Grunt generates the files, it tries to read the grunt.js file in the directory for configuration settings. On Windows, this will try to open the file rather than run the command unless you type grunt.cmd rather than simply grunt).

For a more detailed tutorial on Grunt, check out http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/. If you like Grunt, you should also check out Yoeman, which, arguably, takes Grunt to another level. I don't cover it here because it doesn't currently run on Windows (though some have managed to get it working).

GruntIcon
https://github.com/filamentgroup/grunticon

GruntIcon, as the title suggests, actually depends on Grunt; it is, in fact, a Grunt task that will take SVG files for your web page icons, likely developed in Illustrator, and convert them to PNG files while alternately creating stylesheets with a CSS class references for each icon generated.

In order to test this out, as I had no SVG files of my own to convert, I simply downloaded the SVG files provided in the GruntIcon example and then placed them in the directory generated for the Grunt project in our discussion of Grunt under src/icons-source/. In the command line, I change directory to my Grunt project home and installed GruntIcon by entering npm install grunt-grunticon. GruntIcon also requires PhantomJS so I downloaded that (note: it needs to be executable via the command phantomjs on the command line so, on Windows, you either need to add it to your path or simply put the exe in the project folder).

Now we need to load GruntIcon as a task inside our grunt.js file by adding the following line (I added it right after the default task line near the end of the document; not sure if that is the best place but it worked).:

// Default task.
grunt.registerTask('default', 'lint qunit concat min');
grunt.loadNpmTasks('grunt-grunticon');

You also need to define the Grunt task for GruntIcon which simply needs the source folder and the output folder (I placed this after the empty uglify task):

uglify: {},
grunticon: {
   src: "src/icons-source/",
   dest: "src/icons-output/"
}

Now that our task is defined, I can run it from the command line via grunt grunticon (or grunt.cmd grunticon if you're on Windows). My output folder now contains a folder with PNG files and multiple CSS files as well as an example HTML file.

GruntIcon

JSHint
https://github.com/jshint/jshint

JSHint, like its slightly more famous counterpart JSLint, is a JavaScript code linter that can be used to detect possible problems with your code and to enforce code standards. Like JSLint, It is highly configurable either through inline comments in your JavaScript files or via a configuration file. Unlike JSLint, it is far less strict by default. If you would like to see the kind of output that http://jshint.com/. A number of text editors have plugins for JSHint already freely available (including Brackets which uses JSLint by default).

In order to use JSLint to check your code, you first need to install it via the command npm install jshint -g. In my example, I am checking the same JavaScript file from my PhoneGap sample files that I ran UglifyJS against earlier (keeping in mind, this is not a complex file). In my command line, I changed to my project's directory. I can run JSHint against an entire directory and it will report on every .js file it finds or I can specify a file. In this case, I simply specified JSHint to check the main .js file by typing the command jshint js/index.js where js/index.js is the file I want checked. You can see the results below, both before and after I fixed the reported issues.

jsHint

HTTPster
http://simbco.github.com/httpster/

As our final example, I will show HTTPster which allows you to 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 API's and features (like CORS for instance) do not run using the file:/// protocol in the browser. In these cases, being able to startup a local server instance, or even multiple ones on different ports, can be helpful.

In order to install HTTPster, simply enter the command npm install -g httpster. Now, all you need to do is change directory to the folder where you would like to startup the local server and enter httpster into the command line. By default the port is 3333 but if you want to specify a port, you can (for instance, if you want to run multiple servers in different folders at the same time). In the example below you can see I started up a server for my PhoneGap workshop example code (yes, again).

httpster

Where to Go From Here
I'd wanted to cover a number of other interesting command line utilities as there are many. For example, Bunyip for client-side unit testing (for a good tutorial on this, see http://javascriptplayground.com/blog/2012/09/cross-browser-testing-with-bunyip), nGist allows you to create gists (though it wouldn't authenticate for me), Underscore-CLI is designed for parsing and manipulating JSON data (though I couldn't get it working properly), and Dox for generating documentation.

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

Comments

Lakshan Punch (http://laktek.github.com/punch) also belongs in this category. It lets you to generate/publish a website from command-line itself. But of course, you need to write the code (as in HTML/CSS, JS).

Use of Node, as a language for CLI is often overlooked. But I find its file and process module APIs works great for such tasks.

Posted By Lakshan / Posted on 11/23/2012 at 12:19 PM


the band I just came across your blog and reading your beautiful words. I thought I would leave my first comment but I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. <a href="http://viewitonline.net">watch orange is the new black</a> .

Posted By the band / Posted on 11/22/2013 at 5:10 PM


Write your comment



(it will not be displayed)







About

My name is Brian Rinaldi and I am the Web Community Manager for Flash Platform at Adobe. I am a regular blogger, speaker and author. I also founded RIA Unleashed conference in Boston. The views expressed on this site are my own & not those of my employer.