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
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 - SideView 2013
shaunix
3
260
Grunt your way to Glory : LDNJS - 15th July 2013
shaunix
3
170
Other Decks in Technology
See All in Technology
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
「Linux」という言葉が指すもの
sat
PRO
4
140
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
530
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
110
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
A Tale of Four Properties
chriscoyier
160
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Building an army of robots
kneath
306
46k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Documentation Writing (for coders)
carmenintech
74
5k
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