#grunt.js

Grunt is nothing but a neat way to package tasks which are added as plugins. Essentially grunt has no value without the plugins that its community has generated. With these grunt is wonderful.

So with that here is a whirlwind intro to some of the grunt tasks I have made use of.

Concatenation contrib-concat

With this plugin you can automatically gather JavaScript/CSS saved in several locations and combine them to one file. This is best practise for performance by reducing HTTP request and speeding page load time. 

Minification contrib-uglify, css-min

There are plugins to minify JS, CSS and HTML. This decreases the sizes of assets by removing comments, white space and several other things that human readers find very useful. This reduced size of files to be served is also helpful in speeding up a page load time.

Watch contrib-watch

Automate the automated tasks, this task watches for changes to files, upon which it will run other grunt tasks. Save any changes in your js files and a new minified version will be ready almost instantaneously

Linting jslint 

Existing for JavaScript and CSS these task will check the quality of code you are writing, The value of jslint at catching mistakes is really huge.

Some More interesting task

The above are a powerful toolkit on there own, this next selection are more for the  curious

load-grunt-tasks

Efficiency or Laziness, whichever it is, it becomes contagious once grunt is running. This task saves you from having to individually add every grunt plugin to your grunt file. And will instead load every node package that is prefixed with 'grunt-'

time-grunt

This will record the time that each task takes to run. If a task is build of several tasks it will tell you the percentage time on each. So far this is more interesting than useful. It might provide early warning if you are minifying lots of images that you have too many as the time creeps up.

grunt-newer

This task provides can prefix any other task and will only run that task again if the files it is acting upon have changed since the last time the task was run. A useful way of speeding things up.

localtunnel-me

Not a grunt task but a great addition to the development workflow. Previously I was pushing a version of my project to heroku to show it to other people. This meant that my project was littered with commits such as 'test this new thing on phone'. Now this is all replaced with localtunnel. Grunt has several plugins that allow you to spin up a server with your project. with local tunnel you can take a locally running server and with no knowledge of how make it available the world over with one command

$ lt --port 8000

Well I have started looking again and I have changed my mind drastically. I decided I needed to look again after watch this excellent talk from Paul Irish. Yeoman fulfils one role fantastically and that role is as a demonstrator. When pushing yourself to learn new techniques I find myself looking at a lot of other peoples code. This is great but most of the time you find yourself looking at a finished product. This means that the implementation details such as build steps are hidden around all the actual code. Trying to learn about simple grunt tasks by looking at the JQuery repository will feel overwhelming. Even though you might be aware that you should only need to look through their grunt file you are never sure if something they are running in the gruntfile is dependent on a particular structure elsewhere in the repo. This is were Yeoman steps in, Yeoman's scaffolds are all the unglamorous bits of a project with all the excitement of the application stripped away.

Being a scaffolding system it is opinionated, many of the individual scaffolds are not overly flexible. Being a relative newcomer however studying these scaffolds has ended up me arriving at the realisation that the workflows promoted in these proto applications are superior to what I was managing on my own. I now make frequent use of Yeomans webapp scaffold.

Getting started with yeoman.

Read about grunt, bower, node & npm. You don't need a deep understanding of any one of these. However understanding what each is for can be useful when working out how the whole thing fits together. 

With that out of the way lets get started. Assuming that npm is up and running yeoman is installed using

npm install -g yo

yo then becomes a global command. Running yo brings up a helpful list of options which will walk you through things like finding and installing a generator (project template) as well as building a new project from a template.

All yeoman generators are separate packages and can be installed directly with npm. To install the webapp generator and use it.

npm install -g generator-webapp

mkdir newProject

cd newProject

yo webapp

Next steps

Open the project and have a look around. Even if you never use a generator in one of your own projects you will learn a lot.

Some other scaffolds I have found interesting

Socketio

Zf5

mobile

gulp-webapp