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
68
SmashingConf 2020
vladikoff
0
18
dotJS 2019 - Into WebAssembly
vladikoff
0
19
3D + the Web Platform
vladikoff
0
380
7 years of three.js
vladikoff
0
130
node.js @ GA 2015
vladikoff
0
440
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
810
Node.JS Intro - General Assembly
vladikoff
3
470
3D Voxel Worlds with voxel.js
vladikoff
1
1.9k
Other Decks in Technology
See All in Technology
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
100
Engineer Career Talk
lycorp_recruit_jp
0
190
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
Storybook との上手な向き合い方を考える
re_taro
5
860
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
780
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
【LT】ソフトウェア産業は進化しているのか? #Agilejapan
takabow
0
100
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
Speed Design
sergeychernyshev
25
620
Code Reviewing Like a Champion
maltzj
520
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Ruby is Unlike a Banana
tanoku
97
11k
What's in a price? How to price your products and services
michaelherold
243
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
How to train your dragon (web standard)
notwaldorf
88
5.7k
Writing Fast Ruby
sferik
627
61k
Faster Mobile Websites
deanohume
305
30k
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