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
180
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
120
Go - A great language for building web applications
sporto
1
340
Other Decks in Programming
See All in Programming
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
Rubyの!メソッドをちゃんと理解する
alstrocrack
2
380
Digging into the Matrix: Practicing Code Archaeology
arthurdoler
PRO
0
110
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
190
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
140
ビカム・ア・コパイロット
ymd65536
1
170
KANNA Android の技術的課題と取り組み
watabee
1
600
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.6k
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
280
Duke on CRaC with Jakarta EE
ivargrimstad
1
320
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.7k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
BBQ
matthewcrist
88
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Automating Front-end Workflow
addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
4 Signs Your Business is Dying
shpigford
183
22k
Navigating Team Friction
lara
185
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
590
Mobile First: as difficult as doing things right
swwweet
223
9.6k
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