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
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
Model Pollution
hschwentner
1
180
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
790
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Designing for humans not robots
tammielis
254
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Cost Of JavaScript in 2023
addyosmani
53
9k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Producing Creativity
orderedlist
PRO
347
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Site-Speed That Sticks
csswizardry
11
880
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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