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 vestel klima servisi / Posted on 09/06/2013 at 8:51 AM
Hi there would you mind sharing which blog platform you’re using? I’m planning to start my own blog in the near future but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something unique. P.S My apologies for being off-topic but I had to ask!
Posted By demirdöküm kombi servisi / Posted on 09/13/2013 at 11:45 AM
Posted By vaillant kombi servisi / Posted on 09/13/2013 at 11:46 AM
Nice blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Bless you
Posted By ferroli kombi servisi / Posted on 09/13/2013 at 11:46 AM
I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to design my own blog and would like to find out where u got this from. thanks a lot
Posted By arçelik klima servisi / Posted on 09/13/2013 at 11:49 AM
Hello! This is my 1st comment here so I just wanted to give a quick shout out and say I really enjoy reading your blog posts. Can you recommend any other blogs/websites/forums that deal with the same topics? Appreciate it!
Posted By klima servisi / Posted on 09/13/2013 at 11:50 AM
Hello just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with internet browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the issue solved soon.
Posted By klima servisi / Posted on 09/13/2013 at 11:52 AM
I do trust all the concepts you have presented in your post. They’re really convincing and can definitely work. Nonetheless, the posts are too short for starters. May you please lengthen them a little from next time? Thanks for the post.
Posted By baykan kombi servisi / Posted on 09/13/2013 at 11:53 AM
Posted By eca kombi servisi / Posted on 09/13/2013 at 11:53 AM
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..
Posted By demirdöküm kombi servisi / Posted on 11/06/2013 at 4:38 AM
Posted By jual mukena bordir cantik / Posted on 11/08/2013 at 4:48 AM
Posted By obat darah tinggi dan stroke / Posted on 11/08/2013 at 4:49 AM
Posted By herbal penurun darah tinggi / Posted on 11/08/2013 at 4:50 AM
Posted By mukena katun murah / Posted on 11/08/2013 at 12:29 PM
Posted By herbal hipertensi / Posted on 11/08/2013 at 12:30 PM
Posted By obat tradisional darah tinggi yang mujarab / Posted on 11/08/2013 at 12:31 PM
Posted By click here / Posted on 11/08/2013 at 12:34 PM
Posted By aksesoris motor murah / Posted on 11/08/2013 at 12:35 PM
Posted By vaillant kombi servisi / Posted on 11/09/2013 at 3:24 PM
What youre saying is completely trues.
Posted By ginger brooks900 / Posted on 11/14/2013 at 9:16 PM
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
Posted By mynet chat / Posted on 12/04/2013 at 11:02 AM