This document discusses using Grunt to automate repetitive tasks like syntax checking, linting, minifying, and concatenating files. It provides instructions on installing Grunt and Node.js, configuring a Gruntfile, integrating Grunt with common frontend tasks for CSS, JavaScript, and PHP. It also covers using Grunt with version control and resolving common issues that can come up with merging branches and updated dependencies.

1. d’oh!
with grunt avoid annoyances

2. Paul Schreiber

9. ✔ code change

10. ✔ code change
✔ syntax check

11. ✔ code change
✔ syntax check
✔ lint

12. ✔ code change
✔ syntax check
✔ lint
✔ minify

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

15. installing grunt
using grunt
gotchas

16. installing grunt
using grunt
gotchas

17. installing grunt
install node
install grunt
install in project

18. nodejs.org/download

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

20. sudo%gem%install%compass

21. sudo%pear%install%PHP_CodeSniffer

22. npm%install

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

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

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

26. installing grunt
using grunt
gotchas

27. $ grunt

28. $ grunt watch

29. $ grunt task_name

31. Syntax
Check Linter Minify Concat
PHP php -l phpcs —
CSS compass cssmin
JS jshint uglify concat

32. change commit

33. change grunt commit

34. change grunt commit CSS/JS commit

35. installing grunt
using grunt
gotchas

37. $ git diff

38. $ git diff
✗ banner

39. diff --cc assets/js/admin.src.js
index 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) {

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

41. $ git merge

42. $ git merge
✗ minified files

43. 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.

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

45. $ gem update

46. $ gem update
✗ CSS

47. diff --git a/assets/css/burrito.src.css b/assets/css/
burrito.src.css
index 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

48. $ git commit