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
Giving your Development more Grunt - FOWA Londo...
Search
Jack Franklin
October 25, 2013
Technology
5
660
Giving your Development more Grunt - FOWA London 2013
An in-depth introduction to GruntJS and some of the best plugins available.
Jack Franklin
October 25, 2013
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
190
Components on the Web: Frontend NE
jackfranklin
1
740
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
400
Front Trends: Migrating complex software
jackfranklin
1
730
Migrating from Angular to React: Manc React
jackfranklin
1
140
Half Stack Fest: Webpack
jackfranklin
4
470
FullStackFest: Elm for JS Developers
jackfranklin
1
200
Codelicious: Intro to ES2015
jackfranklin
0
330
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
300
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
Mocking in Rust Applications
taiki45
1
360
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
410
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
340
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
540
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
260
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
110
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
Optuna: a Black-Box Optimization Framework
pfn
PRO
1
100
ビジネスとエンジニアリングを繋ぐプロダクトを中心とした組織づくりの実践
sansantech
PRO
1
160
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
39
2.3k
The Invisible Customer
myddelton
119
13k
Why Our Code Smells
bkeepers
PRO
334
56k
Infographics Made Easy
chrislema
239
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Designing the Hi-DPI Web
ddemaree
278
34k
The Mythical Team-Month
searls
218
43k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
The Language of Interfaces
destraynor
153
23k
Transcript
GIVING YOUR DEVELOPMENT MORE GRUNT @jack_franklin #FOWA
comp-sci student javascript / ruby author & blogger
THANKS ADDY!
None
0.4.1
PLUGINS
NODE
npm
WINDOWS
npm install grunt-cli -g installing grunt the package to install
install it globally (system wide)
mkdir my-new-project cd my-new-project new project
{ "name": "my-sample-app", "version": "0.0.0", "devDependencies": { "grunt": "0.4.1" }
} package.json
install deps npm install
module.exports = function(grunt) { grunt.initConfig({ // config goes here });
}; Gruntfile.js
Gruntfile.js package.json src/ - one.js - two.js - three.js src
files
npm install grunt-contrib-uglify --save-dev uglify plugin
{ ... "devDependencies": { "grunt": "0.4.1", "grunt-contrib-uglify": "~0.2.4" } }
package.json
module.exports = function(grunt) { grunt.initConfig({ // config goes here });
grunt.loadNpmTasks(“grunt- contrib-uglify”); }; Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files:
{ 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
> grunt uglify Running "uglify:minify" (uglify) task File "dist/out.js" created.
Done, without errors. Running the task
grunt.loadNpmTasks(...); grunt.registerTask(“default”, “uglify”); Gruntfile.js > grunt # now runs the
uglify task
npm install grunt-contrib-jshint --save-dev JSHint
grunt.loadNpmTasks(“grunt-contrib- uglify”); grunt.loadNpmTasks(“grunt-contrib- jshint”); Gruntfile.js
uglify: { /* snip */ }, jshint: { all: ['Gruntfile.js',
'src/ *.js'] }, // rest of Gruntfile Gruntfile.js
> grunt jshint Running "jshint:all" (jshint) task >> 4 files
lint free. Done, without errors. Running the task
grunt.registerTask(“default”, [“jshint”, “uglify”]); Default Task
> grunt Running "jshint:all" (jshint) task >> 4 files lint
free. Running "uglify:minify" (uglify) task File "dist/out.js" created. Done, without errors. Running grunt
// JSHint won't like the missing // semi colon console.log("file
2") src/two.js
Running "jshint:all" (jshint) task Linting src/two.js ...ERROR [L2:C22] W033: Missing
semicolon. console.log("file 2") Warning: Task "jshint:all" failed. Use --force to continue. Aborted due to warnings. Running grunt
Multi Tasks lots of tasks can have different configurations
module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files:
{ 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
uglify: { minify: { /* snip */ }, withBanner: {
options: { banner: "/*Hello World*/" }, files: { 'dist/out.js': ['src/*.js'] } } }, // rest of Gruntfile Gruntfile.js
> grunt uglify:withBanner Running "uglify:withBanner" (uglify) task File "dist/out.js" created.
Done, without errors. Running a task
> cat dist/out.js /*Hello World*/console.log("file 1"),console.log("file 3"),console.log("file 2"); Gruntfile.js
grunt.registerTask("default", ["jshint", "uglify:withBanner"]); Gruntfile.js
npm install grunt-contrib-watch --save-dev Watching
grunt.loadNpmTasks('grunt-contrib-watch'); Watching
uglify: { /*snip*/ }, watch: { files: [‘src/*.js’, ‘Gruntfile.js’], tasks:
[‘jshint’], }, jshint: { /*snip*/ } Gruntfile.js
> grunt watch Running "watch" task Waiting...OK >> File "src/two.js"
changed. Running "jshint:all" (jshint) task >> 4 files lint free. Done, without errors. Completed in 0.470s at Wed Oct 23 2013 14:27:08 GMT+0100 (BST) - Waiting... Watching
Watching Running JSHint constantly Checking tests haven’t broken Auto compiling
Sass/Less
Notifications npm install grunt-notify --save-dev grunt.loadNpmTasks('grunt-contrib-notify');
None
Testing npm install grunt-contrib-jasmine --save- dev grunt.loadNpmTasks('grunt-contrib- jasmine');
Gruntfile.js jshint: { /* snip */ }, jasmine: { test:
{ src: 'src/*.js', options: { specs: 'spec/*.js' } } }, watch: { /*snip */ },
spec/test.js describe("my app", function() { it("passes", function() { expect(two()).toEqual(2); });
});
src/two.js window.two = function() { return 2; };
Testing > grunt jasmine Running "jasmine:test" (jasmine) task Testing jasmine
specs via phantom . 1 spec in 0.001s. >> 0 failures Done, without errors.
Default Task grunt.registerTask("default", [ "jshint", "jasmine", "uglify:withBanner" ]);
Default Task Running "jshint:all" (jshint) task >> 4 files lint
free. Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom . 1 spec in 0.002s. >> 0 failures Running "uglify:withBanner" (uglify) task File "dist/out.js" created. Done, without errors.
Errors Running "jshint:all" (jshint) task >> 4 files lint free.
Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom x my app:: passes: failed Expected 2 to equal 3. (1) 1 spec in 0.002s. >> 1 failures
npm install grunt-concurrent --save-dev grunt.loadNpmTasks('grunt-concurrent'); Concurrent
concurrent: { target1: ['jasmine', 'jshint'] } grunt.registerTask("default", [ "concurrent:target1", "uglify:withBanner"
]); Gruntfile.js
Running "concurrent:target1" (concurrent) task Running "jshint:all" (jshint) task >> 4
files lint free. Done, without errors. Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom 1 spec in 0.001s. >> 0 failures Done, without errors. Running "uglify:withBanner" (uglify) task File "dist/out.js" created. Done, without errors.
None
"src/*.js" Tidying Up
grunt.initConfig({ srcFiles: "src/*.js", uglify: { /*snip */ }, ... });
Defining Vars
jshint: { all: [ 'Gruntfile.js', '<%= srcFiles %>' ] },
Using Vars
define once refer lots change once
grunt.initConfig({ srcFiles: "src/*.js", outFile: "dist/out.js", uglify: { /* snip */
}, ... }); More Vars
minify: { files: { '<%= outFile %>': ['<%= srcFiles %>']
} } More Vars
grunt.loadNpmTasks("grunt-contrib- uglify"); grunt.loadNpmTasks("grunt-contrib- jshint"); grunt.loadNpmTasks("grunt-contrib- watch"); grunt.loadNpmTasks("grunt-contrib- jasmine"); grunt.loadNpmTasks("grunt- notify");
Match Dep
npm install matchdep --save-dev Match Dep
// replace all the loadNpmTask() lines with: require('matchdep') .filterDev('grunt-*') .forEach(grunt.loadNpmTasks);
Match Dep
“work less, do more, make awesome” -@addyosmani
be lazy automate lessen friction
“embrace the ecosystem” -me, Generate Conf, Sept 2013
love your tools get to know them
None
setup once use again and again iterate
scratched the surface
popular jQuery BBC Twitter Adobe Bocoup Opera WordPress
700+ plugins http://gruntjs.com/plugins
700+ plugins minification image optimisation templating compiling local servers live
reloading
for more gruntjs.com @gruntjs @gruntweekly #grunt on freenode
be warned! watch out for outdated tutorials
0.4.1
any (easy) questions? speakerdeck.com/jackfranklin @jack_franklin javascriptplayground.com https://github.com/javascript-playground/fowa-grunt-talk