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
70
SmashingConf 2020
vladikoff
0
24
dotJS 2019 - Into WebAssembly
vladikoff
0
22
3D + the Web Platform
vladikoff
0
400
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
480
3D Voxel Worlds with voxel.js
vladikoff
1
2k
Other Decks in Technology
See All in Technology
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
110
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
270
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
250
地図と生成AI
nakasho
0
680
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
110
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
Data Engineering Study#30 LT資料
tetsuroito
1
550
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
530
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Thoughts on Productivity
jonyablonski
69
4.7k
Designing for humans not robots
tammielis
253
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Writing Fast Ruby
sferik
628
62k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Making Projects Easy
brettharned
116
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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