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
AI Agent 時代的開發者生存指南
eddie
4
2.2k
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
チームの境界をブチ抜いていけ
tokai235
0
230
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
contribution to astral-sh/uv
shunsock
0
550
CSC305 Lecture 11
javiergs
PRO
0
280
CSC305 Lecture 10
javiergs
PRO
0
270
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
860
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
AkarengaLT vol.38
hashimoto_kei
1
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
Six Lessons from altMBA
skipperchong
29
4k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
74
The Language of Interfaces
destraynor
162
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Being A Developer After 40
akosma
91
590k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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