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
1.8k
スタンドアロン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
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
decksh object reference
ajstarks
2
1.3k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.9k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
110
Installing and Running decksh/pdfdeck
ajstarks
1
840
minpaku-community-scrum-patterns
norinity1103
1
370
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
350
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
450
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
680
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Context Engineering - Making Every Token Count
addyosmani
3
62
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How GitHub (no longer) Works
holman
315
140k
Bash Introduction
62gerente
615
210k
Balancing Empowerment & Direction
lara
3
630
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Music & Morning Musume
bryan
46
6.8k
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