Go Node Without Code
Posted on Nov 20, 2012
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.
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).
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).
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');
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):
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.
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).
Where to Go From Here
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.
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
Posted By sohbet odalari / Posted on 12/20/2012 at 4:15 PM