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.7k
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
67
SmashingConf 2020
vladikoff
0
16
dotJS 2019 - Into WebAssembly
vladikoff
0
15
3D + the Web Platform
vladikoff
0
380
7 years of three.js
vladikoff
0
130
node.js @ GA 2015
vladikoff
0
430
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
800
Node.JS Intro - General Assembly
vladikoff
3
460
3D Voxel Worlds with voxel.js
vladikoff
1
1.9k
Other Decks in Technology
See All in Technology
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
120
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
110
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
100
JTCや セキュリティチェックリストが夢の跡
nikinusu
1
710
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
140
Functional TypeScript
naoya
11
4.8k
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
Technical Writing Meetup vol.35
soracom
PRO
2
120
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
GC24 Recap: Interface Internals
task4233
0
150
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Typedesign – Prime Four
hannesfritz
39
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Building Applications with DynamoDB
mza
90
6k
Unsuck your backbone
ammeep
667
57k
The Invisible Customer
myddelton
119
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Music & Morning Musume
bryan
46
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Designing with Data
zakiwarfel
98
5k
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