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
CSS Preprocessor Workflow with Grunt
Search
vladikoff
October 19, 2013
Technology
3
2.6k
CSS Preprocessor Workflow with Grunt
CSS Preprocessor Workflow with Grunt
vladikoff
October 19, 2013
Tweet
Share
More Decks by vladikoff
See All by vladikoff
The state of end-to-end testing for modern web apps
vladikoff
0
34
SmashingConf 2020
vladikoff
0
10
dotJS 2019 - Into WebAssembly
vladikoff
0
11
3D + the Web Platform
vladikoff
0
370
7 years of three.js
vladikoff
0
120
node.js @ GA 2015
vladikoff
0
400
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
780
Node.JS Intro - General Assembly
vladikoff
3
450
3D Voxel Worlds with voxel.js
vladikoff
1
1.9k
Other Decks in Technology
See All in Technology
JSON攻略法.pdf
miyakemito
8
4.7k
AWS認定資格を取得したので、初めてマネコンを触った時を振り返ってみた。
ainatsuptr
2
100
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
480
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
150
Cracking the KubeCon CfP
inductor
2
220
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
5.8k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.6k
ServiceNow Knowledge Learning Rise up
manarobot
0
200
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
210
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.2k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
210
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
Code Reviewing Like a Champion
maltzj
514
39k
The Cult of Friendly URLs
andyhume
74
5.7k
Web development in the modern age
philhawksworth
202
10k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
4 Signs Your Business is Dying
shpigford
175
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Rails Girls Zürich Keynote
gr2m
91
13k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Designing for humans not robots
tammielis
248
25k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Transcript
Preprocessor Workflow with Grunt CSS Dev Conference 2013 / Vlad
Filippov
@vladikoff
Agenda • Grunt - What and Why? • Getting Started
• Grunt Plugins and CSS Workflows • Beyond the plugins +
What is Grunt? Task Runner open browser minify CSS process
SASS optimize images run tests . . .
What is Grunt? Automation open browser minify CSS process LESS
optimize images → → → { →
What is Grunt? Build Step → → → → Debug
→ Source Production Development
What is Grunt? • Built and Configured using JavaScript •
Powered by • Cross-platform • Strength in community & open-source • Strength in modularity
Who uses Grunt?
npm-stat.vorb.de/charts.html?package=grunt
Grunt Ecosystem • Stable Version: 0.4.1 • 0.4.2 out in
the next few days! • Over 1000 plugins available today
Demo
Getting Started
Empty Gruntfile
Grunt Plugins!
Grunt Plugins! Grunt Plugins and Grunt Core in node_modules Install
the plugin we want:
Make it easy to install $ npm install grunt-contrib-less --save-dev
Make it easy to install Ready to be installed everywhere!
grunt-contrib-less
grunt-contrib-stylus
grunt-contrib-sass
grunt-contrib-compass
File Patterns
Run it!
So far... → SASS: dev SASS: prod →
grunt-contrib-watch
grunt-contrib-watch
Workflow! → SASS: dev SASS: prod → watch for changes
default development →
grunt-spritesmith
grunt-contrib-imagemin
build Workflow Updated! → SASS: dev SASS: prod → watch
for changes default dev → create sprites → build optimize images → → build →
Workflow Updated!
grunt-source Reuse a Grunt environment across multiple projects Project A
Project B Project C Boilerplate Project
So much to do... • Explore task combinations, optimize •
Give feedback to existing plugins • Share your workflow • Build your own plugins • Plugin Template: github.com/gruntjs/grunt-init
Beyond the plugins
Beyond the plugins
Beyond the plugins
Beyond the plugins
None
Thank you! • Documentation and API at gruntjs.com • Stackoverflow:
[gruntjs] • IRC: #grunt on Freenode • Twitter: @gruntjs and #gruntjs