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
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
740
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
110
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
エラーとアクセシビリティ
schktjm
1
1.2k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
380
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
210
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Scaling GitHub
holman
463
140k
Agile that works and the tools we love
rasmusluckow
330
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Adaptive Systems
keathley
43
2.7k
Into the Great Unknown - MozCon
thekraken
40
2k
Become a Pro
speakerdeck
PRO
29
5.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A Modern Web Designer's Workflow
chriscoyier
696
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Speed Design
sergeychernyshev
32
1.1k
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