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
160
Grunt
sporto
November 26, 2013
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
170
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
210
Lesson learnt building Single Page Application
sporto
0
110
Safe Testing in Ruby
sporto
1
120
Go - A great language for building web applications
sporto
1
320
Other Decks in Programming
See All in Programming
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
540
선언형 UI에서의 상태관리
l2hyunwoo
0
150
バグを見つけた?それAppleに直してもらおう!
uetyo
0
180
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
770
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
930
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
240
ドメインイベント増えすぎ問題
h0r15h0
1
220
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
120
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
YesSQL, Process and Tooling at Scale
rocio
169
14k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Unsuck your backbone
ammeep
669
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
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