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
150
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
320
Practically Immutable
sporto
0
170
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
310
Other Decks in Programming
See All in Programming
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
880
"noncopyable types" の使いどころについて考えてみた
andpad
0
140
perl for shell, awk and sed programmers
mackee
1
630
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
250
sqlcを利用してsqlに型付けを
kamiyam
0
240
(Deep|Web) Link support with expo-router
mrtry
0
170
Progressive Web Apps for Rails developers
siaw23
2
540
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
0
180
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
280
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4k
CSC509 Lecture 01
javiergs
PRO
1
210
Unlocking Python's Core Magic
leew
0
120
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
139
22k
Being A Developer After 40
akosma
84
590k
Web Components: a chance to create the future
zenorocha
310
42k
Done Done
chrislema
181
16k
Become a Pro
speakerdeck
PRO
24
4.9k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
A Tale of Four Properties
chriscoyier
156
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Facilitating Awesome Meetings
lara
49
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