D'oh! Avoid annoyances with Grunt.

d’oh! with gruntavoid annoyances

Paul Schreiber

✔ code change

✔ code change✔ syntax check

✔ code change✔ syntax check✔ lint

✔ code change✔ syntax check✔ lint✔ minify

✔ code change✔ syntax check✔ lint✔ minify✔ concatenate

installing grunt

using grunt

gotchas

installing grunt

using grunt

gotchas

installing grunt

install node

install grunt

install in project

nodejs.org/download

sudo%npm%install%-g%grunt-cli

sudo%gem%install%compass

sudo%pear%install%PHP_CodeSniffer

npm%install

Gruntfile.js package.json assets/ css/ js/ header.php footer.php ...

js/ src/ vendor/ foo.src.js foo.min.js

css/ sass/ foo.src.scss foo.src.css foo.min.css

installing grunt

using grunt

gotchas

$ grunt

$ grunt watch

$ grunt task_name

Syntax Check Linter Minify Concat

PHP php -l phpcs —

CSS compass cssmin

JS jshint uglify concat

commitchange

grunt commitchange

commit CSS/JSgrunt commitchange

using grunt

gotchas

installing grunt

$ git diff

$ git diff✗ banner

diff --cc assets/js/admin.src.jsindex 85018e9,ff5fdc7..0000000--- a/assets/js/admin.src.js+++ b/assets/js/admin.src.js@@@ -1,4 -1,4 +1,4 @@@ -/*! FiveThirtyEight - v0.1.0 - 2014-11-21 -/*! FiveThirtyEight - v0.1.0 - 2014-12-05++/*! FiveThirtyEight - v0.1.0 - 2014-12-09 * * Copyright (c) 2014; * Licensed GPLv2+ */ (function (window, $, fteContributors) {

$ git checkout assets/src/admin.src.js

$ git merge

$ git merge✗ minified files

Auto-merging assets/js/admin.src.css CONFLICT (content): Merge conflict in assets/js/admin.src.css Auto-merging assets/js/admin.min.css CONFLICT (content): Merge conflict in assets/js/admin.min.css Automatic merge failed; fix conflicts and then commit the result.

$ rm assets/js/admin.*.css $ grunt css $ git commit -a

$ gem update

$ gem update✗ CSS

diff --git a/assets/css/burrito.src.css b/assets/css/burrito.src.cssindex c87230e..748cd49 100644--- a/assets/css/burrito.src.css+++ b/assets/css/burrito.src.css@@ -104,14 +104,14 @@ iframe[scrolling="no"] { overflow: hidden; }-#table-view table tbody.orange tr:first-child td { background: -moz-linear-gradient(top, #ffffff 95%, rgba(255, 110, 39, 0+#table-view table tbody.orange tr:first-child td { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBl

$ git commit