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
Marco Bohler
November 06, 2014
Programming
0
670
Grunt
Lightning Talk about Grunt (gruntjs.com)
Marco Bohler
November 06, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
470
Going beyond Apache Parquet's default settings
xhochy
0
120
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
100
"config" ってなんだ? / What is "config"?
okashoi
0
250
雑に思考を整理する技術と効能
konifar
61
30k
Elm 0.19.0 Changes
bkuhlmann
0
490
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
420
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
330
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
370
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
0
260
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Web Components: a chance to create the future
zenorocha
306
41k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
BBQ
matthewcrist
80
8.8k
KATA
mclloyd
16
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
Design by the Numbers
sachag
274
18k
Typedesign – Prime Four
hannesfritz
36
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
11
1.5k
Faster Mobile Websites
deanohume
300
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Transcript
About Grunt and how to use it
ABOUT #ME • WebDev @smartive GmbH • Passionate Frontend Developer
• Software Engineering Student @zhaw Winterthur
OVERVIEW • Basic Installation and NPM • Plugin Installation and
Embedding it into a task • Create your own Tasks
ABOUT GRUNT
WHAT CAN YOU DO WITH IT? • Create building tasks
- Minify images - Precompile templates - Minify JS-Files - Deployment • Execute development tasks - Watch code changes and react on it - Build CSS from SASS/LESS - Execute unit tests
SETUP CLI $ npm install -g grunt-cli
PACKAGE.JSON { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5"
} }
INSTALL DEPENDENCIES $ npm install http://gruntjs.com/plugins
ADD DEPENDENCY $ npm install grunt —save-dev
GRUNTFILE.JS • Task Configuration (JSON) • Task Registration and Inclusion
TASK CONFIGURATION • Configuration node has the same name as
the task name
BASIC TASK REGISTRATION grunt.registerTask(‘taskname’, ’description’, myFunction); • Register a task
which executes a bunch of subtasks
TASK REGISTRATION • Register a task which executes a bunch
of subtasks grunt.registerTask('default', ['watch']); • Execute with grunt taskname
MULTITASK REGISTRATION • Accessing a configuration node grunt watch:foo •
Execute with grunt
FURTHER FEATURES • Project Scaffolding - Building custom project structures
TIME TO RUN YOUR TASKS