Toshimichi Suekane, profile picture
Uploaded byToshimichi Suekane
PDF, PPTX1,433 views

gulp + sass で目指せ倍速コーディング（第2回 gulpfile.jsの分割管理と画像作成の効率化）

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

Embed presentation

Download as PDF, PPTX
gulp + sass で目指せ倍速コーディング 東区フロントエンド勉強会 2015年 第2回 gulpfile.js の分割管理と画像作成の効率化 1 フロントエンド エンジニア 末包 俊道（すえかね） http://excode.jp エクスコード株式会社 第４章　gulpfile.js の分割管理 第５章　画像を自動で最適化しよう 第６章　default タスクで一括 watch 第７章　CSSスプライトを自動化しよう
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 2 第４章　gulpfile.js の分割管理 http://excode.jp
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 1. 現状の確認 2. 設定ファイルを作ろう (config.js) 3. 設定ファイルを読み込もう 4. ここまでの動作確認をしよう 5. タスクを別ファイルで管理しよう 6. 動作確認をしよう 3 http://excode.jp 第４章　gulofile.js の分割管理
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 4 1. 現状の確認 http://excode.jp
東区フロントエンド勉強会 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 の分割管理
東区フロントエンド勉強会 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 の分割管理 案件に合わせて簡単に 変更できるようにしたい
東区フロントエンド勉強会 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 の分割管理 案件に合わせて簡単に 変更できるようにしたい 設定ファイルを作成し、 一括管理しよう
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 8 2. 設定ファイルを作ろう (config.js) http://excode.jp
東区フロントエンド勉強会 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 を作成します
東区フロントエンド勉強会 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)
東区フロントエンド勉強会 2015年 第1回 11 // 開発用ディレクトリ // 納品用ディレクトリ // データ受け渡し用のオブジェクトを作成 // Sass の設定 config.js http://excode.jp 第４章　gulofile.js の分割管理 2. 設定ファイルを作ろう(config.js) ・開発用ディレクトリのパス ・納品用ディレクトリのパス ・データ受け渡し用オブジェクト ・sass の設定 設定したいこと
東区フロントエンド勉強会 2015年 第1回 12 // 開発用ディレクトリ // 納品用ディレクトリ // データ受け渡し用のオブジェクトを作成 // Sass の設定 config.js http://excode.jp 第４章　gulofile.js の分割管理 2. 設定ファイルを作ろう(config.js) ・開発用ディレクトリのパス 　- ./develop ・納品用ディレクトリのパス 　- ./html ・データ受け渡し用オブジェクト ・Sass の設定 　- Sass ファイル（監視対象） 　- CSS 出力ディレクトリ 設定したいこと
東区フロントエンド勉強会 2015年 第1回 13 // 開発用ディレクトリ var src = './develop'; // 納品用ディレクトリ // データ受け渡し用のオブジェクトを作成 // Sass の設定 config.js http://excode.jp 第４章　gulofile.js の分割管理 2. 設定ファイルを作ろう(config.js) 設定したいこと ・開発用ディレクトリのパス 　- ./develop ・納品用ディレクトリのパス 　- ./html ・データ受け渡し用オブジェクト ・Sass の設定 　- Sass ファイル（監視対象） 　- CSS 出力ディレクトリ ※ src … source (元データ)
東区フロントエンド勉強会 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 (出力先)
東区フロントエンド勉強会 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 の設定 };
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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 出力ディレクトリ
東区フロントエンド勉強会 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 出力ディレクトリ
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 19 3. 設定ファイルを読み込もう http://excode.jp
東区フロントエンド勉強会 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');
東区フロントエンド勉強会 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
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 22 4. ここまでの動作確認をしよう http://excode.jp
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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ファイルが正しく更新されていれば完了です。
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 25 5. タスクを別ファイルで管理しよう http://excode.jp
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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 を押し、一旦タスクを終了します
東区フロントエンド勉強会 2015年 第1回 29 指定したディレクトリ内の .js ファイルを自動で読み込みます require-dirhttps://www.npmjs.com/package/require-dir http://excode.jp 5. タスクを別ファイルで管理しよう 第４章　gulofile.js の分割管理
東区フロントエンド勉強会 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 をインストールします
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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 作業手順
東区フロントエンド勉強会 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 も作成します
東区フロントエンド勉強会 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. タスクを別ファイルで管理しよう
東区フロントエンド勉強会 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 作業手順
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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
東区フロントエンド勉強会 2015年 第1回 第４章　gulofile.js の分割管理 39 6. 動作確認をしよう http://excode.jp
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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ファイルが正しく更新されていれば完了です。
東区フロントエンド勉強会 2015年 第1回 第５章　画像を自動で最適化しよう 42 第５章　画像を自動で最適化しよう http://excode.jp
東区フロントエンド勉強会 2015年 第1回 第５章　画像を自動で最適化しよう 1. 概要 2. タスクを作ろう 3. 動作確認をしよう 43 http://excode.jp 第５章　画像を自動で最適化しよう
東区フロントエンド勉強会 2015年 第1回 44 1. 概要 http://excode.jp 第５章　画像を自動で最適化しよう
東区フロントエンド勉強会 2015年 第1回 45 作業用のディレクトリに保存 http://excode.jp 第５章　画像を自動で最適化しよう 最適化された画像が書き出される 作業用ディレクトリ 最適化(納品用)ディレクトリ JPEG (93KB) JPEG (65KB) JPEG (70KB) JPEG (48KB) PNG (92KB) PNG (25KB)
東区フロントエンド勉強会 2015年 第1回 46 2. タスクを作ろう http://excode.jp 第５章　画像を自動で最適化しよう
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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 を追加
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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 も作成します
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 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. タスクを作ろう
東区フロントエンド勉強会 2015年 第1回 58 3. 動作確認をしよう http://excode.jp 第５章　画像を自動で最適化しよう
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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
東区フロントエンド勉強会 2015年 第1回 61 第６章　default タスクで一括 watch http://excode.jp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 2015年 第1回 第６章　default タスクで一括 watch 1. 概要 2. タスクを作ろう 3. 動作確認をしよう 62 http://excode.jp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 2015年 第1回 63 1. 概要 http://excode.jp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 2015年 第1回 64 http://excode.jp Sass CSS Sass も画像も全部監視対象にしたい gulp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 2015年 第1回 65 2. タスクを作ろう http://excode.jp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 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 に入っている方は抜けてください
東区フロントエンド勉強会 2015年 第1回 67 3. 動作確認をしよう http://excode.jp 第６章　default タスクで一括 watch
東区フロントエンド勉強会 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
東区フロントエンド勉強会 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
東区フロントエンド勉強会 2015年 第1回 70 第７章　CSSスプライトを自動化しよう http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について は Sprity を用い別資料を用意します。
東区フロントエンド勉強会 2015年 第1回 第７章　CSSスプライトを自動化しよう 1. 概要 2. タスクを作ろう 3. 動作確認をしよう 4. Sassファイルの使い方 71 http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について は Sprity を用い別資料を用意します。
東区フロントエンド勉強会 2015年 第1回 72 1. 概要 http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について は Sprity を用い別資料を用意します。
東区フロントエンド勉強会 2015年 第1回 73 http://excode.jp 作業用のディレクトリに保存 CSSスプライトが生成される ./develop/sprite ./html/images 第７章　CSSスプライトを自動化しよう LOGO LOGO ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Windows 環境でも構築できる Retina対応のCSS スプライト自動化について は Sprity を用い別資料を用意します。
東区フロントエンド勉強会 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 を用い別資料を用意します。
東区フロントエンド勉強会 2015年 第1回 75 2. タスクを作ろう http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 2015年 第1回 87 3. 動作確認をしよう http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 2015年 第1回 90 4. Sassファイルの使い方 http://excode.jp 第７章　CSSスプライトを自動化しよう ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 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 スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 2015年 第1回 98 http://excode.jp 第７章　CSSスプライトを自動化しよう 4. Sassファイルの使い方 この後は position: absolute; など、 使いやすい形で利用してください ※本章の内容は旧プラグイン CSS-Sprite を紹介しておりますが、CSS-Sprite は新版として Sprity という名称で新たに公開されております。Sprity を用いた Windowsでの環境構築も含めた Retina対応のCSS スプラ イト自動化についての別資料を別途用意します。
東区フロントエンド勉強会 2015年 第1回 99 http://excode.jp お疲れ様でした

More Related Content

PDF
gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回） 環境準備編
byToshimichi Suekane
 
PDF
Retina対応 CSSスプライトを自動化しよう sprity版（東区フロントエンド勉強会 2015年 第2回） 補足資料
byToshimichi Suekane
 
PDF
Gulp入門 - コーディングを10倍速くする
byHayashi Yuichi
 
PDF
gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回） 本編
byToshimichi Suekane
 
PDF
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
byToshimichi Suekane
 
PPTX
gulp勉強会@IVP
byDaisuke Onoe
 
PPTX
[JavaScript][gulp.js] 一緒に楽しよう！gulp.jsのあれこれ
byYasuhiro Murata
 
PDF
イマドキのコーダー環境構築2016
bySou Lab
 
gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回） 環境準備編
byToshimichi Suekane
 
Retina対応 CSSスプライトを自動化しよう sprity版（東区フロントエンド勉強会 2015年 第2回） 補足資料
byToshimichi Suekane
 
Gulp入門 - コーディングを10倍速くする
byHayashi Yuichi
 
gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回） 本編
byToshimichi Suekane
 
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
byToshimichi Suekane
 
gulp勉強会@IVP
byDaisuke Onoe
 
[JavaScript][gulp.js] 一緒に楽しよう！gulp.jsのあれこれ
byYasuhiro Murata
 
イマドキのコーダー環境構築2016
bySou Lab
 

What's hot

PDF
フロント開発をがんばるためにGulpとGruntに入門してみた
byShou Takenaka
 
PPTX
node-gypを使ったネイティブモジュールの作成
byshigeki_ohtsu
 
PDF
Grails 2.0.0.M1の話
byTsuyoshi Yamamoto
 
PPTX
Jjug 20140430 gradle_advanced
byMasatoshi Hayashi
 
PDF
今すぐブラウザでES6を使おう
byHayashi Yuichi
 
PPTX
OpenShift from Easy way to Hard ? Way
byロフト くん
 
PPTX
Spring Rooで作るGWTアプリケーション
byToshiaki Maki
 
PDF
Spring in-summer-gradle-hands on-withanswers
byTakuma Watabiki
 
PDF
第9回rest勉強会 ダウンロード・アップロード編
byksimoji
 
PDF
ノンプログラマのためのウェブサーバ入門
byAtsu Yamaga
 
PDF
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
byYuki Kanazawa
 
PPTX
ZabbixとAWS
by真乙 九龍
 
PDF
ビルドサーバで使うDocker
byMasashi Shinbara
 
PDF
Sass/Compassの導入と環境構築
bySou Lab
 
PDF
入門 Chef Server #biglobetechtalk
byBIGLOBE Tech Talk
 
PDF
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
byBIGLOBE Tech Talk
 
PDF
もう XAMPP / MAMP はいらない！
Vagrant で作る PHP 開発環境
byMasashi Shinbara
 
PDF
OSS Product feat. Gradle
byYasuharu Nakano
 
PPTX
イベント駆動プログラミングとI/O多重化
byGosuke Miyashita
 
PDF
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
byYuta Matsumura
 
フロント開発をがんばるためにGulpとGruntに入門してみた
byShou Takenaka
 
node-gypを使ったネイティブモジュールの作成
byshigeki_ohtsu
 
Grails 2.0.0.M1の話
byTsuyoshi Yamamoto
 
Jjug 20140430 gradle_advanced
byMasatoshi Hayashi
 
今すぐブラウザでES6を使おう
byHayashi Yuichi
 
OpenShift from Easy way to Hard ? Way
byロフト くん
 
Spring Rooで作るGWTアプリケーション
byToshiaki Maki
 
Spring in-summer-gradle-hands on-withanswers
byTakuma Watabiki
 
第9回rest勉強会 ダウンロード・アップロード編
byksimoji
 
ノンプログラマのためのウェブサーバ入門
byAtsu Yamaga
 
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
byYuki Kanazawa
 
ZabbixとAWS
by真乙 九龍
 
ビルドサーバで使うDocker
byMasashi Shinbara
 
Sass/Compassの導入と環境構築
bySou Lab
 
入門 Chef Server #biglobetechtalk
byBIGLOBE Tech Talk
 
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
byBIGLOBE Tech Talk
 
もう XAMPP / MAMP はいらない！
Vagrant で作る PHP 開発環境
byMasashi Shinbara
 
OSS Product feat. Gradle
byYasuharu Nakano
 
イベント駆動プログラミングとI/O多重化
byGosuke Miyashita
 
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
byYuta Matsumura
 

Viewers also liked

PDF
GitHubでプロジェクトを共有してみよう
byToshimichi Suekane
 
PDF
CSS Living StyleGuide
byHayashi Yuichi
 
PPTX
Kaizenとコーディングで、２年間生き抜いた
byToshimichi Suekane
 
PDF
時をかけるほと
byYuki Ishikawa
 
PDF
いい感じのフロントエンド開発環境を作ってみた
byHayashi Yuichi
 
PDF
gulp芸
byYuki Ishikawa
 
GitHubでプロジェクトを共有してみよう
byToshimichi Suekane
 
CSS Living StyleGuide
byHayashi Yuichi
 
Kaizenとコーディングで、２年間生き抜いた
byToshimichi Suekane
 
時をかけるほと
byYuki Ishikawa
 
いい感じのフロントエンド開発環境を作ってみた
byHayashi Yuichi
 
gulp芸
byYuki Ishikawa
 

Similar to gulp + sass で目指せ倍速コーディング（第2回 gulpfile.jsの分割管理と画像作成の効率化）

PDF
Webサイト・フロントエンドの高速化とgrunt.jsについて
byTomo Fujita
 
PDF
High Performance Gulp
byKeisuke Imura
 
PPTX
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
by近藤 繁延
 
PDF
New Generation Build System "Fly"
bydeepblue will
 
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
by知己 久保
 
ODP
webを飾る技術
byina job
 
ODP
今流行りのウェブアプリ開発環境Yeoman
bytomo_masakura
 
PDF
フロント作業の効率化
byYuto Yoshinari
 
PPTX
HTML5 on ASP.NET
byFujio Kojima
 
PDF
Sass(SCSS)について
byKazufumi Miyamoto
 
PDF
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
byMasayuki Ishikawa
 
PDF
小規模案件で作られた秘伝のタレ
byMuyuu Fujita
 
PDF
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
byShunsuke Watanabe
 
PDF
Htmlコーディングの効率化 後編
byYasuhito Yabe
 
PDF
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
byRico Sengan
 
PDF
K初めてのstylus
byKazuki Nakatani
 
PDF
Hakyllで遊んでみた。
byTomohiko Himura
 
PDF
⑮jQueryをおぼえよう！その１
byNishida Kansuke
 
PDF
「html5 boilerplate」から考える、これからのマークアップ
byYasuhito Yabe
 
PDF
ブラウザにやさしいHTML/CSS
byTakeharu Igari
 
Webサイト・フロントエンドの高速化とgrunt.jsについて
byTomo Fujita
 
High Performance Gulp
byKeisuke Imura
 
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
by近藤 繁延
 
New Generation Build System "Fly"
bydeepblue will
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
by知己 久保
 
webを飾る技術
byina job
 
今流行りのウェブアプリ開発環境Yeoman
bytomo_masakura
 
フロント作業の効率化
byYuto Yoshinari
 
HTML5 on ASP.NET
byFujio Kojima
 
Sass(SCSS)について
byKazufumi Miyamoto
 
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
byMasayuki Ishikawa
 
小規模案件で作られた秘伝のタレ
byMuyuu Fujita
 
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
byShunsuke Watanabe
 
Htmlコーディングの効率化 後編
byYasuhito Yabe
 
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
byRico Sengan
 
K初めてのstylus
byKazuki Nakatani
 
Hakyllで遊んでみた。
byTomohiko Himura
 
⑮jQueryをおぼえよう！その１
byNishida Kansuke
 
「html5 boilerplate」から考える、これからのマークアップ
byYasuhito Yabe
 
ブラウザにやさしいHTML/CSS
byTakeharu Igari
 

gulp + sass で目指せ倍速コーディング（第2回 gulpfile.jsの分割管理と画像作成の効率化）

  • 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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 'usestrict'; 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.
  • 43.
    東区フロントエンド勉強会 2015年 第1回 第５章　画像を自動で最適化しよう 1.概要 2. タスクを作ろう 3. 動作確認をしよう 43 http://excode.jp 第５章　画像を自動で最適化しよう
  • 44.
    東区フロントエンド勉強会 2015年 第1回 44 1.概要 http://excode.jp 第５章　画像を自動で最適化しよう
  • 45.
  • 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 第５章　画像を自動で最適化しよう varsrc = './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 第５章　画像を自動で最適化しよう vargulp = 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 第５章　画像を自動で最適化しよう vargulp = 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 第５章　画像を自動で最適化しよう vargulp = 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 SassCSS Sass も画像も全部監視対象にしたい gulp 第６章　default タスクで一括 watch
  • 65.
    東区フロントエンド勉強会 2015年 第1回 65 2.タスクを作ろう http://excode.jp 第６章　default タスクで一括 watch
  • 66.
    東区フロントエンド勉強会 2015年 第1回 66 http://excode.jp vargulp = 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.