Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Grunt your way to Glory - SideView 2013
Search
Shaun D
November 09, 2013
Technology
3
250
Grunt your way to Glory - SideView 2013
Presentation from SideView 2013 - Grunt you way to Glory
Shaun D
November 09, 2013
Tweet
Share
More Decks by Shaun D
See All by Shaun D
The Open Metaverse - Front End Kent
shaunix
0
54
The Open Metaverse - Reactivate London
shaunix
1
80
The Open Metaverse - Fullstack Bytes
shaunix
0
130
In Your Face : WebVR
shaunix
0
92
This is for Everyone
shaunix
0
660
A11Y & React : This is for Everyone
shaunix
1
180
Make Mine Meteor - Real Time Applications, Hyperspeed Time
shaunix
1
88
Grunt your way to Glory : LDNJS - 15th July 2013
shaunix
3
170
Grunt you way to Glory : LNUG MAY
shaunix
4
320
Other Decks in Technology
See All in Technology
5min GuardDuty Extended Threat Detection EKS
takakuni
0
130
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
140
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
190
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
250
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
410
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Designing for humans not robots
tammielis
253
25k
Code Reviewing Like a Champion
maltzj
524
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
GraphQLとの向き合い方2022年版
quramy
47
14k
Automating Front-end Workflow
addyosmani
1370
200k
Statistics for Hackers
jakevdp
799
220k
Become a Pro
speakerdeck
PRO
28
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fireside Chat
paigeccino
37
3.5k
Site-Speed That Sticks
csswizardry
10
660
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
GRUNT YOUR GRUNT YOUR WAY TO GLORY WAY TO GLORY
or:how to stop doing things manually and learn to love automation
Automation isn’t about being lazy. It’s about being efficient. -
Addy Osmani
ENSIGN DEV
UGLYFY&MINFY COMPILE&CONCAT COMPRESS&OPTIMISE IMAGES LINT JS BLESS CSS GENERATE DOCUMENTATION
STICK IT IN BUILD ZIP IT&UPLOAD IT TO S3
#!/bin/sh
MAKE RAKE CAKE JAKE
MAKE RAKE CAKE JAKE
MAKE RAKE CAKE JAKE
@paul_irish
None
<target name="jshint">! <apply dir="${dir.source}/${dir.js}" executable="java" parallel="false" failonerror="true">! <fileset dir="./${dir.source}/">! <include
name="**/${dir.js}/*.js"/>! <exclude name="**/*.min.js"/>! <exclude name="${dir.intermediate}/**/*.js"/>! <exclude name="**/${dir.js.libs}/"/>! <exclude name="**/${dir.publish}/"/>! </fileset>! <arg value="-jar" />! <arg path="./${dir.build.tools}/${tool.rhino}" />! <arg path="./${dir.build.tools}/${tool.jshint}" />! <srcfile/>! <arg value="${tool.jshint.opts}" />! </apply>! <echo>JSHint Successful</echo>! </target>!
<target name="jshint">! <apply dir="${dir.source}/${dir.js}" executable="java" parallel="false" failonerror="true">! <fileset dir="./${dir.source}/">! <include
name="**/${dir.js}/*.js"/>! <exclude name="**/*.min.js"/>! <exclude name="${dir.intermediate}/**/*.js"/>! <exclude name="**/${dir.js.libs}/"/>! <exclude name="**/${dir.publish}/"/>! </fileset>! <arg value="-jar" />! <arg path="./${dir.build.tools}/${tool.rhino}" />! <arg path="./${dir.build.tools}/${tool.jshint}" />! <srcfile/>! <arg value="${tool.jshint.opts}" />! </apply>! <echo>JSHint Successful</echo>! </target>!
CODEKIT PREPROS HAMMERforMAC LIVERELOAD MIXTURE £ £ £ £ free
None
None
None
None
{! "name": "new-project",! "version": "0.0.1" }
{! "name": "new-project",! "version": "0.0.1" }
"devDependencies": {! "grunt": "~0.4.1"! } , {! "name": "new-project",! "version":
"0.0.1" ! }
Shell functions. Make it so! .bashrc / .zshrc function gi(){!
! npm install --save-dev grunt-"$@"! }! ! function gci(){! ! npm install --save-dev grunt-contrib-"$@"! }!
None
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { );
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! }
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } {! "bitwise": true,! "camelcase": true,! "curly": true,! "eqeqeq": true,! "forin": true,! "immed": true,! "indent": 4,! "browser": true,! "jquery": true,! "white": false! }
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } {! "bitwise": true,! "camelcase": true,! "curly": true,! "eqeqeq": true,! "forin": true,! "immed": true,! "indent": 4,! "browser": true,! "jquery": true,! "white": false! } , ['jshint'] task name task list
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } , ['jshint' ] grunt.loadNpmTasks('grunt-contrib-uglify'); uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , ,'uglify'
}; grunt }); module grunt jshint options all } grunt
uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , var pkg = grunt.file.readJSON('package.json'); var scripts = ['assets/**/*.js', '!**/*.min.js'] grunt.registerTask('default' ); , ['jshint' ] ,'uglify'
Globbing! Make it so! var scripts = ['assets/**/*.js', '!**/*.min.js'] all
.js files INC sub directories ! negates the pattern match more : https://github.com/cowboy/node-globule
}; grunt }); module grunt.loadNpmTasks('grunt-contrib-jshint'); jshint options all } grunt.loadNpmTasks('grunt-contrib-uglify');
uglify options dist }, ! } , grunt.registerTask('default' ); , ['jshint' ] ,'uglify'
matchdep. Make it so! require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
}; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); jshint:
{! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } , ['jshint'] uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
None
configGrunt = function (grunt) { ! ! var taskConfig =
{! /* ALL THE GRUNT TASK CONFIGURATION */! }! ! grunt.initConfig(taskConfig);! ! grunt.registerTask('default', ['jshint', 'uglify', 'concat']});! grunt.registerTask('build', ['jshint', 'uglify', 'concat', 'S3', 'groc']});! ! }! ! module.exports = configGrunt;
YOU’RE GONNA SEE SOME SERIOUS S**T
50,000 +
1000+
None
+
Sass LESS CoffeeScript TypeScript Jade markdown
None
None
None
None
None
npm install -g grunt-init git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin grunt-init TEMPLATENAME
None
None
None
None
CONFIG {or} SCRIPT CONSISTENT COMMUNITY POWERFUL
USE <3 AUTOMATION PEEK @ GRUNTFILES CONTRIBUTE
niceagency.co.uk
SHAUN DUNNE SHAUN DUNNE @shaundunne || +shaundunne || github.com/shaundune www.shaundunne.com