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
140
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
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
All you need to know about InnoDB Primary Keys
lefred
0
120
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
FastConnect の冗長性
ocise
1
9.6k
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
現場で役立つAPIデザイン
nagix
29
10k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
A designer walks into a library…
pauljervisheath
205
24k
Become a Pro
speakerdeck
PRO
26
5.1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Side Projects
sachag
452
42k
Fireside Chat
paigeccino
34
3.2k
Being A Developer After 40
akosma
89
590k
Producing Creativity
orderedlist
PRO
343
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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