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
200
Components on the Web: Frontend NE
jackfranklin
1
770
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
420
Front Trends: Migrating complex software
jackfranklin
1
770
Migrating from Angular to React: Manc React
jackfranklin
1
150
Half Stack Fest: Webpack
jackfranklin
4
490
FullStackFest: Elm for JS Developers
jackfranklin
1
210
Codelicious: Intro to ES2015
jackfranklin
0
340
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
57k
OPENLOGI Company Profile for engineer
hr01
1
17k
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1k
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
670
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
1
5k
MasterMemory v3 最速確認会
yucchiy
0
300
動画配信の フロントエンドを支える 4年間とこれから
nisshii0313
0
110
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
33k
ネットワーク可視化の世界
likr
7
5.7k
Unsafe.BitCast のすゝめ。
nenonaninu
0
150
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.7k
NOT VALIDな検査制約 / check constraint that is not valid
yahonda
1
110
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Navigating Team Friction
lara
183
15k
Why Our Code Smells
bkeepers
PRO
335
57k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
How to Ace a Technical Interview
jacobian
276
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
Making Projects Easy
brettharned
116
6k
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