１．gulpfile.js を分割して管理しよう gulp への依存度が高くなると、gulpfile.js の記述が増えどこに何の処理を入れたかわかりづらくなり管理が困難になります。 そこで今回はまず gulpfile.js を分割して管理する方法を導入し、今後追加するタスクを容易に管理できるようにします。 また gulpfile.js を別プロジェクトに流用できるよう、入力元た出力先などをオブジェクト化し一括管理できるようにします。 ２．画像を自動で最適化しよう 通信量の削減や表示速度向上のための画像最適化、TinyPNG (https://tinypng.com/) などで都度圧縮していませんか？ 今回は作業時間の削減ということが主テーマですので、画像の圧縮も自動化したいと思います。任意のフォルダに画像を保存すると、出力先のディレクトリに最適化画像を生成するという一連の流れを構築します。 ３．CSSスプライトを使ってみよう 皆さんはCSSスプライトを活用していますか？ 最近ではレスポンシブ案件が増え、Retina対応用のCSSスプライトを別途用意する必要があり大きな負担になっています。またプロジェクト初期の段階ではきっちり作成していても、締め切りが近づいてくるとつい作業効率優先しがちです。 この点を解決するため、今回は任意のフォルダに画像を保存すると、出力先のディレクトリにCSSスプライト画像を生成するという一連の流れを構築します。さらに画像の最適化処理も間に入れたいと思います。 CSSスプライト画像が生成されると同時にインクルード用のSassファイルが自動生成されますので、これを活用して効率良くSassコーディングをします。

1. gulp + sass で目指せ倍速コーディング
東区フロントエンド勉強会 2015年 第2回
gulpfile.js の分割管理と画像作成の効率化
1
フロントエンド エンジニア
末包 俊道（すえかね）
http://excode.jp
エクスコード株式会社
第４章 gulpfile.js の分割管理
第５章 画像を自動で最適化しよう
第６章 default タスクで一括 watch
第７章 CSSスプライトを自動化しよう

2. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
2
第４章 gulpfile.js の分割管理
http://excode.jp

3. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
1. 現状の確認
2. 設定ファイルを作ろう (config.js)
3. 設定ファイルを読み込もう
4. ここまでの動作確認をしよう
5. タスクを別ファイルで管理しよう
6. 動作確認をしよう
3
http://excode.jp
第４章 gulofile.js の分割管理

4. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
4
1. 現状の確認
http://excode.jp

5. 東区フロントエンド勉強会 2015年 第1回
1. 現状の確認
5
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理

6. 東区フロントエンド勉強会 2015年 第1回
1. 現状の確認
6
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
案件に合わせて簡単に
変更できるようにしたい

7. 東区フロントエンド勉強会 2015年 第1回
1. 現状の確認
7
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
案件に合わせて簡単に
変更できるようにしたい
設定ファイルを作成し、
一括管理しよう

8. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
8
2. 設定ファイルを作ろう (config.js)
http://excode.jp

9. 東区フロントエンド勉強会 2015年 第1回
2. 設定ファイルを作ろう(config.js)
9
http://excode.jp
第４章 gulofile.js の分割管理
> cd Desktoplesson
または
> cd C:Usersユーザー名Desktoplesson
gulpfile.js のあるディレクトリに移動
Windows の方
$ cd ~/Desktop/lesson
gulpfile.js のあるディレクトリに移動
Mac の方
$ touch config.js
config.js を作成します
> type nul > config.js
config.js を作成します

10. 東区フロントエンド勉強会 2015年 第1回
10
lesson
├ .csscomb.json
│
├ config.js ←今回追加した設定ファイル
├ develop
│ └ sass
│ └ style.sass
│
├ gulpfile.js
│
├ html
│ ├ css
│ │ └ style.css
│ │
│ └ index.html
│
├ node_modules
└ package.json
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)

11. 東区フロントエンド勉強会 2015年 第1回
11
// 開発用ディレクトリ
// 納品用ディレクトリ
// データ受け渡し用のオブジェクトを作成
// Sass の設定
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
・開発用ディレクトリのパス
・納品用ディレクトリのパス
・データ受け渡し用オブジェクト
・sass の設定
設定したいこと

12. 東区フロントエンド勉強会 2015年 第1回
12
// 開発用ディレクトリ
// 納品用ディレクトリ
// データ受け渡し用のオブジェクトを作成
// Sass の設定
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ
設定したいこと

13. 東区フロントエンド勉強会 2015年 第1回
13
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
// データ受け渡し用のオブジェクトを作成
// Sass の設定
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
設定したいこと
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ
※ src … source (元データ)

14. 東区フロントエンド勉強会 2015年 第1回
14
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
var dest = './html';
// データ受け渡し用のオブジェクトを作成
// Sass の設定
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
設定したいこと
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ
※ dest … destination (出力先)

15. 東区フロントエンド勉強会 2015年 第1回
15
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
設定したいこと
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
var dest = './html';
// データ受け渡し用のオブジェクトを作成
module.exports = {
// Sass の設定
};

16. 東区フロントエンド勉強会 2015年 第1回
16
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
var dest = './html';
// データ受け渡し用のオブジェクトを作成
module.exports = {
// Sass の設定
};
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
例）オブジェクトの書式
object = {
tanaka: {
city: 'Fukuoka',
phone: '090-xxxx-xxxx',
age: 25,
gender: 'male'
}
};
例）田中さんの性別
object.tanaka.age
// male

17. 東区フロントエンド勉強会 2015年 第1回
17
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
var dest = './html';
// データ受け渡し用のオブジェクトを作成
module.exports = {
// ディレクトリの情報を受け渡す
src: src,
dest: dest,
// Sass の設定
};
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
設定したいこと
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ

18. 東区フロントエンド勉強会 2015年 第1回
18
// 開発用ディレクトリ
var src = './develop';
// 納品用ディレクトリ
var dest = './html';
// データ受け渡し用のオブジェクトを作成
module.exports = {
// ディレクトリの情報を受け渡す
src: src,
dest: dest,
// Sass の設定
sass: {
src: src + '/sass/**/*.sass',
dest: dest + '/css',
}
};
config.js
http://excode.jp
第４章 gulofile.js の分割管理
2. 設定ファイルを作ろう(config.js)
設定したいこと
・開発用ディレクトリのパス
- ./develop
・納品用ディレクトリのパス
- ./html
・データ受け渡し用オブジェクト
・Sass の設定
- Sass ファイル（監視対象）
- CSS 出力ディレクトリ

19. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
19
3. 設定ファイルを読み込もう
http://excode.jp

20. 東区フロントエンド勉強会 2015年 第1回
20
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
3. 設定ファイルを読み込もう
設定ファイルを読み込みます
var conf = require('./config');

21. 東区フロントエンド勉強会 2015年 第1回
21
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
元データ（監視対象）の
.sass ファイル
3. 設定ファイルを読み込もう
値を書き換えます
出力先ディレクトリ
conf.sass.dest
conf.sass.src

22. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
22
4. ここまでの動作確認をしよう
http://excode.jp

23. 東区フロントエンド勉強会 2015年 第1回
23
http://excode.jp
第４章 gulofile.js の分割管理
4. ここまでの動作確認をしよう
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
watch モードに入りました
動作確認のため、watch モードに入ります
gulp sass:watch

24. 東区フロントエンド勉強会 2015年 第1回
24
http://excode.jp
第４章 gulofile.js の分割管理
4. ここまでの動作確認をしよう
style.sass に追記
前回までと同じように style.sass に変更を加え保存してみてください
h2
color: blue
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
CSSファイルが正しく更新されていれば完了です。

25. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
25
5. タスクを別ファイルで管理しよう
http://excode.jp

26. 東区フロントエンド勉強会 2015年 第1回
26
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
作業手順
5. タスクを別ファイルで管理しよう
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

27. 東区フロントエンド勉強会 2015年 第1回
27
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
作業手順
5. タスクを別ファイルで管理しよう
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

28. 東区フロントエンド勉強会 2015年 第1回
28
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
一旦、watch から抜けて作業に入ります
Windows の方 Mac の方
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
$
ctrl + c を押し、一旦タスクを終了します
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
>
ctrl + c を押し、一旦タスクを終了します

29. 東区フロントエンド勉強会 2015年 第1回
29
指定したディレクトリ内の .js ファイルを自動で読み込みます
require-dirhttps://www.npmjs.com/package/require-dir
http://excode.jp
5. タスクを別ファイルで管理しよう
第４章 gulofile.js の分割管理

30. 東区フロントエンド勉強会 2015年 第1回
30
Windows の方 Mac の方
> npm install require-dir --save-dev
require-dir を追加
$ npm install require-dir --save-dev
require-dir を追加
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
require-dir をインストールします

31. 東区フロントエンド勉強会 2015年 第1回
31
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
作業手順
5. タスクを別ファイルで管理しよう
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

32. 東区フロントエンド勉強会 2015年 第1回
32
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js
作業手順

33. 東区フロントエンド勉強会 2015年 第1回
33
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
タスク用 gulp_task ディレクトリを作成
Windows の方 Mac の方
$ mkdir gulp_task
gulp_task ディレクトリを作成
> mkdir gulp_task
gulp_task ディレクトリを作成
$ touch gulp_task/sass.js
$ touch gulp_task/watch.js
gulp_task 内に sass.js ファイルを作成
> type nul gulp_tasksass.js
> type nul gulp_taskwatch.js
gulp_task 内に sass.js ファイルを作成
ついでに sass,js watch.js も作成します

34. 東区フロントエンド勉強会 2015年 第1回
34
lesson
├ .csscomb.json
│
├ config.js
├ develop
│ └ sass
│ └ style.sass
│
├ gulp_task ←今回追加したタスク用ディレクトリ
│ ├ sass.js
│ └ watch.js
│
├ gulpfile.js
│
├ html
│ ├ css
│ │ └ style.css
│ │
│ └ index.html
│
├ node_modules
└ package.json
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう

35. 東区フロントエンド勉強会 2015年 第1回
35
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('./config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js
作業手順

36. 東区フロントエンド勉強会 2015年 第1回
36
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var conf = require('../config');
gulp.task('sass', function () {
gulp.src(conf.sass.src)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9',
'ie 10', 'ie 11', 'opera 12.1',
'firefox 14', 'ios 6',
'android 2.1'],
cascade: false
}))
.pipe(gulp.dest(conf.sass.dest));
});
sass.js (./gulp_task/sass.js)
作業手順
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

37. 東区フロントエンド勉強会 2015年 第1回
37
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
gulp.task('sass:watch', function () {
gulp.watch(conf.sass.src, ['sass']);
});
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
作業手順
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

38. 東区フロントエンド勉強会 2015年 第1回
38
'use strict';
var requireDir = require('require-dir');
var dir = requireDir('./gulp_task');
gulpfile.js
http://excode.jp
第４章 gulofile.js の分割管理
5. タスクを別ファイルで管理しよう
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)
作業手順
・require-dir をインストール
・requireDir を定義
- ./gulp_task
・外部タスク用ディレクトリを作成
- ./gulp_task
・sass タスクを sass.js として保存
- ./gulp_task/sass.js
・watch タスクを watch.js として保存
- ./gulp_task/watch.js

39. 東区フロントエンド勉強会 2015年 第1回
第４章 gulofile.js の分割管理
39
6. 動作確認をしよう
http://excode.jp

40. 東区フロントエンド勉強会 2015年 第1回
40
http://excode.jp
第４章 gulofile.js の分割管理
6. 動作確認をしよう
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
watch モードに入りました
動作確認のため、watch モードに入ります
gulp sass:watch

41. 東区フロントエンド勉強会 2015年 第1回
41
http://excode.jp
第４章 gulofile.js の分割管理
6. 動作確認をしよう
style.sass に追記
style.sass に変更を加え保存してみてください
h2
color: pink
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
CSSファイルが正しく更新されていれば完了です。

42. 東区フロントエンド勉強会 2015年 第1回
第５章 画像を自動で最適化しよう
42
第５章 画像を自動で最適化しよう
http://excode.jp

43. 東区フロントエンド勉強会 2015年 第1回
第５章 画像を自動で最適化しよう
1. 概要
2. タスクを作ろう
3. 動作確認をしよう
43
http://excode.jp
第５章 画像を自動で最適化しよう

44. 東区フロントエンド勉強会 2015年 第1回
44
1. 概要
http://excode.jp
第５章 画像を自動で最適化しよう

45. 東区フロントエンド勉強会 2015年 第1回
45
作業用のディレクトリに保存
http://excode.jp
第５章 画像を自動で最適化しよう
最適化された画像が書き出される
作業用ディレクトリ 最適化(納品用)ディレクトリ
JPEG (93KB)
JPEG (65KB)
JPEG (70KB)
JPEG (48KB)
PNG (92KB)
PNG (25KB)

46. 東区フロントエンド勉強会 2015年 第1回
46
2. タスクを作ろう
http://excode.jp
第５章 画像を自動で最適化しよう

47. 東区フロントエンド勉強会 2015年 第1回
47
http://excode.jp
第５章 画像を自動で最適化しよう
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
image.js (./gulp_task/image.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
2. タスクを作ろう

48. 東区フロントエンド勉強会 2015年 第1回
48
http://excode.jp
第５章 画像を自動で最適化しよう
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
image.js (./gulp_task/image.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
2. タスクを作ろう

49. 東区フロントエンド勉強会 2015年 第1回
49
http://excode.jp
第５章 画像を自動で最適化しよう
OptiPNG よりも高い圧縮率で PNG 画像を圧縮してくれます
gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin
2. タスクを作ろう
imagemin-pngquant
https://www.npmjs.com/package/imagemin-pngquant
OptiPNG を使い画像を圧縮してくれます
変更があったファイルのみを gulp のストリームに流します
gulp-changed
https://www.npmjs.com/package/gulp-changed
ファイルの追加も監視対象に含めます
gulp-watch
https://www.npmjs.com/package/gulp-watch

50. 東区フロントエンド勉強会 2015年 第1回
50
http://excode.jp
第５章 画像を自動で最適化しよう
2. タスクを作ろう
Windows の方 Mac の方
> npm install gulp-imagemin --save-dev
gulp-imagemin を追加
$ npm install gulp-imagemin --save-dev
gulp-imagemin を追加
必要なプラグインをインストールします
> npm install imagemin-pngquant --save-dev
imagemin-pngquant を追加
$ npm install imagemin-pngquant --save-dev
imagemin-pngquant を追加
> npm install gulp-changed --save-dev
gulp-changed を追加
$ npm install gulp-changed --save-dev
gulp-changed を追加
watch に入っている方は抜けてください
> npm install gulp-watch --save-dev
gulp-watch を追加
$ npm install gulp-watch --save-dev
gulp-watch を追加

51. 東区フロントエンド勉強会 2015年 第1回
51
http://excode.jp
第５章 画像を自動で最適化しよう
image.js (./gulp_task/image.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)
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
2. タスクを作ろう
// 開発用ディレクトリ
var src = './develop';
… (省略)
config.js

52. 東区フロントエンド勉強会 2015年 第1回
52
http://excode.jp
第５章 画像を自動で最適化しよう
Windows の方 Mac の方
$ mkdir develop/images
images ディレクトリを作成
> mkdir developimages
images ディレクトリを作成
2. タスクを作ろう
$ touch gulp_task/image.js
gulp_task 内に sass.js ファイルを作成
> type nul gulp_taskimage.js
gulp_task 内に sass.js ファイルを作成
ついでに image.js も作成します

53. 東区フロントエンド勉強会 2015年 第1回
53
http://excode.jp
第５章 画像を自動で最適化しよう
2. タスクを作ろう
lesson
├ .csscomb.json
│
├ config.js
├ develop
│ ├ images ←今回追加した作業用ディレクトリ
│ └ sass
│ └ style.sass
│
├ gulp_task
│ ├ image.js
│ ├ sass.js
│ └ watch.js
│
├ gulpfile.js
│
├ html
│ ├ css
│ │ └ style.css
│ ├ images ←タスク実行時に自動で生成されます
│ └ index.html
│
├ node_modules
└ package.json

54. 東区フロントエンド勉強会 2015年 第1回
54
http://excode.jp
第５章 画像を自動で最適化しよう
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/**/*',
dest: dest + '/sprite',
},
};
config.js
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
2. タスクを作ろう

55. 東区フロントエンド勉強会 2015年 第1回
55
http://excode.jp
第５章 画像を自動で最適化しよう
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var conf = require('../config');
gulp.task('image', function () {
return gulp.src(conf.image.src)
.pipe(plumber())
.pipe(changed(conf.image.dest))
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(conf.image.dest));
});
image.js (./gulp_task/image.js)
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
2. タスクを作ろう

56. 東区フロントエンド勉強会 2015年 第1回
56
http://excode.jp
第５章 画像を自動で最適化しよう
var gulp = require('gulp');
var watch = require('gulp-watch');
var conf = require('../config');
gulp.task('sass:watch', function () {
// gulp.watch(conf.sass.src, ['sass']);
watch(conf.sass.src, function () {
gulp.start(['sass']);
});
});
watch.js (./gulp_task/watch.js)
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
2. タスクを作ろう

57. 東区フロントエンド勉強会 2015年 第1回
57
http://excode.jp
第５章 画像を自動で最適化しよう
var gulp = require('gulp');
var watch = require('gulp-watch');
var conf = require('../config');
gulp.task('sass:watch', function () {
// gulp.watch(conf.sass.src, ['sass']);
watch(conf.sass.src, function () {
gulp.start(['sass']);
});
});
gulp.task('image:watch', function () {
watch(conf.image.src, function () {
gulp.start(['image']);
});
});
watch.js (./gulp_task/watch.js)
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./images
・設定ファイルを編集
- ./config.js
・image タスクを image.js として保存
- ./gulp_task/image.js
・gulp.watch を watch に変更
- ./gulp_task/watch.js
・watch タスクを watch.js に追記
- ./gulp_task/watch.js
作業手順
2. タスクを作ろう

58. 東区フロントエンド勉強会 2015年 第1回
58
3. 動作確認をしよう
http://excode.jp
第５章 画像を自動で最適化しよう

59. 東区フロントエンド勉強会 2015年 第1回
59
http://excode.jp
第５章 画像を自動で最適化しよう
3. 動作確認をしよう
Windows の方 Mac の方
$ gulp image:watch
[15:38:32] Starting 'image:watch'...
[15:38:32] Finished 'image:watch' after 10 ms
gulp sass:watch タスクを実行してみます
> gulp image:watch
[15:38:32] Starting 'image:watch'...
[15:38:32] Finished 'image:watch' after 10 ms
gulp sass:watch タスクを実行してみます
watch モードに入りました
動作確認のため、watch モードに入ります
gulp image:watch

60. 東区フロントエンド勉強会 2015年 第1回
60
http://excode.jp
第５章 画像を自動で最適化しよう
3. 動作確認をしよう
Windows の方 Mac の方
$ gulp image:watch
[15:38:32] Starting 'image:watch'...
[15:38:32] Finished 'image:watch' after 10 ms
[15:38:40] Starting 'image'…
[15:38:40] gulp-imagemin: Minified 1 image (saved 67.23 kB -
72.7%)
[15:38:40] Finished 'image' after 9.06 ms
> gulp image:watch
[15:38:32] Starting 'image:watch'...
[15:38:32] Finished 'image:watch' after 10 ms
[15:38:40] Starting 'image'…
[15:38:40] gulp-imagemin: Minified 1 image (saved 67.23 kB -
72.7%)
[15:38:40] Finished 'image' after 9.06 ms
wolf.png (92KB)
./develop/images
wolf.png (25KB)
./html/images
./develop/images
に画像を保存
./html/images
に最適化された画像が
生成されていればOK

61. 東区フロントエンド勉強会 2015年 第1回
61
第６章 default タスクで一括 watch
http://excode.jp
第６章 default タスクで一括 watch

62. 東区フロントエンド勉強会 2015年 第1回
第６章 default タスクで一括 watch
1. 概要
2. タスクを作ろう
3. 動作確認をしよう
62
http://excode.jp
第６章 default タスクで一括 watch

63. 東区フロントエンド勉強会 2015年 第1回
63
1. 概要
http://excode.jp
第６章 default タスクで一括 watch

64. 東区フロントエンド勉強会 2015年 第1回
64
http://excode.jp
Sass CSS
Sass も画像も全部監視対象にしたい
gulp
第６章 default タスクで一括 watch

65. 東区フロントエンド勉強会 2015年 第1回
65
2. タスクを作ろう
http://excode.jp
第６章 default タスクで一括 watch

66. 東区フロントエンド勉強会 2015年 第1回
66
http://excode.jp
var gulp = require('gulp');
var watch = require('gulp-watch');
var conf = require('../config');
gulp.task('sass:watch', function () {
// gulp.watch(conf.sass.src, ['sass']);
watch(conf.sass.src, function () {
gulp.start(['sass']);
});
});
gulp.task('image:watch', function () {
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.js (./gulp_task/watch.js)
・default タスクを作成し、中身をコピペ
作業手順
2. タスクを作ろう
第６章 default タスクで一括 watch
watch に入っている方は抜けてください

67. 東区フロントエンド勉強会 2015年 第1回
67
3. 動作確認をしよう
http://excode.jp
第６章 default タスクで一括 watch

68. 東区フロントエンド勉強会 2015年 第1回
68
http://excode.jp
3. 動作確認をしよう
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
第６章 default タスクで一括 watch

69. 東区フロントエンド勉強会 2015年 第1回
69
http://excode.jp
3. 動作確認をしよう
sass を変更したり、画像を追加したりしてみてください
Windows の方 Mac の方
$ gulp sass:watch
[16:51:18] Starting 'default'...
[16:51:18] Finished 'default' after 13 ms
[16:51:28] Starting 'image'...
[16:51:29] gulp-imagemin: Minified 1 image
(saved 67.23 kB - 72.7%)
[16:51:29] Finished 'image' after 708 ms
[16:51:36] Starting 'sass'...
[16:51:36] Finished 'sass' after 18 ms
gulp sass:watch タスク
> gulp sass:watch
[16:51:18] Starting 'default'...
[16:51:18] Finished 'default' after 13 ms
[16:51:28] Starting 'image'...
[16:51:29] gulp-imagemin: Minified 1 image
(saved 67.23 kB - 72.7%)
[16:51:29] Finished 'image' after 708 ms
[16:51:36] Starting 'sass'...
[16:51:36] Finished 'sass' after 18 ms
gulp sass:watch タスク
意図した通り動作していればOKです
第６章 default タスクで一括 watch

70. 東区フロントエンド勉強会 2015年 第1回
70
第７章 CSSスプライトを自動化しよう
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について
は Sprity を用い別資料を用意します。

71. 東区フロントエンド勉強会 2015年 第1回
第７章 CSSスプライトを自動化しよう
1. 概要
2. タスクを作ろう
3. 動作確認をしよう
4. Sassファイルの使い方
71
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について
は Sprity を用い別資料を用意します。

72. 東区フロントエンド勉強会 2015年 第1回
72
1. 概要
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について
は Sprity を用い別資料を用意します。

73. 東区フロントエンド勉強会 2015年 第1回
73
http://excode.jp
作業用のディレクトリに保存 CSSスプライトが生成される
./develop/sprite ./html/images
第７章 CSSスプライトを自動化しよう
LOGO
LOGO
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について
は Sprity を用い別資料を用意します。

74. 東区フロントエンド勉強会 2015年 第1回
74
http://excode.jp
作業用のディレクトリに保存 → 最適化したCSSスプライト画像を生成
./develop/sprite ./develop/images
第７章 CSSスプライトを自動化しよう
LOGO
LOGO
./html/images
LOGO
画像生成 最適化
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について
は Sprity を用い別資料を用意します。

75. 東区フロントエンド勉強会 2015年 第1回
75
2. タスクを作ろう
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

76. 東区フロントエンド勉強会 2015年 第1回
76
http://excode.jp
第７章 CSSスプライトを自動化しよう
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./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
2. タスクを作ろう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

77. 東区フロントエンド勉強会 2015年 第1回
77
http://excode.jp
第７章 CSSスプライトを自動化しよう
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./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
2. タスクを作ろう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

78. 東区フロントエンド勉強会 2015年 第1回
78
http://excode.jp
第７章 CSSスプライトを自動化しよう
ディレクトリに追加された画像をスプライト画像とSassを書き出します
css-spritehttps://www.npmjs.com/package/css-sprite
2. タスクを作ろう
条件分岐を使えるようになります
gulp-ifhttps://www.npmjs.com/package/gulp-if
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

79. 東区フロントエンド勉強会 2015年 第1回
79
http://excode.jp
第７章 CSSスプライトを自動化しよう
Windows の方 Mac の方
> npm install css-sprite —save-dev -g
css-sprite を追加
$ npm install css-sprite —save-dev -g
css-sprite を追加
> npm install gulp-if --save-dev
gulp-if を追加
$ npm install gulp-if --save-dev
gulp-if を追加
2. タスクを作ろう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

80. 東区フロントエンド勉強会 2015年 第1回
80
http://excode.jp
第７章 CSSスプライトを自動化しよう
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./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
2. タスクを作ろう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

81. 東区フロントエンド勉強会 2015年 第1回
81
http://excode.jp
第７章 CSSスプライトを自動化しよう
Mac の方
$ mkdir develop/sprite
sprite ディレクトリを作成
> mkdir developsprite
sprite ディレクトリを作成
2. タスクを作ろう
$ touch gulp_task/sprite.js
gulp_task 内に sprite.js ファイルを作成
> type nul gulp_tasksprite.js
gulp_task 内に sprite.js ファイルを作成
ついでに sprite.js も作成します
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

82. 東区フロントエンド勉強会 2015年 第1回
82
http://excode.jp
第７章 CSSスプライトを自動化しよう
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
2. タスクを作ろう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

83. 東区フロントエンド勉強会 2015年 第1回
83
http://excode.jp
第７章 CSSスプライトを自動化しよう
2. タスクを作ろう
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',
dest: src +'/images', // スプライト画像出力先
sass: src +'/sass', // Sassディレクトリ
style: '_sprite.sass', // Sassファイル名
name: 'my-sprite', // 画像ファイル名
prefix: 'sprite', // mixinプレフィクス
cssPath: '../images/', // CSS内のパス
processor: 'sass', // sass/scssほか
retina: true, // Retina生成 true/false
},
};
config.js
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./sprite
・設定ファイルを編集
- ./config.js
・ sprite タスクを sprite.js として保存
- ./gulp_task/sprite.js
・watch タスクに追記
- ./gulp_task/watch.js
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

84. 東区フロントエンド勉強会 2015年 第1回
84
http://excode.jp
第７章 CSSスプライトを自動化しよう
2. タスクを作ろう
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./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 sprite = require('css-sprite').stream;
// generate sprite.png and _sprite.scss
gulp.task('sprites', function () {
return gulp.src('./src/img/*.png')
.pipe(sprite({
name: 'sprite',
style: '_sprite.scss',
cssPath: './img',
processor: 'scss'
}))
.pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/
scss/')))
});
sprite.js (./gulp_task/sprite.js)
Usage with Gulp
// generate sprite.png and _sprite.scss
の内容をコピペします
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

85. 東区フロントエンド勉強会 2015年 第1回
85
http://excode.jp
第７章 CSSスプライトを自動化しよう
2. タスクを作ろう
var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprite = require('css-sprite').stream;
var plumber = require('gulp-plumber');
var conf = require('../config');
gulp.task('sprites', function () {
return gulp.src(conf.sprite.src)
.pipe(plumber())
.pipe(sprite({
name: conf.sprite.name,
style: conf.sprite.style,
cssPath: conf.sprite.cssPath,
processor: conf.sprite.processor,
retina: conf.sprite.retina,
prefix: conf.sprite.prefix,
}))
.pipe(gulpif('*.png',
gulp.dest(conf.sprite.spriteDest),
gulp.dest(conf.sprite.sass)));
});
作業手順
・必要なプラグインをインストール
・作業用ディレクトリを作成
- ./sprite
・設定ファイルを編集
- ./config.js
・ sprite タスクを sprite.js として保存
- ./gulp_task/sprite.js
・watch タスクに追記
- ./gulp_task/watch.js
sprite.js (./gulp_task/sprite.js)
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

86. 東区フロントエンド勉強会 2015年 第1回
86
http://excode.jp
第７章 CSSスプライトを自動化しよう
2. タスクを作ろう
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)
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

87. 東区フロントエンド勉強会 2015年 第1回
87
3. 動作確認をしよう
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

88. 東区フロントエンド勉強会 2015年 第1回
88
http://excode.jp
3. 動作確認をしよう
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
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

89. 東区フロントエンド勉強会 2015年 第1回
89
http://excode.jp
3. 動作確認をしよう
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です
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

90. 東区フロントエンド勉強会 2015年 第1回
90
4. Sassファイルの使い方
http://excode.jp
第７章 CSSスプライトを自動化しよう
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

91. 東区フロントエンド勉強会 2015年 第1回
91
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
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 内の変数名になります
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

92. 東区フロントエンド勉強会 2015年 第1回
92
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
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 内の変数名になります
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

93. 東区フロントエンド勉強会 2015年 第1回
93
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
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;
}
h1 {
… (以下省略) …
style.css (./home/css/style.sass)
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

94. 東区フロントエンド勉強会 2015年 第1回
94
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
@import sprite
.logo-mark
+sprite($logo)
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
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;
}
h1 {
… (以下省略) …
style.css (./home/css/style.sass)
この状態では background 関連の
指定が効いていません
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

95. 東区フロントエンド勉強会 2015年 第1回
95
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
@import sprite
.logo-mark
@extend .sprite
+sprite($logo)
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
style.sass (./develop/sass/style.sass)
生成されれいる .sprite
クラスを読み込みます
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

96. 東区フロントエンド勉強会 2015年 第1回
96
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
@import sprite
.logo-mark
@extend .sprite
+sprite($logo)
h1
margin: 0 auto
a
color: red
&.span
transform: rotate(-14deg)
background-size: 20px 20px
h2
color: pink
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;
}
h1 {
… (以下省略) …
style.css (./home/css/style.sass)
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

97. 東区フロントエンド勉強会 2015年 第1回
97
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. 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)
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

98. 東区フロントエンド勉強会 2015年 第1回
98
http://excode.jp
第７章 CSSスプライトを自動化しよう
4. Sassファイルの使い方
この後は position: absolute; など、
使いやすい形で利用してください
※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ
イト自動化についての別資料を別途用意します。

99. 東区フロントエンド勉強会 2015年 第1回
99
http://excode.jp
お疲れ様でした