SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
gulp + sass で目指せ倍速コーディング
東区フロントエンド勉強会 2015年 第2回
追加資料
1
フロントエンド エンジニア
末包 俊道(すえかね)
http://excode.jp
エクスコード株式会社
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
東区フロントエンド勉強会 2015年 第2回 追加資料
2
Retina対応 CSSスプライトを自動化しよう(sprity版)
http://excode.jp
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
第8章 CSSスプライトを自動化しよう(sprity版)
1. 概要
2. 環境準備
3. タスクを作ろう
4. 動作確認をしよう
5. Sassファイルの使い方
3
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
4
1. 概要
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
5
http://excode.jp
作業用のディレクトリに保存 CSSスプライトが生成される
./develop/sprite ./html/images
LOGO
LOGO
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
6
http://excode.jp
作業用のディレクトリに保存 → 最適化したCSSスプライト画像を生成
./develop/sprite ./develop/images
LOGO
./html/images
画像生成 最適化
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
logo.png
right.png load.png
LOGO
my-sprite.png
LOGO
my-sprite@2x.png
LOGO
my-sprite.png
LOGO
my-sprite@2x.png
7
2. 環境準備
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
Mac OSX
1. Xcode(コマンドラインツールが必要)
Windows
1. Python 2.7.x (3.xはNG)
2. Visual Studio Community 2015
3. Visual C++ 2015 Tools for Windows Desktop
8
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
2. 環境準備
9
http://excode.jp
1. Mac App Store でXcodeを入手
2. 一度起動します
3-a. GUIからコマンドラインツールをインストール
  Xcode > preference… > Downloads > Command Line Tools
3-b. ターミナルからコマンドラインツールをインストール
  インストール
  $ xcode-select —install
  インストール完了しているか確認
  $ gcc --version
環境構築手順(Mac)
2. 環境準備 - Mac
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
10
http://excode.jp
1. Python をインストール

Python
https://www.python.org/
※インストール時には必ず[Add python.exe to Path]で[Will be installed on
local hard drive]を選択しておく


コマンドプロンプトで確認
> python --version
環境構築手順(Windows)
2. 環境準備 - Windows
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
11
http://excode.jp
2. Visual Studio をインストール

Visual Studio Community 2015
https://www.visualstudio.com/
→ Download Community 2015
※インストールにかなり時間がかかります
※インストール時にIE10以上を要求されます
※Micrsoft account が必要です
環境構築手順(Windows)
2. 環境準備 - Windows
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
12
http://excode.jp
3. Visual C++ 2015 Tools をインストール

・Visual Studio Community 2015 を起動
・サイドから New Project… を選択
・Install Visual C++ 2015 Tools for Windows
 Desktop を選択
・OKを押してインストール実行

・Visual Studio Community 2015 を閉じるよう
 指示されるので終了する

※インストールにかなり時間がかかります
環境構築手順(Windows)
2. 環境準備 - Windows
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
13
3. タスクを作ろう
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
14
http://excode.jp
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
作業手順
sprite.js (./gulp_task/sprite.js)
var gulp = require('gulp');
var conf = require('../config');
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
… (省略)
watch.js (./gulp_task/watch.js)
// 開発用ディレクトリ
var src = './develop';
… (省略)
config.js
3. タスクを作ろう
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
15
http://excode.jp
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
作業手順
sprite.js (./gulp_task/sprite.js)
var gulp = require('gulp');
var conf = require('../config');
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
… (省略)
watch.js (./gulp_task/watch.js)
// 開発用ディレクトリ
var src = './develop';
… (省略)
config.js
3. タスクを作ろう
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
16
http://excode.jp
ディレクトリに追加された画像をスプライト画像とSassを書き出します
sprityhttps://www.npmjs.com/package/sprity
3. タスクを作ろう
条件分岐を使えるようになります
gulp-ifhttps://www.npmjs.com/package/gulp-if
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
sprity 用の SASS/SCSS プロセッサー
sprity-sasshttps://www.npmjs.com/package/sprity-sass
17
http://excode.jp
Windows の方 Mac の方
> npm install sprity —save-dev -g
css-sprite を追加
$ npm install sprity —save-dev -g
css-sprite を追加
> npm install sprity-sass --save-dev
sprity-sass を追加
$ npm install sprity-sass --save-dev
sprity-sass を追加
3. タスクを作ろう
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
> npm install gulp-if --save-dev
gulp-if を追加
$ npm install gulp-if --save-dev
gulp-if を追加
18
http://excode.jp
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
作業手順
sprite.js (./gulp_task/sprite.js)
var gulp = require('gulp');
var conf = require('../config');
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
… (省略)
watch.js (./gulp_task/watch.js)
// 開発用ディレクトリ
var src = './develop';
… (省略)
config.js
3. タスクを作ろう
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
19
http://excode.jp
Mac の方
$ mkdir develop/sprite
sprite ディレクトリを作成
> mkdir developsprite
sprite ディレクトリを作成
3. タスクを作ろう
$ touch gulp_task/sprite.js
gulp_task 内に sprite.js ファイルを作成
> type nul gulp_tasksprite.js
gulp_task 内に sprite.js ファイルを作成
ついでに sprite.js も作成します
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
20
http://excode.jp
lesson
├ .csscomb.json
│
├ config.js
├ develop
│ ├ images
│ ├ sass
│ │ └ style.sass
│ └ sprite ←今回追加した作業用ディレクトリ
│
├ gulp_task
│ ├ image.js
│ ├ sass.js
│ ├ sprite.js
│ └ watch.js
│
├ gulpfile.js
│
├ html
│ ├ css
│ │ └ style.css
│ ├ images ←タスク実行時に自動で生成されます
│ └ index.html
3. タスクを作ろう
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
21
http://excode.jp
3. タスクを作ろう
var src = './develop';
var dest = './html';
module.exports = {
src: src,
dest: dest,
sass: {
src: src + '/sass/**/*.sass',
dest: dest + '/css',
},
image: {
src: src + '/images/**/*',
dest: dest + '/images',
},
sprite: {
src: src +'/sprite/*.png', // 監視・対象ファイル
dest: src +'/images', // スプライト画像出力先
sass: src +'/sass', // Sassディレクトリ
style: '_sprite.sass', // Sassファイル名
name: 'my-sprite', // 画像ファイル名
prefix: 'sprite', // mixinプレフィクス
cssPath: '../images/', // CSS内のパス
processor: 'sprity-sass', // sprity-sassを使用
margin: 0, // 画像間のマージン
type: 'sass', // Sassの種類
},
};
config.js
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
22
http://excode.jp
3. タスクを作ろう
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprity = require('sprity');
var conf = require('../config');
gulp.task('sprite', function () {
return sprity.src({
src: conf.sprite.src,
name: conf.sprite.name,
style: conf.sprite.style,
cssPath: conf.sprite.cssPath,
processor: conf.sprite.processor,
prefix: conf.sprite.prefix,
margin: conf.sprite.margin,
'style-type': conf.sprite.type,
'dimension': [{
ratio: 1, dpi: 72
}, {
ratio: 2, dpi: 192
}],
})
.pipe(
gulpif('*.png',
gulp.dest(conf.sprite.dest),
gulp.dest(conf.sprite.sass)
)
)
});
sprite.js (./gulp_task/sprite.js)
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
sprityの公式サイトでは分かりにくい部分があるので、
あらかじめサンプルを用意しました
23
http://excode.jp
3. タスクを作ろう
var gulp = require('gulp');
var watch = require('gulp-watch');
var conf = require('../config');
gulp.task('sass:watch', function () {
… (省略) …
});
gulp.task('image:watch', function () {
watch(conf.image.src, function () {
gulp.start(['image']);
});
});
gulp.task('sprite:watch', function () {
watch(conf.sprite.src, function () {
gulp.start(['sprite']);
});
watch(conf.image.src, function () {
gulp.start(['image']);
});
});
gulp.task('default', function() {
watch(conf.sass.src, function () {
gulp.start(['sass']);
});
watch(conf.image.src, function () {
gulp.start(['image']);
});
watch(conf.sprite.src, function () {
gulp.start(['sprite']);
});
});
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
 - ./sprite
・設定ファイルを編集
 - ./config.js
・ sprite タスクを sprite.js として保存
 - ./gulp_task/sprite.js
・watch タスクに追記
 - ./gulp_task/watch.js
watch.js (./gulp_task/watch.js)
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
spriteタスクで生成したのち、imageタスクで最適化
24
4. 動作確認をしよう
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
25
http://excode.jp
4. 動作確認をしよう
Windows の方 Mac の方
$ gulp
[15:38:32] Starting 'default'...
[15:38:32] Finished 'default' after 10 ms
gulp タスクを実行してみます
> gulp
[15:38:32] Starting 'default'...
[15:38:32] Finished 'default' after 10 ms
gulp タスクを実行してみます
watch モードに入りました
動作確認のため、watch モードに入ります
gulp
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
26
http://excode.jp
4. 動作確認をしよう
develop/sprite ディレクトリに画像を追加してみてください
Windows の方 Mac の方
$ gulp sass:watch
[22:34:19] Starting 'default'...
[22:34:19] Finished 'default' after 10 ms
[22:34:42] Starting 'sprite'...
[22:34:42] Finished 'sprite' after 155 ms
[22:34:42] Starting 'image'...
[22:34:42] Starting 'sass'...
[22:34:42] Finished 'sass' after 8.27 ms
[22:34:45] gulp-imagemin: Minified 2 images
(saved 203.96 kB - 74.5%)
[22:34:45] Finished 'image' after 2.28 s
gulp sass:watch タスク
> gulp sass:watch
[22:34:19] Starting 'default'...
[22:34:19] Finished 'default' after 10 ms
[22:34:42] Starting 'sprite'...
[22:34:42] Finished 'sprite' after 155 ms
[22:34:42] Starting 'image'...
[22:34:42] Starting 'sass'...
[22:34:42] Finished 'sass' after 8.27 ms
[22:34:45] gulp-imagemin: Minified 2 images
(saved 203.96 kB - 74.5%)
[22:34:45] Finished 'image' after 2.28 s
gulp sass:watch タスク
意図した通り動作していればOKです
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
27
5. Sassファイルの使い方
http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
28
http://excode.jp
5. Sassファイルの使い方
style.sass (./develop/sass/style.sass)
LOGO
my-sprite.png (./html/images/my-sprite.png)
logo.png
↓
$logo
right.png
↓
$right
cycle.png
↓
$cycle
保存したファイル名が Sass 内の変数名になります
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
29
http://excode.jp
5. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
style.sass (./develop/sass/style.sass)
LOGO
my-sprite.png (./html/images/my-sprite.png)
logo.png
↓
$logo
right.png
↓
$right
cycle.png
↓
$cycle
保存したファイル名が Sass 内の変数名になります
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
30
http://excode.jp
5. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
style.sass (./develop/sass/style.sass)
.sprite {
background-image: url('../images/my-sprite.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-
pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution:
1.5dppx) {
.sprite {
background-image: url('../images/my-sprite@2x.png');
-webkit-background-size: 204px 476px;
background-size: 204px 476px;
}
}
.logo-mark {
background-position: -2px -274px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 200px;
height: 200px;
}
style.css (./home/css/style.sass)
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
31
http://excode.jp
5. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
style.sass (./develop/sass/style.sass)
.sprite {
background-image: url('../images/my-sprite.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-
pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution:
1.5dppx) {
.sprite {
background-image: url('../images/my-sprite@2x.png');
-webkit-background-size: 204px 476px;
background-size: 204px 476px;
}
}
.logo-mark {
background-position: -2px -274px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 200px;
height: 200px;
}
style.css (./home/css/style.sass)
この状態では background-image の
指定が効いていません
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
32
http://excode.jp
5. Sassファイルの使い方
@import sprite
.logo-mark
@extend .sprite
+sprite($logo)
style.sass (./develop/sass/style.sass)
生成されれいる .sprite
クラスを読み込みます
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
33
http://excode.jp
5. Sassファイルの使い方
@import sprite
.logo-mark
@extend .sprite
+sprite($logo)
style.sass (./develop/sass/style.sass)
.sprite, .logo-mark {
background-image: url('../images/my-sprite.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-
pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution:
1.5dppx) {
.sprite {
background-image: url('../images/my-sprite@2x.png');
-webkit-background-size: 204px 476px;
background-size: 204px 476px;
}
}
.logo-mark {
background-position: -2px -274px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 200px;
height: 200px;
}
style.css (./home/css/style.sass)
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
34
http://excode.jp
5. Sassファイルの使い方
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>hello</h2>
<div class="logo-mark"></div>
</body>
</html>
index.html (./html/index.html)
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
35
http://excode.jp
5. Sassファイルの使い方
この後は position: absolute; など、
使いやすい形で利用してください
東区フロントエンド勉強会 2015年 第2回 追加資料
第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
36
http://excode.jp
お疲れ様でした
東区フロントエンド勉強会 2015年 第2回 追加資料

Contenu connexe

Tendances

第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編ksimoji
 
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advancedJjug 20140430 gradle_advanced
Jjug 20140430 gradle_advancedMasatoshi Hayashi
 
Spring in-summer-gradle-hands on-withanswers
Spring in-summer-gradle-hands on-withanswersSpring in-summer-gradle-hands on-withanswers
Spring in-summer-gradle-hands on-withanswersTakuma Watabiki
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方Yuta Matsumura
 
Gradleどうでしょう
GradleどうでしょうGradleどうでしょう
GradleどうでしょうTakuma Watabiki
 
OSS Product feat. Gradle
OSS Product feat. GradleOSS Product feat. Gradle
OSS Product feat. GradleYasuharu Nakano
 
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7Sea Mountain
 
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略Hiroshi SHIBATA
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_introNobuhiro Sue
 
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1Y Watanabe
 
OpenShift from Easy way to Hard ? Way
OpenShift from Easy way to Hard ? WayOpenShift from Easy way to Hard ? Way
OpenShift from Easy way to Hard ? Wayロフト くん
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化Gosuke Miyashita
 
Jjug 20140430 gradle_basic
Jjug 20140430 gradle_basicJjug 20140430 gradle_basic
Jjug 20140430 gradle_basicTakuma Watabiki
 
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所Y Watanabe
 
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境Masashi Shinbara
 
Gradle入門
Gradle入門Gradle入門
Gradle入門orekyuu
 
Spring Rooで作るGWTアプリケーション
Spring Rooで作るGWTアプリケーションSpring Rooで作るGWTアプリケーション
Spring Rooで作るGWTアプリケーションToshiaki Maki
 

Tendances (20)

第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
 
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話 Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
 
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advancedJjug 20140430 gradle_advanced
Jjug 20140430 gradle_advanced
 
Spring in-summer-gradle-hands on-withanswers
Spring in-summer-gradle-hands on-withanswersSpring in-summer-gradle-hands on-withanswers
Spring in-summer-gradle-hands on-withanswers
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
 
Gradleどうでしょう
GradleどうでしょうGradleどうでしょう
Gradleどうでしょう
 
OSS Product feat. Gradle
OSS Product feat. GradleOSS Product feat. Gradle
OSS Product feat. Gradle
 
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7
 
Gradle handson
Gradle handsonGradle handson
Gradle handson
 
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_intro
 
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
 
OpenShift from Easy way to Hard ? Way
OpenShift from Easy way to Hard ? WayOpenShift from Easy way to Hard ? Way
OpenShift from Easy way to Hard ? Way
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
 
Jjug 20140430 gradle_basic
Jjug 20140430 gradle_basicJjug 20140430 gradle_basic
Jjug 20140430 gradle_basic
 
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
 
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
 
Gradle入門
Gradle入門Gradle入門
Gradle入門
 
Spring Rooで作るGWTアプリケーション
Spring Rooで作るGWTアプリケーションSpring Rooで作るGWTアプリケーション
Spring Rooで作るGWTアプリケーション
 

En vedette

gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編Toshimichi Suekane
 
Kaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたKaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたToshimichi Suekane
 
GitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようGitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようToshimichi Suekane
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編Toshimichi Suekane
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたHayashi Yuichi
 

En vedette (6)

gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
 
Kaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたKaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いた
 
GitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようGitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみよう
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
 
CSS Living StyleGuide
CSS Living StyleGuideCSS Living StyleGuide
CSS Living StyleGuide
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 

Similaire à Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料

jsCafe v13 Grunt
jsCafe v13 GruntjsCafe v13 Grunt
jsCafe v13 GruntShinya Sugo
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!leverages_event
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
普段の開発を少しだけ便利にする3つのレシピ
普段の開発を少しだけ便利にする3つのレシピ普段の開発を少しだけ便利にする3つのレシピ
普段の開発を少しだけ便利にする3つのレシピTakuma Maruyama
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!Shinpei Ohtani
 
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例Shigeru UCHIYAMA
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application FrameworkLearningTech
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersShota TAMURA
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門Masahito Zembutsu
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力ThinReports
 
Starting qt5beta at_raspberry_pi Qtnagoya#6
Starting qt5beta at_raspberry_pi Qtnagoya#6Starting qt5beta at_raspberry_pi Qtnagoya#6
Starting qt5beta at_raspberry_pi Qtnagoya#6Kazuo Asano (@kazuo_asa)
 
Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Sea Mountain
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Nextdynamis
 
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜Naohiro Yoshida
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
Web制作のアレコレ
Web制作のアレコレWeb制作のアレコレ
Web制作のアレコレregret raym
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Javaどこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷JavaToshiaki Maki
 

Similaire à Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料 (20)

jsCafe v13 Grunt
jsCafe v13 GruntjsCafe v13 Grunt
jsCafe v13 Grunt
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
 
Ansible2.0と実用例
Ansible2.0と実用例Ansible2.0と実用例
Ansible2.0と実用例
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
普段の開発を少しだけ便利にする3つのレシピ
普段の開発を少しだけ便利にする3つのレシピ普段の開発を少しだけ便利にする3つのレシピ
普段の開発を少しだけ便利にする3つのレシピ
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application Framework
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
 
Starting qt5beta at_raspberry_pi Qtnagoya#6
Starting qt5beta at_raspberry_pi Qtnagoya#6Starting qt5beta at_raspberry_pi Qtnagoya#6
Starting qt5beta at_raspberry_pi Qtnagoya#6
 
Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Next
 
scala-kaigi1-sbt
scala-kaigi1-sbtscala-kaigi1-sbt
scala-kaigi1-sbt
 
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Web制作のアレコレ
Web制作のアレコレWeb制作のアレコレ
Web制作のアレコレ
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Javaどこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
 

Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料

  • 1. gulp + sass で目指せ倍速コーディング 東区フロントエンド勉強会 2015年 第2回 追加資料 1 フロントエンド エンジニア 末包 俊道(すえかね) http://excode.jp エクスコード株式会社 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 2. 東区フロントエンド勉強会 2015年 第2回 追加資料 2 Retina対応 CSSスプライトを自動化しよう(sprity版) http://excode.jp 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 3. 第8章 CSSスプライトを自動化しよう(sprity版) 1. 概要 2. 環境準備 3. タスクを作ろう 4. 動作確認をしよう 5. Sassファイルの使い方 3 http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 4. 4 1. 概要 http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 6. 6 http://excode.jp 作業用のディレクトリに保存 → 最適化したCSSスプライト画像を生成 ./develop/sprite ./develop/images LOGO ./html/images 画像生成 最適化 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版) logo.png right.png load.png LOGO my-sprite.png LOGO my-sprite@2x.png LOGO my-sprite.png LOGO my-sprite@2x.png
  • 7. 7 2. 環境準備 http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 8. Mac OSX 1. Xcode(コマンドラインツールが必要) Windows 1. Python 2.7.x (3.xはNG) 2. Visual Studio Community 2015 3. Visual C++ 2015 Tools for Windows Desktop 8 http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版) 2. 環境準備
  • 9. 9 http://excode.jp 1. Mac App Store でXcodeを入手 2. 一度起動します 3-a. GUIからコマンドラインツールをインストール   Xcode > preference… > Downloads > Command Line Tools 3-b. ターミナルからコマンドラインツールをインストール   インストール   $ xcode-select —install   インストール完了しているか確認   $ gcc --version 環境構築手順(Mac) 2. 環境準備 - Mac 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 10. 10 http://excode.jp 1. Python をインストール
 Python https://www.python.org/ ※インストール時には必ず[Add python.exe to Path]で[Will be installed on local hard drive]を選択しておく 
 コマンドプロンプトで確認 > python --version 環境構築手順(Windows) 2. 環境準備 - Windows 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 11. 11 http://excode.jp 2. Visual Studio をインストール
 Visual Studio Community 2015 https://www.visualstudio.com/ → Download Community 2015 ※インストールにかなり時間がかかります ※インストール時にIE10以上を要求されます ※Micrsoft account が必要です 環境構築手順(Windows) 2. 環境準備 - Windows 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 12. 12 http://excode.jp 3. Visual C++ 2015 Tools をインストール
 ・Visual Studio Community 2015 を起動 ・サイドから New Project… を選択 ・Install Visual C++ 2015 Tools for Windows  Desktop を選択 ・OKを押してインストール実行
 ・Visual Studio Community 2015 を閉じるよう  指示されるので終了する
 ※インストールにかなり時間がかかります 環境構築手順(Windows) 2. 環境準備 - Windows 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 13. 13 3. タスクを作ろう http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 14. 14 http://excode.jp ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js 作業手順 sprite.js (./gulp_task/sprite.js) var gulp = require('gulp'); var conf = require('../config'); gulp.task('sass:watch', function () { gulp.watch(conf.sass.src, ['sass']); }); … (省略) watch.js (./gulp_task/watch.js) // 開発用ディレクトリ var src = './develop'; … (省略) config.js 3. タスクを作ろう 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 15. 15 http://excode.jp ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js 作業手順 sprite.js (./gulp_task/sprite.js) var gulp = require('gulp'); var conf = require('../config'); gulp.task('sass:watch', function () { gulp.watch(conf.sass.src, ['sass']); }); … (省略) watch.js (./gulp_task/watch.js) // 開発用ディレクトリ var src = './develop'; … (省略) config.js 3. タスクを作ろう 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 17. 17 http://excode.jp Windows の方 Mac の方 > npm install sprity —save-dev -g css-sprite を追加 $ npm install sprity —save-dev -g css-sprite を追加 > npm install sprity-sass --save-dev sprity-sass を追加 $ npm install sprity-sass --save-dev sprity-sass を追加 3. タスクを作ろう 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版) > npm install gulp-if --save-dev gulp-if を追加 $ npm install gulp-if --save-dev gulp-if を追加
  • 18. 18 http://excode.jp ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js 作業手順 sprite.js (./gulp_task/sprite.js) var gulp = require('gulp'); var conf = require('../config'); gulp.task('sass:watch', function () { gulp.watch(conf.sass.src, ['sass']); }); … (省略) watch.js (./gulp_task/watch.js) // 開発用ディレクトリ var src = './develop'; … (省略) config.js 3. タスクを作ろう 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 19. 19 http://excode.jp Mac の方 $ mkdir develop/sprite sprite ディレクトリを作成 > mkdir developsprite sprite ディレクトリを作成 3. タスクを作ろう $ touch gulp_task/sprite.js gulp_task 内に sprite.js ファイルを作成 > type nul gulp_tasksprite.js gulp_task 内に sprite.js ファイルを作成 ついでに sprite.js も作成します 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 20. 20 http://excode.jp lesson ├ .csscomb.json │ ├ config.js ├ develop │ ├ images │ ├ sass │ │ └ style.sass │ └ sprite ←今回追加した作業用ディレクトリ │ ├ gulp_task │ ├ image.js │ ├ sass.js │ ├ sprite.js │ └ watch.js │ ├ gulpfile.js │ ├ html │ ├ css │ │ └ style.css │ ├ images ←タスク実行時に自動で生成されます │ └ index.html 3. タスクを作ろう 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 21. 21 http://excode.jp 3. タスクを作ろう var src = './develop'; var dest = './html'; module.exports = { src: src, dest: dest, sass: { src: src + '/sass/**/*.sass', dest: dest + '/css', }, image: { src: src + '/images/**/*', dest: dest + '/images', }, sprite: { src: src +'/sprite/*.png', // 監視・対象ファイル dest: src +'/images', // スプライト画像出力先 sass: src +'/sass', // Sassディレクトリ style: '_sprite.sass', // Sassファイル名 name: 'my-sprite', // 画像ファイル名 prefix: 'sprite', // mixinプレフィクス cssPath: '../images/', // CSS内のパス processor: 'sprity-sass', // sprity-sassを使用 margin: 0, // 画像間のマージン type: 'sass', // Sassの種類 }, }; config.js 作業手順 ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 22. 22 http://excode.jp 3. タスクを作ろう 作業手順 ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js var gulp = require('gulp'); var gulpif = require('gulp-if'); var sprity = require('sprity'); var conf = require('../config'); gulp.task('sprite', function () { return sprity.src({ src: conf.sprite.src, name: conf.sprite.name, style: conf.sprite.style, cssPath: conf.sprite.cssPath, processor: conf.sprite.processor, prefix: conf.sprite.prefix, margin: conf.sprite.margin, 'style-type': conf.sprite.type, 'dimension': [{ ratio: 1, dpi: 72 }, { ratio: 2, dpi: 192 }], }) .pipe( gulpif('*.png', gulp.dest(conf.sprite.dest), gulp.dest(conf.sprite.sass) ) ) }); sprite.js (./gulp_task/sprite.js) 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版) sprityの公式サイトでは分かりにくい部分があるので、 あらかじめサンプルを用意しました
  • 23. 23 http://excode.jp 3. タスクを作ろう var gulp = require('gulp'); var watch = require('gulp-watch'); var conf = require('../config'); gulp.task('sass:watch', function () { … (省略) … }); gulp.task('image:watch', function () { watch(conf.image.src, function () { gulp.start(['image']); }); }); gulp.task('sprite:watch', function () { watch(conf.sprite.src, function () { gulp.start(['sprite']); }); watch(conf.image.src, function () { gulp.start(['image']); }); }); gulp.task('default', function() { watch(conf.sass.src, function () { gulp.start(['sass']); }); watch(conf.image.src, function () { gulp.start(['image']); }); watch(conf.sprite.src, function () { gulp.start(['sprite']); }); }); 作業手順 ・必要なプラグインをインストール ・作業用ディレクトリを作成  - ./sprite ・設定ファイルを編集  - ./config.js ・ sprite タスクを sprite.js として保存  - ./gulp_task/sprite.js ・watch タスクに追記  - ./gulp_task/watch.js watch.js (./gulp_task/watch.js) 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版) spriteタスクで生成したのち、imageタスクで最適化
  • 24. 24 4. 動作確認をしよう http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 25. 25 http://excode.jp 4. 動作確認をしよう Windows の方 Mac の方 $ gulp [15:38:32] Starting 'default'... [15:38:32] Finished 'default' after 10 ms gulp タスクを実行してみます > gulp [15:38:32] Starting 'default'... [15:38:32] Finished 'default' after 10 ms gulp タスクを実行してみます watch モードに入りました 動作確認のため、watch モードに入ります gulp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 26. 26 http://excode.jp 4. 動作確認をしよう develop/sprite ディレクトリに画像を追加してみてください Windows の方 Mac の方 $ gulp sass:watch [22:34:19] Starting 'default'... [22:34:19] Finished 'default' after 10 ms [22:34:42] Starting 'sprite'... [22:34:42] Finished 'sprite' after 155 ms [22:34:42] Starting 'image'... [22:34:42] Starting 'sass'... [22:34:42] Finished 'sass' after 8.27 ms [22:34:45] gulp-imagemin: Minified 2 images (saved 203.96 kB - 74.5%) [22:34:45] Finished 'image' after 2.28 s gulp sass:watch タスク > gulp sass:watch [22:34:19] Starting 'default'... [22:34:19] Finished 'default' after 10 ms [22:34:42] Starting 'sprite'... [22:34:42] Finished 'sprite' after 155 ms [22:34:42] Starting 'image'... [22:34:42] Starting 'sass'... [22:34:42] Finished 'sass' after 8.27 ms [22:34:45] gulp-imagemin: Minified 2 images (saved 203.96 kB - 74.5%) [22:34:45] Finished 'image' after 2.28 s gulp sass:watch タスク 意図した通り動作していればOKです 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 27. 27 5. Sassファイルの使い方 http://excode.jp 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 28. 28 http://excode.jp 5. Sassファイルの使い方 style.sass (./develop/sass/style.sass) LOGO my-sprite.png (./html/images/my-sprite.png) logo.png ↓ $logo right.png ↓ $right cycle.png ↓ $cycle 保存したファイル名が Sass 内の変数名になります 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 29. 29 http://excode.jp 5. Sassファイルの使い方 @import sprite .logo-mark +sprite($logo) style.sass (./develop/sass/style.sass) LOGO my-sprite.png (./html/images/my-sprite.png) logo.png ↓ $logo right.png ↓ $right cycle.png ↓ $cycle 保存したファイル名が Sass 内の変数名になります 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 30. 30 http://excode.jp 5. Sassファイルの使い方 @import sprite .logo-mark +sprite($logo) style.sass (./develop/sass/style.sass) .sprite { background-image: url('../images/my-sprite.png'); } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device- pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .sprite { background-image: url('../images/my-sprite@2x.png'); -webkit-background-size: 204px 476px; background-size: 204px 476px; } } .logo-mark { background-position: -2px -274px; background-repeat: no-repeat; overflow: hidden; display: block; width: 200px; height: 200px; } style.css (./home/css/style.sass) 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 31. 31 http://excode.jp 5. Sassファイルの使い方 @import sprite .logo-mark +sprite($logo) style.sass (./develop/sass/style.sass) .sprite { background-image: url('../images/my-sprite.png'); } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device- pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .sprite { background-image: url('../images/my-sprite@2x.png'); -webkit-background-size: 204px 476px; background-size: 204px 476px; } } .logo-mark { background-position: -2px -274px; background-repeat: no-repeat; overflow: hidden; display: block; width: 200px; height: 200px; } style.css (./home/css/style.sass) この状態では background-image の 指定が効いていません 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 32. 32 http://excode.jp 5. Sassファイルの使い方 @import sprite .logo-mark @extend .sprite +sprite($logo) style.sass (./develop/sass/style.sass) 生成されれいる .sprite クラスを読み込みます 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 33. 33 http://excode.jp 5. Sassファイルの使い方 @import sprite .logo-mark @extend .sprite +sprite($logo) style.sass (./develop/sass/style.sass) .sprite, .logo-mark { background-image: url('../images/my-sprite.png'); } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device- pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .sprite { background-image: url('../images/my-sprite@2x.png'); -webkit-background-size: 204px 476px; background-size: 204px 476px; } } .logo-mark { background-position: -2px -274px; background-repeat: no-repeat; overflow: hidden; display: block; width: 200px; height: 200px; } style.css (./home/css/style.sass) 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 34. 34 http://excode.jp 5. Sassファイルの使い方 <html> <head> <link rel="stylesheet" href="./css/style.css"> </head> <body> <h2>hello</h2> <div class="logo-mark"></div> </body> </html> index.html (./html/index.html) 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)
  • 35. 35 http://excode.jp 5. Sassファイルの使い方 この後は position: absolute; など、 使いやすい形で利用してください 東区フロントエンド勉強会 2015年 第2回 追加資料 第8章 Retina対応 CSSスプライトを自動化しよう(sprity版)