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
390
スタンドアロンAMPのすゝめ
t32k
3
13k
Evaluating your stylesheets
t32k
0
780
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
350
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
200
Other Decks in Design
See All in Design
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
270
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
500
マンガで分かるサービスデザインガイドライン
senryakuka
1
840
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
520
今日から意識できるアクセシビリティ
fumiko
0
230
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
230
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
270
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.7k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
230
Goodpatch Tour💙 / We are hiring!
goodpatch
31
840k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.5k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
Speed Design
sergeychernyshev
30
960
Art, The Web, and Tiny UX
lynnandtonic
298
21k
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
76
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
It's Worth the Effort
3n
184
28k
Fireside Chat
paigeccino
37
3.5k
Raft: Consensus for Rubyists
vanstee
137
6.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
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