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
Search
sporto
November 26, 2013
Programming
1
180
Grunt
sporto
November 26, 2013
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
190
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Safe Testing in Ruby
sporto
1
130
Go - A great language for building web applications
sporto
1
340
Other Decks in Programming
See All in Programming
Langfuseと歩む生成AI活用推進
licux
3
330
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
CSC305 Summer Lecture 12
javiergs
PRO
0
130
🔨 小さなビルドシステムを作る
momeemt
3
660
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Swift Updates - Learn Languages 2025
koher
2
440
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
rage against annotate_predecessor
junk0612
0
160
速いWebフレームワークを作る
yusukebe
5
1.7k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
340
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
32
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Building Adaptive Systems
keathley
43
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Code Review Best Practice
trishagee
70
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Thoughts on Productivity
jonyablonski
70
4.8k
Gamification - CAS2011
davidbonilla
81
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Grunt @sebasporto
WHAT? Task runner (like make, rake)
WHY? Cross platform Lots of plug-ins Nice logging Is JS
Is Node
WHY NOT? Verbose Could end as an unmaintainable complex tangle
mess of configuration
Main uses Build system Live reload Daemons Automated tasks Whatever
Common plug-ins Lint Minify Concat Test (Mocha, Jasmine) Optimise images
Installing grunt Install grunt cli as global Install grunt as
local Uses package.json to keep track of dependencies (devDependecies)
Gruntfile module.exports = function(grunt) { ! grunt.initConfig({ uglify: { build:
{ src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.registerTask('default', ['uglify']); }; tasks config loading and registering tasks
A basic task grunt.registerTask('foo', 'A task', function(arg1, arg2) { …
}); $ grunt foo arg1 arg2
Just Node var foo = require(‘foo’); ! grunt.registerTask('foo', 'A task',
function(arg1, arg2) { // You can do whatever you can with Node ! foo.doSomething(); });
A multitask grunt.registerMultiTask('foo', 'A task', function() { … }); grunt.initConfig({
foo: { dev: {…}, prod: {…} } });
Multitasks $ grunt foo grunt.initConfig({ foo: { dev: {…}, prod:
{…} } }); runs dev and prod
Multitasks $ grunt foo:dev grunt.initConfig({ foo: { dev: {…}, prod:
{…} } }); runs dev only
Chaining tasks grunt.registerTask(‘all', [‘jshint’, ‘mocha’, ‘concat’]); $ grunt all
Chaining tasks grunt.registerTask('all', 'A task', function() { grunt.task.run(‘jshint’, ‘concat’); grunt.task.run(‘ngmin’);
}); $ grunt all
Async tasks grunt.registerTask('all', 'A task', function() { var done =
this.async(); ! doSomethingAsync(done); }); $ grunt all
Events grunt.event.on(‘foo:started’, handler); ! grunt.event.emit(‘foo:stated’, args…);
Installing a plug-in $ npm install grunt-goserver --save-dev grunt.loadNpmTasks(‘grunt-goserver'); !
grunt.initConfig({ goserver: { default: { srcPath: '/full/path/to/src/folder', … }, }, }) In Gruntfile.js
Creating a plug-in Install grunt-init module Clone template Run generator
Code npm publish
Plug-in best practices Create an NPM module first Wrap that
module in a Grunt plug-in
Thanks @sebasporto