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
260
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
56
The Open Metaverse - Reactivate London
shaunix
1
80
The Open Metaverse - Fullstack Bytes
shaunix
0
130
In Your Face : WebVR
shaunix
0
93
This is for Everyone
shaunix
0
670
A11Y & React : This is for Everyone
shaunix
1
180
Make Mine Meteor - Real Time Applications, Hyperspeed Time
shaunix
1
89
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
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
450
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
600
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
310
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
740
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Practical Orchestrator
shlominoach
190
11k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
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