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
Modern Development Workflow with Grunt
Search
t32k
November 30, 2013
Design
22
36k
Modern Development Workflow with Grunt
http://t32k.me/mol/log/modern-development-workflow-with-grunt/
t32k
November 30, 2013
Tweet
Share
More Decks by t32k
See All by t32k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
2.1k
スタンドアロンAMPのすゝめ
t32k
3
13k
Evaluating your stylesheets
t32k
0
800
Evaluating CSS
t32k
10
2.2k
WebPagetest in 5 minutes
t32k
12
2.6k
Introduction to Sass Compass for Sencha Touch
t32k
6
1.9k
var Gurator = Gist + Curator;
t32k
0
370
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
210
Other Decks in Design
See All in Design
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
460
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.2k
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
210
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
660
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
Installing and Running decksh/pdfdeck
ajstarks
1
870
maki setoguchi
maki_setoguchi
0
520
portfolio.pdf
onof003
0
200
高卒公務員から Webデザイナーになるまで
kinomidesign
0
120
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
2
2.2k
Featured
See All Featured
Done Done
chrislema
185
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
120
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Designing for humans not robots
tammielis
254
26k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Git: the NoSQL Database
bkeepers
PRO
431
66k
For a Future-Friendly Web
brad_frost
180
10k
Raft: Consensus for Rubyists
vanstee
140
7.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Practical Orchestrator
shlominoach
190
11k
Transcript
Modern Development Workflow with Grunt HTML5 Conference JP 2013 Koji
Ishimoto
@t32k
None
- Why use Grunt? - How to use Grunt -
Customize your Gruntfile! Agenda
Target HTML Corder Web Designer or
Why use Grunt?
The JavaScript Task Runner Linting Compiling Minification Testing Conversion Documentation
Deployment
None
Complexity
GUI Apps
None
Paid Apps
$$$
Web Performance
2007
None
14 Rules for Faster-Loading Web Sites
2013
#perfmatters
Network Render Compute
)5.-ΧϯϑΝϨϯεɺϧʔϜ"ɺ ʰ8FCϑϩϯτΤϯυͷϨϯμϦϯάύϑΥʔϚϯεͱ࠷దԽ5JQTʱ
How to use Grunt
Install
None
$ npm install grunt-cli -g
Structure
Package.json Gruntfile.js .js or .coffee
None
None
Package.json
$ npm init
{ "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main":
"Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause" }
$ npm install grunt --save-dev $ npm install grunt-csso --save-dev
{ "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main":
"Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause", "devDependencies": { "grunt": "~0.4.2", "grunt-csso": "~0.5.2" } }
Package.json $ npm install A B
Gruntfile.js
$ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntfile.git
~/.grunt-init/gruntfile $ grunt-init gruntfile
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ // Task
configuration. csso: { files: { 'output.css': ['input.css'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-csso'); // Default task. grunt.registerTask('default', ['csso']); };
None
Load the task:
grunt.loadNpmTasks('grunt-csso');
Configure the task:
grunt.initConfig({ csso: { dist: { files: { 'output.css': ['input.css'] }
} } });
Register the task:
grunt.registerTask('default', [‘csso’]);
$ grunt csso
Customize your Gruntfile!
None
grunt-contrib-***
None
$ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntplugin.git
~/.grunt-init/gruntplugin $ grunt-init gruntplugin
Maple Realistic preprocessors-based CSS framework for mobile.
None
95,000byte 100,000byte 105,000byte 110,000byte 115,000byte 120,000byte Byte 270 1 135
67 202 Deploy times CSS file size as deploy
grunt stylesheet ['sass', 'autoprefixer', 'csscomb', 'csslint']
grunt typeset ['webfont', 'stylesheet']
grunt publish ['stylesheet', 'kss']
grunt build ['stylesheet', 'csso', 'imageoptim']
Jet Start
None
None
$ npm install yo -g $ npm install generator-maple -g
$ mkdir your_proj && cd $_ $ yo maple $ grunt
- Automation - Customization - Start of Terminal Summary
Thanks! t32k @t32k koji.ishimoto
- flickr.com/photos/bitterjug/7670055210 - flickr.com/photos/epsos/8474532085 - flickr.com/photos/viernest/3380560365 - flickr.com/photos/81583603@N00/4099146279 - flickr.com/photos/peasap/2261077597
- flickr.com/photos/epsos/8097327748 Photo Credits