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
140
Grunt
sporto
November 26, 2013
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
170
Elm
sporto
1
220
Redux: Flux Reduced
sporto
1
320
Practically Immutable
sporto
0
160
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
100
Safe Testing in Ruby
sporto
1
110
Go - A great language for building web applications
sporto
1
290
Other Decks in Programming
See All in Programming
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
Honoとhtmx
yusukebe
6
1.2k
受託開発でGitLab CI を活用していく
xiombatsg
1
130
LLMチャットボットのアプリケーション設計Tips
os1ma
4
670
Creating Retro-Style Photos Using Swift
ski
1
370
TDDと今まで
kanayannet
0
140
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
140
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.5k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8.1k
Building a Smaller App Binary
kateinoigakukun
2
220
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
71
5.1k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Building an army of robots
kneath
300
41k
What the flash - Photography Introduction
edds
64
11k
A Philosophy of Restraint
colly
195
15k
Being A Developer After 40
akosma
56
580k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
BBQ
matthewcrist
78
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Invisible Customer
myddelton
114
12k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
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