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 you way to Glory : LNUG MAY
Search
Shaun D
May 22, 2013
Programming
4
320
Grunt you way to Glory : LNUG MAY
Updated version of my gruntjs talk given at London Node meetup in May.
Shaun D
May 22, 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 Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
920
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
250
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
280
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
230
生成AIで日々のエラー調査を進めたい
yuyaabo
0
640
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
ニーリーにおけるプロダクトエンジニア
nealle
0
130
Java on Azure で LangGraph!
kohei3110
0
170
Team operations that are not burdened by SRE
kazatohiei
1
180
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
CursorはMCPを使った方が良いぞ
taigakono
1
170
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Producing Creativity
orderedlist
PRO
346
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Code Review Best Practice
trishagee
68
18k
Automating Front-end Workflow
addyosmani
1370
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
RE-FLOW! Grunt your way to Glory Shaun Dunne - @shaundunne
- about.me/shaundunne LNUG // 22-05-2013
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 ?
Re-Flow : GYWTG Getting GUI } CODEKIT LIVERELOAD NO CONFIG
CO$T WINDOWS
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-cli + TWO FILES package.json Gruntfile.js
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 { "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'] } 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 {
"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 }) 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 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' ] } } } //pattern match for each file qunit: { all: ['test/**/*.html'] } Jasmine Mocha Nodeunit
Re-Flow : GYWTG Watch it } watch: { scripts: {
files: '**/*.js', tasks: ['jshint'] } } watch: { css: { files: '**/*.sass', tasks: ['compass'] } }
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 git
clone
[email protected]
:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery
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 :: about.me/shaundunne