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
550
スタンドアロンAMPのすゝめ
t32k
3
13k
Evaluating your stylesheets
t32k
0
790
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
360
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
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
460
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2.2k
株式会社バクタム 会社説明資料
bactum
0
260
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
790
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
570
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
Liquid Iron
mcduckyart
1
110
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.1k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
230
7 Core Values of Round-L
wired888
0
410
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
220
#Dubois Challenge 2025: Economics
ajstarks
0
140
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Applications with DynamoDB
mza
95
6.5k
Speed Design
sergeychernyshev
32
1k
Embracing the Ebb and Flow
colly
86
4.8k
What's in a price? How to price your products and services
michaelherold
246
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Side Projects
sachag
455
42k
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