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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | 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' ]); });}; |
How and where do you define the WordPress coding standards?
The coding standards are tested by PHP CodeSniffer (phpcs), which is an external application. When you have phpcs up end running, you install the WordPress coding standards for CodeSniffer. Finally you install the grunt-phpcs package and use it in your grunt-file, like I did.
Thanks, The WordPress coding standards for CodeSniffer is what I was looking for!