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
71
SmashingConf 2020
vladikoff
0
25
dotJS 2019 - Into WebAssembly
vladikoff
0
23
3D + the Web Platform
vladikoff
0
410
7 years of three.js
vladikoff
0
140
node.js @ GA 2015
vladikoff
0
460
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
820
Node.JS Intro - General Assembly
vladikoff
3
490
3D Voxel Worlds with voxel.js
vladikoff
1
2k
Other Decks in Technology
See All in Technology
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.9k
20250807_Kiroと私の反省会
riz3f7
0
240
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
2.4k
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
20250807 Applied Engineer Open House
sakana_ai
PRO
2
480
リリース2ヶ月で収益化した話
kent_code3
1
310
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
160
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
860
ZOZOTOWNの大規模マーケティングメール配信を支えるアーキテクチャ
zozotech
PRO
0
480
Intro to Software Startups: Spring 2025
arnabdotorg
0
260
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
8
370
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
0
240
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Navigating Team Friction
lara
188
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
It's Worth the Effort
3n
186
28k
Visualization
eitanlees
146
16k
Agile that works and the tools we love
rasmusluckow
329
21k
Documentation Writing (for coders)
carmenintech
73
5k
GitHub's CSS Performance
jonrohan
1031
460k
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