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
Re-Flow : Grunt your way to Glory
Search
Shaun D
May 08, 2013
Technology
3
150
Re-Flow : Grunt your way to Glory
A brief introduction to the world of using Grunt.js and loving automation.
Shaun D
May 08, 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 - SideView 2013
shaunix
3
250
Grunt your way to Glory : LDNJS - 15th July 2013
shaunix
3
170
Other Decks in Technology
See All in Technology
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
160
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
Postman AI エージェントビルダー最新情報
nagix
0
110
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
460
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
270
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Why Our Code Smells
bkeepers
PRO
337
57k
GraphQLとの向き合い方2022年版
quramy
48
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
For a Future-Friendly Web
brad_frost
179
9.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
RE-FLOW! Grunt your way to Glory Shaun Dunne - @shaundunne
- www.shaundunne.com
None
Re-Flow : GYWTG WHAT IS GRUNT ? A JAVASCRIPT TASK
RUNNER
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
<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> Re-Flow : GYWTG WHAT IS GRUNT ?
<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> Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports
= function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports
= function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHO USES GRUNT ? HTML5 ˒ BOILERPLATE
Re-Flow : GYWTG INSTALL & START USING GRUNT npm install
-g grunt grunt-cli
Re-Flow : GYWTG INSTALL & START USING GRUNT npm install
-g grunt grunt-cli + TWO FILES package.json Gruntfile.js
Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies":
{ } }
Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies":
{ } } npm install grunt --save-dev
Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies":
{ } } npm install grunt --save-dev { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0” } }
Re-Flow : GYWTG package.json npm install grunt-contrib-jshint --save-dev
Re-Flow : GYWTG package.json npm install grunt-contrib-jshint --save-dev { "name":
"project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3" } }
Re-Flow : GYWTG package.json npm install grunt-contrib-jshint --save-dev { "name":
"project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3" } } npm install
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); );
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint');
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG Gruntfile.js
Re-Flow : GYWTG Tasks ++ npm install grunt-contrib-uglify --save-dev
Re-Flow : GYWTG Tasks ++ npm install grunt-contrib-uglify --save-dev {
"name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3", “grunt-contrib-uglify”: “~0.1.2” } }
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } }
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG Tasks ++ }
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin');
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt imgmin
Re-Flow : GYWTG MOAR? }
Re-Flow : GYWTG back to package.json } grunt.initConfig({ ! !
pkg: grunt.file.readJSON("package.json"), //other stuff })
Re-Flow : GYWTG back to package.json } grunt.initConfig({ ! !
pkg: grunt.file.readJSON("package.json"), //other stuff }) Update once version control files: { "build/project-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
Re-Flow : GYWTG back to package.json } files: { "build/<%
pkg.name %>-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
Re-Flow : GYWTG banners } options: { banner:"/*! <% pkg.name
%> v<%= pkg.version %> | " + ! ! "<%= grunt.template.today(“yyyy-mm-dd”) %> | " + ! ! ! "*/" }
Re-Flow : GYWTG remove logging } removeLogging:{ dist: { src:
'assets/javascripts/main.js', dest: 'assets/javascripts/main.js' } }
Re-Flow : GYWTG baking } <!--(bake ../includes/head.html)--> <!--(bake ../modules/banner.html)--> <section
id="wrapper" class="layout-container width-100"> <!--(bake ../modules/cookieTrail.html)--> <!--(bake ../modules/plainBanner.html)--> </section> <!--(bake ../includes/footer.html)-->
Re-Flow : GYWTG Sassy goodness } compass: { dist: {
options: { config: 'config.rb' } } }
Re-Flow : GYWTG Testing } qunit: { all: { options:
{ urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } }
Re-Flow : GYWTG Testing } qunit: { all: { options:
{ urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } } //pattern match for each file qunit: { all: ['test/**/*.html'] }
Re-Flow : GYWTG Testing } qunit: { all: { options:
{ urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } } //pattern match for each file qunit: { all: ['test/**/*.html'] } Jasmine Mocha Nodeunit
Re-Flow : GYWTG plugin-ecosystem } documentaion LESS boilerplates CoffeeScript heroku
deployment amd ES6 Angular AWS requirejs bootstrap mocha phantomjs closure jasmine qunit stylus Ember express FTP git
Re-Flow : GYWTG grunt-init } npm install -g grunt-init
Re-Flow : GYWTG grunt-init } npm install -g grunt-init git
clone
[email protected]
:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
Re-Flow : GYWTG grunt-init } npm install -g grunt-init git
clone
[email protected]
:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery
Re-Flow : GYWTG grunt-init } npm install -g grunt-init git
clone
[email protected]
:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery
Re-Flow : GYWTG Watch it } watch: { scripts: {
files: '**/*.js', tasks: ['jshint'] } } watch: { css: { files: '**/*.sass', tasks: ['compass'] } }
Re-Flow : GYWTG Why GRUNT? } Consistency Configuration || Scripting
Community Powerful
Re-Flow : GYWTG What now? } Install Use Contribute Heart
Automation Peak at Gruntfiles
Re-Flow : GYWTG Godspeed } THANKS @shaundunne :: www.shaundunne.com