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
Koji Ishimoto
November 30, 2013
Design
22
36k
Modern Development Workflow with Grunt
http://t32k.me/mol/log/modern-development-workflow-with-grunt/
Koji Ishimoto
November 30, 2013
Tweet
Share
More Decks by Koji Ishimoto
See All by Koji Ishimoto
スタンドアロンAMPのすゝめ
t32k
3
12k
Evaluating your stylesheets
t32k
0
680
Evaluating CSS
t32k
10
2k
WebPagetest in 5 minutes
t32k
12
2.4k
Introduction to Sass Compass for Sencha Touch
t32k
6
1.8k
var Gurator = Gist + Curator;
t32k
0
290
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
170
Mobile Front-end Optimization Standard:2012
t32k
7
800
Other Decks in Design
See All in Design
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
460
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
260
Product-Writing
aguringo
6
2.8k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
650
他人事じゃないWebアクセシビリティ入門
arihiro17
0
230
The Fight
euralisw
0
120
Sociotechnical design for software and human systems
xinyao
2
500
ホワイト化するこの世界の片隅に
hisayosky
0
140
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
980
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
320
37k
What the flash - Photography Introduction
edds
64
11k
Navigating Team Friction
lara
179
13k
GitHub's CSS Performance
jonrohan
1025
450k
A Tale of Four Properties
chriscoyier
152
22k
Optimizing for Happiness
mojombo
370
69k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
How GitHub (no longer) Works
holman
305
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
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