Coding workflows: why Grunt changes our way of working

A couple of months ago, I’ve heard the first time about Grunt. I wasn’t that impressed. It seemed to be like a more advanced CodeKit, which was compiling my SASS and JS at the time. So I forgot about it, proving once again, that I just not am an early bird :/ Of course the buzz got too big for being ignored and now I am all into Grunt, Yeoman and even Gulp as everyone else.

Using Grunt for some time now, I’m beginning to realize that it not only improved my workflow, but changed it. So this article is not about learning Grunt, there already are some of them out there. It is about why I think Grunt, or more generally task managers like Grunt will really make a difference in how web-developers do their work.

A plattform independend foundation

But first some basics. One of the most important things about Grunt is that it is based on node.js and really runs platform independent. Also with node.js comes its community, producing an impressive amount of functionality. All the node modules they are developing, from 100% javascripted ssh-clients to complete test frameworks, can be used with Grunt.

Then there is npm, the node.js package manager. It lets you easily define all dependencies on a project bases. If you have to use the compass mixin library in one project and want to use bourbon in another, one line in your projects packages.js and a npm install fixes it.

Last but not least the node.js world is all javascript. That is so important because all web-developers, despite their back-end programming language preferences, know javascript. For a web-developer there are basically no hurdles to getting started with Grunt.

All in all node.js is a stable, well used and tested development foundation, with a living community and a huge amount of functionality packed in modules ready to download. Everything you need for your development workflow is already there. Grunt just helps you to bundle it all together.

Coding workflows

So, why is this such a big change? Before Grunt I already had a workflow. Or a kind of workflow that stayed pretty much the same for every project I was working on, but not entirely the same. This workflow even had multiple phases, like development, testing, bug-fixing and deployment and everyone of them had different tasks. To remember all these at the right time can be impossible sometimes. I don’t know how many times I’ve forgotten to merge and compress CSS for deployment or to do a last coding standards check.

Grunt is helping with these tasks, by just letting you write them down and executing them automatically when you need them. That’s what a task-manager should do. But Grunt, and that’s my point, is doing something more. It doesn’t only automates the tasks you have done before, it makes you build, rethink and structure them consciously. You have to think about what your workflow should look like in the beginning of a project and you have to refactore your workflow as the project evolves.

What I mean is: with Grunt we have begun to code our coding workflows. Just as we code our tests when we do unit testing. You might think thats no big deal, nothing a couple of bash-scripts doesn’t solve. I agree, technically it is nothing revolutionary. Yet, I think Grunt will change a lot for web-developers, because it is so well suited for sharing.

Sharing and evolving workflows

A Google search on gist “gruntfile.js” returns more than 5000 hits. So it seems that we are not just coding workflows with Grunt, we’ve even started to share them. I’m convinced thats because of the facts about node.js I’ve named before and that every web-developer is able write some javascript tasks in no time. That is the good thing with coding workflows. We are so incredibly good at improving our code. We already have a huge community, doing nothing else than improving code all the time. So, now our workflows have become formalized code, we can improve them the same way. We can share them on Github, ask about them on Stackoverflow, discussing them in our blogs or compare them to others workflows.

So I think, over time, this will change a lot about how web-developers work. That said, the perfect finish to this article seems to be my own gruntfile.js, defining my current WordPress theme workflow:

module.exports = function(grunt) {

	grunt.initConfig({

		pkg: grunt.file.readJSON('package.json'),

		// chech our JS
		jshint: {
			options: {
				"bitwise": true,
				"browser": true,
				"curly": true,
				"eqeqeq": true,
				"eqnull": true,
				"esnext": true,
				"immed": true,
				"jquery": true,
				"latedef": true,
				"newcap": true,
				"noarg": true,
				"node": true,
				"strict": false,
				"trailing": true,
				"undef": true,
				"globals": {
					"jQuery": true,
					"alert": true
				}
			},
			all: [
				'gruntfile.js',
				'../js/scripts.js'
			]
		},

		// concat and minify our JS
		uglify: {
			dist: {
				files: {
					'../js/scripts.min.js': [
						'../js/scripts.js'
					]
				}
			}
		},

		// compile your sass
		sass: {
			dev: {
				options: {
					style: 'expanded'
				},
				src: ['../scss/style.scss'],
				dest: '../style.css'
			},
			prod: {
				options: {
					style: 'compressed'
				},
				src: ['../scss/style.scss'],
				dest: '../style.css'
			},
			editorstyles: {
				options: {
					style: 'expanded'
				},
				src: ['../scss/wp-editor-style.scss'],
				dest: '../css/wp-editor-style.css'
			}
		},

		// watch for changes
		watch: {
			scss: {
				files: ['../scss/**/*.scss'],
				tasks: [
					'sass:dev',
					'sass:editorstyles',
					'notify:scss'
				]
			},
			js: {
				files: [
					'<%= jshintTag %>'
				],
				tasks: [
					'jshint',
					'uglify',
					'notify:js'
				]
			}
		},

		// check your php
		phpcs: {
			application: {
				dir: '../*.php'
			},
			options: {
				bin: '/usr/bin/phpcs'
			}
		},

		// notify cross-OS
		notify: {
			scss: {
				options: {
					title: 'Grunt, grunt!',
					message: 'SCSS is all gravy'
				}
			},
			js: {
				options: {
					title: 'Grunt, grunt!',
					message: 'JS is all good'
				}
			},
			dist: {
				options: {
					title: 'Grunt, grunt!',
					message: 'Theme ready for production'
				}
			}
		},

		clean: {
			dist: {
				src: ['../dist'],
				options: {
					force: true
				}
			}
		},

		copyto: {
			dist: {
				files: [
					{cwd: '../', src: ['**/*'], dest: '../dist/'}
				],
				options: {
					ignore: [
						'../dist{,/**/*}',
						'../doc{,/**/*}',
						'../grunt{,/**/*}',
						'../scss{,/**/*}'
					]
				}
			}
		}
	});

	// Load NPM's via matchdep
	require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

	// Development task
	grunt.registerTask('default', [
		'jshint',
		'uglify',
		'sass:dev',
		'sass:editorstyles'
	]);

	// Production task
	grunt.registerTask('dist', function() {
		grunt.task.run([
			'jshint',
			'uglify',
			'sass:prod',
			'sass:editorstyles',
			'clean:dist',
			'copyto:dist',
			'notify:dist'
		]);
	});
};