More than 5 years have passed since last update.

gulp初心者のメモ

note

Last updated at 2017-07-22Posted at 2016-12-08

gulp初心者（タスクランナー自体初めて）が使ってみた際のメモです。
個人用テキストメモをそのまま貼り付けているため、書いた本人以外には分かりづらいと思いますので、詳細については本文中の各urlのページを参考にしてください。

gulp: note.txt
(OS:Windows7.32bit)

20161123
5分で導入！タスクランナーGulpでWeb制作を効率化しよう
https://ics.media/entry/3290

インストール

公式サイトよりダウンロード
https://nodejs.org/en/

参考：http://qiita.com/shosho/items/0a71a906b78bea0e1aa1
※バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。

今回DLしたファイル　Windows (x86)v6.9.1 LTS（node-v6.9.1-x86.msi）

任意の場所にmyprojectフォルダを作成してコマンドラインで移動
cd C:\data\coding\myproject

Gulpにおけるタスク処理の基本
https://ics.media/entry/3290/3

gulpfile.js


// gulpプラグインの読み込み
var gulp = require("gulp");
// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");

// imagesフォルダ以下のpng画像を圧縮してminifies_imagesフォルダに保存するタスクの定義
gulp.task("imageMinTask", function() { // 「imageMinTask」という名前のタスクを登録
  gulp.src("images/*.png")  // imagesフォルダー以下のpng画像を取得
    .pipe(imagemin())  // 画像の圧縮処理を実行
    .pipe(gulp.dest("minified_images/"));  // minified_imagesフォルダ以下に保存
});

watch機能を使えばファイルの更新後に自動で処理を実行できる
https://ics.media/entry/3290/4

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
gulp.task("watchTask", function() {
  gulp.watch("images/**", function() { // imagesフォルダ以下のファイルを監視
    gulp.src("images/*.png")
      .pipe(imagemin())
      .pipe(gulp.dest("minified_images/"));
  });
});

20161124
dotinstall gulp入門

必要となる知識について

このレッスンに必要な知識に関しては以下のレッスンを参照とのこと。

・ローカル開発環境の構築 (全13回)
http://dotinstall.com/lessons/basic_local_development_v2
・Node.js入門 (全16回)
http://dotinstall.com/lessons/basic_nodejs
・CoffeeScript入門 (全13回)
http://dotinstall.com/lessons/basic_coffeescript

※インストールや環境構築は先でやってしまったので、この辺は割愛。
また、CoffeeScriptも今のところ使う予定が無いので飛ばして進める。

#01 gulpとは何か？
http://dotinstall.com/lessons/basic_gulp/30601

概要
-　フロントエンドのタスクを自動化（タスクランナー） gulpに似たツール…grunt 近年はgulpが人気高い
公式サイト
http://gulpjs.com/
知識
環境

vagrant / CentOS 6.5
※今回レッスン指定の環境を使わず、先にインストールした環境で実習してみた

#02 gulpをインストールしよう
http://dotinstall.com/lessons/basic_gulp/30602

epel
Node.js / npm
gulp.js

#03 package.jsonを作ろう
http://dotinstall.com/lessons/basic_gulp/30603

フォルダを作る
cmd… mkdir [フォルダ名]（フォルダを作成コマンド）

作ったフォルダに移動
cmd… cd C:\data\coding\myproject

package.jsonの雛形を作る
cmd… npm init
とりあえず質問には全部Enterで良い（設定は後で変更可能）

gulpのインストール
cmd… npm install --sabe-dev gulp
省略形… npm i -D gulp

package.json の情報から同じ環境を再現可能
cmd… npm install
package.json と同じ内容がインストールされる

#04 gulp.task()を使ってみよう
http://dotinstall.com/lessons/basic_gulp/30604

「Helo!world」を表示させてみる

gulpを実行するために gulpfile.js を作成する

var gulp = require("gulp"); // gulpを読み込む。requireの読み方はリクワイヤー

var gulp = require("gulp");

gulp.task('hello', function() {
  console.log('hello world!');
});

これを実行するには

cmd… gulp hwllo（関数名）

関数をデフォルト指定することで gulpコマンドのみで実行させることも可能

var gulp = require("gulp");

gulp.task('hello', function() {
  console.log('hello world!');
});

gulp.task('default', ['hello']);

cmd… gulp

先と同じ実行結果となる

#05 gulp.src()､gulp.dest()を使ってみよう
http://dotinstall.com/lessons/basic_gulp/30605

ソースフォルダ（src）にある開発用のファイルをコピーしてディストリビューションフォルダ（dist）に入れる

// crc -> dist

var gulp = require("gulp");

// ファイルの指定
// gulp.src('./src/index.html') // 一つ指定する場合
// gulp.src(['./src/index.html', './src/main.html']) // 複数指定する場合は配列で
// gulp.src('./src/*.html') // src内の全てのhtmlを指定する場合
// gulp.src('./src/**/*.html') // src内の全てのフォルダ内のhtmlを指定する場合
// gulp.src(['./src/index.html', '!./src/donotcopy.html']) // 変更したくないファイルは否定の指定も可能

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));

});

gulp.task('default', ['html']);

実行すると

cmd… gulp

distフォルダが作成されて中にindex.htmlのコピーができている

#06 タスクの実行順序について理解しよう
http://dotinstall.com/lessons/basic_gulp/30606

複数のタスクを実行させる場合

var gulp = require("gulp");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

ulp.task('msg', function() {
  console.log('hello');
});

gulp.task('default', ['html', 'msg']); // 並列処理のため、この場合実行順序は予測できない

実行順序を指定した書き方
[html]→[msg]の順番にしたい場合

var gulp = require("gulp");

gulp.task('html', function() {
  return gulp.src('./src/index.html') // 関数 msg の引数に返すため return を付ける
    .pipe(gulp.dest('./dist'));
});

gulp.task('msg', ['html'], function() { // html関数完了後に実行するために 第二引数を追加
  console.log('html copy done!');
});

gulp.task('default', ['msg']); // msg を実行すると html も呼び出され実行される

#07 gulp-imageminを使ってみよう
http://dotinstall.com/lessons/basic_gulp/30607

まずはgulp-imageminをインストール
cmd… npm i -D gulp-imagemin

index.htmlをdistへコピーしつつ、画像を最適化してみる

var gulp = require("gulp");
var imagemin = require("gulp-imagemin"); // プラグインimageminの読み込み

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg') // imgフォルダ内の全てのjpgファイル
    .pipe(imagemin()) // imageminを実行
    .pipe(gulp.dest('./dist/img')); // 出力先を指定
});

gulp.task('default', ['html', 'img']);

実行してみる

cmd… gulp

画像が圧縮されてdist/img内に

#08 gulp-coffee､gulp-concat､gulp-uglifyを使おう
http://dotinstall.com/lessons/basic_gulp/30608

coffeeフォルダ内のsctiptファイルをJavaScriptに変換してdist内へ

script1.coffeeとscript2.coffeeを結合して圧縮までやってみる
まず必要なプラグインをインストールする

・gulp-coffee（コーヒー）…CoffeeScriptをJavaScriptに変換する
・gulp-concat（コンカット）…ファイルを結合する
・gulp-uglify（アングリファイ）…ファイルを圧縮する

cmd… npm i -D gulp-coffee gulp-concat gulp-uglify
※続けてプラグイン名を記述することで、まとめてインストール可能

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(coffee())
    .pipe(concat('all.min.js')) // 結合の際はファイル名を指定する
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('default', ['html', 'img', 'js']);

#09 gulp.watch()を使ってみよう
http://dotinstall.com/lessons/basic_gulp/30609

毎回gulpコマンドを実行しなくても済むように
ファイルを監視して変更があれば自動的に実行するようにする

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js']); // 指定ディレクトリ内で変更があれば引数の関数を実行する
});

gulp.task('default', ['html', 'img', 'js', 'watch']);

実行する

cmd… gulp

実行されるが、コマンドが終了せずに監視状態になる

このままscript1.coffeeに変更を加えてみると…
自動実行されてdist内に反映される

監視状態は　ctrl+c で終了できる

#10 gulp-plumberを使ってみよう
http://dotinstall.com/lessons/basic_gulp/30610

watch監視による自動実行は便利だが、エラー時に止まってしまう欠点がある
その場合はgulpコマンドを再度実行する必要が出てしまい不便なので、
それを補うためのプラグインをインストールする

cmd… npm i -D gulp-plumber

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber()) // エラーの出そうな所に入れておくと、エラー表示はされるが、watch監視自動実行が停止しない
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js']);
});

gulp.task('default', ['html', 'img', 'js', 'watch']);

script1.coffeeのスクリプト記述をわざと間違えて確認してみる
→cmdにエラーは表示されるが、監視状態は停止しない
スクリプトを正常に戻してみる
→自動で実行されるのが確認できる

#11 gulp-headerを使ってみよう
http://dotinstall.com/lessons/basic_gulp/30611

ファイルを変換した時に何かしらのヘッダーを入れたいときに使える
プラグインをインストール

cmd… npm i -D gulp-header

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(header('/* copyright @taguch */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js']);
});

gulp.task('default', ['html', 'img', 'js', 'watch']);

実行してみる

cmd… gulp

実行結果のall.min.jsにメッセージが入っていることが確認できる

次に、テンプレート的な使い方も可能

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    //.pipe(header('/* copyright @taguchi */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
    .pipe(header('/* copyright <%= name %> */', {name: 'taguchi'})) // 変数の利用が可能。第二引数で変数を引き渡すこともできる
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js']);
});

gulp.task('default', ['html', 'img', 'js', 'watch']);

実行すると同じ結果が得られることが確認できる

次にpakage.jsonの情報を表示させてみる

var gulp = require("gulp");
var pkg = require("./package.json"); // package.json の情報を取得
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    //.pipe(header('/* copyright @taguchi */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
    //.pipe(header('/* copyright <%= name %> */', {name: 'taguchi'})) // 変数の利用が可能。第二引数で変数を引き渡すこともできる
    .pipe(header('/* copyright <%= pkg.name %> */', {pkg: pkg})) // package.jsonからの情報を表示させる
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js']);
});

gulp.task('default', ['html', 'img', 'js', 'watch']);

実行してみる
pakage.jsonのnameが反映されることが確認できる

#12 gulp-webserverを使ってみよう
http://dotinstall.com/lessons/basic_gulp/30612

ライブリーロード…gulpでファイルの変更を検出したら自動的にブラウザをリロード

ipアドレスが必要なため確認する
cmd… ip a（今回はipconfigで）
表示されたipアドレスは後で使う

プラグインをインストール

cmd… npm i -D gulp-webserver

gulpfile.js

var gulp = require("gulp");
var pkg = require("./package.json"); // package.json の情報を取得
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");
var webserver = require("gulp-webserver");

gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(header('/* copyright <%= pkg.name %> */', {pkg: pkg}))
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js'])
  gulp.watch('./src/*.html', ['html'])
});

gulp.task('webserver', function() {
  gulp.src('./dist')
    .pipe(
      webserver({
        host: '192.168.11.4', // 先に確認したipを指定
        livereload: true // 自動リロードをtrueに
      })
    );
})

gulp.task('default', ['html', 'img', 'js', 'watch', 'webserver']);

実行するとwebserverのipが表示される
今回の場合は http://192.168.11.4:8000/
このアドレスでブラウザ表示

index.html

<html>
hello! from gulp! hogehoge
</html>

index.htmlファイルの内容を変更・保存すると、
ブラウザが自動リロードするのが確認できる。

【Gulp.js入門】新鋭フロンエンド・タスクランナーツールを試してみました
http://dev.classmethod.jp/tool/gulpjs-part-001/

Gulpの場合ファイルの削除には、「del」というプラグインを使用します。
インストール

cmd… npm i -D del

Gulpでファイル名を変更して出力する場合は「gulp-rename」を使用します。

cmd… npm i -D gulp-rename

TypeScriptのコンパイルには「gulp-typescript」を使用します。

cmd… npm i -D gulp-typescript

Sassのコンパイルには「gulp-sass」を使用します。

cmd… npm i -D gulp-sass

ブラウザ確認が一瞬！
Grunt・Gulpと始めるBrowsersync入門
https://ics.media/entry/3405

インストール

cmd… npm i -D browser-sync

Browsersyncを利用してお手軽ブラウザ確認環境をつくろう
http://tech.medpeer.co.jp/entry/2015/06/09/071758
サックっとbrowser-syncを設定
http://qiita.com/itoz/items/2bd246606c69c33684e8

gulpfile.js

var gulp = require('gulp');
var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);


gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "./src/"       //対象ディレクトリ
            ,index  : "index.html"      //インデックスファイル
        }
    });
});

//
//ブラウザリロード
//
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//
//監視ファイル
//
gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./src/*.html",            ['bs-reload']);
});

同期するhtmlにDOCTYPE,html,bodyタグが無いと正常に同期しない場合があるので注意

これからはじめるGulp #1
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-01/
元ページ：http://whiskers.nukos.kitchen/2014/12/01/gulp-adv-cal.html

macでのインストール手順等　割愛

これからはじめるGulp #2：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-02/

ディレクトリを作成 C:\data\coding\myproject

cmd… cd src（srcディレクトリに移動）
cmd… mkdir scss（scssフォルダ作成）
cmd… cd scss（scssディレクトリに移動）

ファイルを作成　参考：http://kiyotakakubo.hatenablog.com/entry/20090214/1234622897

cmd… C:> type nul > style.scss

var gulp =require('gulp');
var sass =require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'))
});

gulp.task('default', ['sass']);

実行

cmd… gulp sass

dist内にcssフォルダとstyle.cssが出力されてれば成功

20161126

これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
http://whiskers.nukos.kitchen/2014/12/03/gulp-watch.html

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('watch', function() {
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
})

gulp.task('default', ['sass']);

scssファイルを編集すると、distへ反映される

次にイベントリスナーを使った方法をやってみる

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('watch',['sass'], function() {
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

gulp.task('default', ['sass']);

これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
http://whiskers.nukos.kitchen/2014/12/04/gulp-connect.html

gulp-connectのインストールと読み込み
cmd… npm i -D gulp-connect

準備：index.htmlを作る

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gulp Hello world</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

コピータスクを作る

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch',['sass'], function() {
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

gulp.task('default', ['sass']);

cmd… gulp copy

監視対象にhtmlを追加する

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/sass/*.sass', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('default', ['sass']);

cmd… gulp watch

htmlを変更してタスク実行されるかを確認

serveタスクを作る

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/sass/*.sass', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server();
});

gulp.task('default', ['sass']);

cmd… gulp serve

ローカルサーバーの起動を確認（停止には ctrl+c）

rootディレクトリを指定する、
defaultタスクで必要なタスクをすべて実行する

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/sass/*.sass', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server({
    root: './dist'
  });
});

gulp.task('default', ['watch', 'serve']);

cmd… gulp

起動を確認

これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
http://whiskers.nukos.kitchen/2014/12/05/gulp-livereload.html

serveタスクオプションでLibeReloadを有効化( livereload: true)、
scss,htmlの変更に合せてリロードする

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(connect.reload());
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/sass/*.sass', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server({
    root: './dist',
    livereload: true
  });
});

gulp.task('default', ['watch', 'serve']);

cmd… gulp

実行できたことを確認

ブラウザ拡張機能をインストールして同期（対応ブラウザはSafari, Chrome, Firefox
※Browsersyncで同等の動作可能なので、割愛

これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
http://whiskers.nukos.kitchen/2014/12/06/gulp-notify.html

・gulp-plumberについて
エラーによってwatch監視が停止することを防止するプラグイン（※導入済）
・gulp-notify
通常コマンドラインのみ表示されるエラーをデスクトップ通知する

gulp-plumberでエラーによる強制停止を防止

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(connect.reload());
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server({
    root: './dist',
    livereload: true
  });
});

gulp.task('default', ['watch', 'serve']);

cmd… gulp

わざとscssファイルの記述を間違えて
エラーが出ても停止しないことを確認

gulp-notifyでエラーを通知する
インストール

cmd… npm i -D gulp-notify

gulp-notify通知処理を追加

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');

gulp.task('sass', function() {
  gulp.src('./src/scss/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(connect.reload());
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server({
    root: './dist',
    livereload: true
  });
});

gulp.task('default', ['watch', 'serve']);

わざと間違えたscss記述にしてエラーを確認してみる

これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
http://whiskers.nukos.kitchen/2014/12/07/gulp-require-dir.html

pathモジュールを読み込む、
パスを変数から呼び出す
タスクのglobをタスクのローカル変数で管理する

var gulp = require('gulp');
var path =require('path');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');

var paths = {
  srcDir: 'src',
  dstDir: 'dist'
}

gulp.task('sass', function() {
  var srcGlob = paths.srcDir + 'scss/*.scss';
  var dstGlob = paths.dstDir + 'css';
  var errorMessage = "Error: <%= error.message %>";

  gulp.src('./src/scss/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(connect.reload());
});

gulp.task('copy', function() {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

gulp.task('watch',['sass', 'copy'], function() {
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('serve', function() {
  connect.server({
    root: './dist',
    livereload: true
  });
});

gulp.task('default', ['watch', 'serve']);

タスク毎にファイルを分割する
まず require-dirのインストール

cmd… npm i -D require-dir

require-dirの読み込み

var requireDir = require('require-dir');
var dir = require('./tasks');
// var dir = require('./tasks', {recurse: true}); // 下層ディレクトリも再帰的に呼び出したい場合はオプション recurse: true で有効にする

ファイルを分ける
sassタスクとcopyタスクを別ファイルに

gulpfile.js

var gulp       = require('gulp');
var requireDir = require('require-dir');
var dir        = requireDir('./src/tasks');
var path       = require('path');
var connect    = require('gulp-connect');

var paths = {
  srcDir: 'src',
  dstDir: 'dist'
}

gulp.task('serve', function() {
  connect.server({
    root: paths.dstDir,
    livereload: true
  });
});

gulp.task('watch', ['sass', 'copy'], function() {
  var scssWatchGlob = paths.srcDir + 'scss/*.scss';
  var htmlWatchGlob = paths.srcDir + '/*.html';

  gulp.watch( scssWatchGlob, ['sass']);
  gulp.watch( htmlWatchGlob, ['copy']);
});

gulp.task('default', ['watch', 'serve']);

sass.js

var gulp       = require('gulp');
var path       = require('path');
var sass       = require('gulp-sass');
var plumber    = require('gulp-plumber');
var notify     = require('gulp-notify');
var connect    = require('gulp-connect');

var paths = {
  srcDir: 'src',
  dstDir: 'dist'
}

gulp.task('sass', function() {
  var srcGlob = paths.srcDir + 'sass/*.scss';
  var dstGlob = paths.dstDir + '/css';
  var errorMessage = 'Error: <%= error.message %>';

  gulp.src( srcGlob )
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass())
    .pipe(gulp.dest( dstGlob ))
    .pipe(connect.reload());
});

copy.js

var gulp       = require('gulp');
var connect    = require('gulp-connect');

var paths = {
  srcDir: 'src',
  dstDir: 'dist'
}

gulp.task('copy', function() {
  var srcGlob = paths.srcDir + '/*.html';
  var dstGlob = paths.dstDir;

  gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob ))
    .pipe(connect.reload());
});

cmd… gulp

実行を確認

20161127

これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
http://whiskers.nukos.kitchen/2014/12/08/gulp-del.html
※del導入済、その他は導入未定のため割愛

これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
http://whiskers.nukos.kitchen/2014/12/09/gulp-ruby-sass.html
※いまのところ導入予定無し　割愛

これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
http://whiskers.nukos.kitchen/2014/12/10/gulp-webserver.html
※同等機能BrowserSync導入済のため割愛

これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
http://whiskers.nukos.kitchen/2014/12/11/gulp-browser-sync.html
※導入済のため割愛

これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
http://whiskers.nukos.kitchen/2014/12/12/gulp-imagemin.html
※導入済み、練習してみる

imagemin.js

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

var paths = {
  srcDir: './src/img',
  dstDir: './dist/img'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

cmd… gulp imagemin

実行で圧縮されていることを確認

これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
http://whiskers.nukos.kitchen/2014/12/13/gulp-changed.html

gulp-changed
変更されたファイルだけ処理させる

インストール

cmd… npm i -D gulp-changed

コードに追加、実行してみる

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed'); // 読み込み

var paths = {
  srcDir: 'src/img',
  dstDir: 'dist/img'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(changed( dstGlob )) // 処理を追加
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

cmd… gulp imagemin

何も変更されていないファイルで実行してみる
→処理はスルーされる

これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
http://whiskers.nukos.kitchen/2014/12/14/gulp-cached.html

gulp-cached
対象ファイルをキャッシュし、変更分のみを処理させる

インストール
npm i -D gulp-cached

処理を追加

sass.js

var gulp      = require('gulp');
var path      = require('path');
var sass      = require('gulp-sass');
var plumber   = require('gulp-plumber');
var notify    = require('gulp-notify');
var cache     = require('gulp-cached');

var browserSync = require('browser-sync');
var reload      = browserSync.reload;

var paths = {
  srcDir : './src',
  dstDir : './dist'
}

gulp.task('sass', function(){
  var srcGlob = paths.srcDir + '/scss/**/*.scss';
  var dstGlob = paths.dstDir + '/css';
  var errorMessage = "Error: <%= error.message %>";
  // var sassOptions = {
  //   bundleExec : true,
  //   style      : 'nested',
  //   require    : ['bourbon', 'neat'],
  //   loadPath   : ['vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets']
  // }

  gulp.src( srcGlob )
    .pipe(cache( 'sass' )) // キャッシュ処理
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    //.pipe(sass( sassOptions ))
    .pipe(sass())
    .pipe(gulp.dest( dstGlob ))
    .pipe(reload({stream:true}));
});

gulpfile.js

var gulp      = require('gulp');
var path      = require('path');

var requireDir = require('require-dir');
var dir        = requireDir('./src/tasks', {recurse: true});

var browserSync = require('browser-sync');

var paths = {
  srcDir : './src',
  dstDir : './dist'
}

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: paths.dstDir,
      index  : "index.html"
    }
  });
});

gulp.task('watch', ['sass', 'copy'], function(){
  var scssWatchGlob = paths.srcDir + '/scss/*.scss';
  var htmlWatchGlob = paths.srcDir + '/*.html';

  var watcher = gulp.watch( scssWatchGlob, ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });

  gulp.watch( htmlWatchGlob, ['copy']);
});

gulp.task('default', ['watch', 'browser-sync']);

その他のファイル

copy.js

var gulp       = require('gulp');
var browserSync = require('browser-sync');

var paths = {
  srcDir: 'src',
  dstDir: 'dist'
}

gulp.task('copy', function() {
  var srcGlob = paths.srcDir + '/*.html';
  var dstGlob = paths.dstDir;

  gulp.src( srcGlob )
    .pipe(gulp.dest( dstGlob ))
    .pipe(browserSync.reload({stream:true}));
});

imagemin.js

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed'); // 読み込み

var paths = {
  srcDir: 'src/img',
  dstDir: 'dist/img'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(changed( dstGlob )) // 処理を追加
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

style.scss

$color: #fff;

body {
  background: $color;
  border: 1px solid #f00;
}

@import "test";

_test.scss

h1 {
  color: #f0f;
}

sub.scss

@import "test";

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gulp Hello world</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

cmd… gulp

実行して、scssファイルを変更してみると、該当cssのみが処理出力される。
cachedが無い場合は1ファイルのみの変更でも全cssファイルが出力されてしまう。

ディレクトリ構成

myproject
├─ node_modules
├─ package.json
│
├─ gulpfile.js // メイン処理
│
├─ src // コンパイル前ソースファイル
│    ├─ img
│    ├─ scss
│    ├─ tasks // gulpfile分割taskファイル
│    └─ index.html
│
├─ dist // コンパイル後ファイル
│    ├─ img
│    ├─ css
│    └─ index.html

これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
http://whiskers.nukos.kitchen/2014/12/15/gulp-responsive.html
※複雑なので保留

これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
http://whiskers.nukos.kitchen/2014/12/16/gulp-image-resize.html
※複雑なので保留

：
：
以降、第26回まで　保留
：
これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す
http://whiskers.nukos.kitchen/2014/12/26/gulp-sketch-sub-directory.html

Gulp.js入門 ? コーディングを10倍速くする環境を作る方法まとめ
https://liginc.co.jp/web/tutorial/117900
※gulp-autoprefixerを導入

インストール

cmd… npm i -D gulp-autoprefixer

使ってみる

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
  gulp.src('src/scss/**/*scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('dist/css'));
})

style.scss

$color: #fff;

body {
  background: $color;
  border: 1px solid #f00;
  transform: all 0.3 ease-in-out;
}

cmd… gulp sass

出力結果

style.css

body {
  background: #fff;
  border: 1px solid #f00;
  -webkit-transform: all 0.3 ease-in-out;
          transform: all 0.3 ease-in-out; }

gulp シリーズ2　?gulp-sassでのコンパイル時の整形?
http://qiita.com/ShinyaOkazawa/items/9144dfac166faa0ad4b3

sassオプション expanded を使用

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
  gulp.src('src/scss/**/*scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('dist/css'));
})

style.scss

$color: #fff;

body {
  background: $color;
  border: 1px solid #f00;
  transform: all 0.3 ease-in-out;
}

cmd… gulp sass

出力結果

style.css

body {
  background: #fff;
  border: 1px solid #f00;
  -webkit-transform: all 0.3 ease-in-out;
          transform: all 0.3 ease-in-out;
}

sassで@charsetが消える現象について

CSSをSCSS形式で書き直してみた
http://simpleism.net/2013/03/rewrite-in-the-notation-sass/

コンパイルすると
charsetが削除されてファイルタイプで保存される
2バイト文字（日本語）が含まれる場合は逆に付加される
という仕様

sass(scss)をgulpでコンパイルすると、charsetが消えてしまう場合の対処法
http://ichimaruni-design.com/2015/06/sass-charset/

どうしても確実に記述させたい場合は、gulp-headerを使用する方法が可能

gulpfile.js

var gulp            = require('gulp'),
    header          = require('gulp-header'),
    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer');

var cssCharset  = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset

gulp.task('sass', function() {
  gulp.src('src/scss/**/*scss')
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(autoprefixer())
    .pipe(header(cssCharset))
    .pipe(gulp.dest('dist/css'));
})

CSSプロパティの記述順について - CSScomb解決編
http://yamanoku.hatenablog.com/entry/2016/05/08/213237

gulp-csscombで任意のプロパティ記述順序を設定する
http://qiita.com/naoyashiga/items/bce4ad2fbc3cbeeff1d1
※gulp-csscombを導入

cmd… npm i -D gulp-csscomb

設定など
[Grunt]CSScombの整形に任意の設定を使う方法
https://increment-log.com/csscomb-setting/

設定参考（grunt）
http://bashalog.c-brains.jp/14/12/01-202258.php

設定ファイルをpackage.jsonと同じルート階層に置く
.csscomb.json※ファイル名の頭にドット[.]が必要なので注意（これに気がつかずに少しハマッた）

ジェネレータ
http://csscomb.com/config
で基本設定、プロパティ順はzen.jsonからコピーしてみる

.csscomb.json(20161127)

{
    "exclude": [
        ".git/**",
        "node_modules/**",
        "bower_components/**"
    ],
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,
    "sort-order": [ [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index",
        "display",
        "visibility",
        "-webkit-flex-direction",
        "-moz-flex-direction",
        "-ms-flex-direction",
        "-o-flex-direction",
        "flex-direction",
        "-webkit-flex-order",
        "-moz-flex-order",
        "-ms-flex-order",
        "-o-flex-order",
        "flex-order",
        "-webkit-flex-pack",
        "-moz-flex-pack",
        "-ms-flex-pack",
        "-o-flex-pack",
        "flex-pack",
        "float",
        "clear",
        "-webkit-flex-align",
        "-moz-flex-align",
        "-ms-flex-align",
        "-o-flex-align",
        "flex-align",
        "-webkit-flex",
        "-moz-flex",
        "-ms-flex",
        "-o-flex",
        "flex",
        "overflow",
        "-ms-overflow-x",
        "-ms-overflow-y",
        "overflow-x",
        "overflow-y",
        "-webkit-overflow-scrolling",
        "clip",
        "-webkit-box-sizing",
        "-moz-box-sizing",
        "box-sizing",
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "min-width",
        "min-height",
        "max-width",
        "max-height",
        "width",
        "height",
        "outline",
        "outline-width",
        "outline-style",
        "outline-color",
        "outline-offset",
        "border",
        "border-spacing",
        "border-collapse",
        "border-width",
        "border-style",
        "border-color",
        "border-top",
        "border-top-width",
        "border-top-style",
        "border-top-color",
        "border-right",
        "border-right-width",
        "border-right-style",
        "border-right-color",
        "border-bottom",
        "border-bottom-width",
        "border-bottom-style",
        "border-bottom-color",
        "border-left",
        "border-left-width",
        "border-left-style",
        "border-left-color",
        "-webkit-border-radius",
        "-moz-border-radius",
        "border-radius",
        "-webkit-border-top-left-radius",
        "-moz-border-radius-topleft",
        "border-top-left-radius",
        "-webkit-border-top-right-radius",
        "-moz-border-radius-topright",
        "border-top-right-radius",
        "-webkit-border-bottom-right-radius",
        "-moz-border-radius-bottomright",
        "border-bottom-right-radius",
        "-webkit-border-bottom-left-radius",
        "-moz-border-radius-bottomleft",
        "border-bottom-left-radius",
        "-webkit-border-image",
        "-moz-border-image",
        "-o-border-image",
        "border-image",
        "-webkit-border-image-source",
        "-moz-border-image-source",
        "-o-border-image-source",
        "border-image-source",
        "-webkit-border-image-slice",
        "-moz-border-image-slice",
        "-o-border-image-slice",
        "border-image-slice",
        "-webkit-border-image-width",
        "-moz-border-image-width",
        "-o-border-image-width",
        "border-image-width",
        "-webkit-border-image-outset",
        "-moz-border-image-outset",
        "-o-border-image-outset",
        "border-image-outset",
        "-webkit-border-image-repeat",
        "-moz-border-image-repeat",
        "-o-border-image-repeat",
        "border-image-repeat",
        "-webkit-border-top-image",
        "-moz-border-top-image",
        "-o-border-top-image",
        "border-top-image",
        "-webkit-border-right-image",
        "-moz-border-right-image",
        "-o-border-right-image",
        "border-right-image",
        "-webkit-border-bottom-image",
        "-moz-border-bottom-image",
        "-o-border-bottom-image",
        "border-bottom-image",
        "-webkit-border-left-image",
        "-moz-border-left-image",
        "-o-border-left-image",
        "border-left-image",
        "-webkit-border-corner-image",
        "-moz-border-corner-image",
        "-o-border-corner-image",
        "border-corner-image",
        "-webkit-border-top-left-image",
        "-moz-border-top-left-image",
        "-o-border-top-left-image",
        "border-top-left-image",
        "-webkit-border-top-right-image",
        "-moz-border-top-right-image",
        "-o-border-top-right-image",
        "border-top-right-image",
        "-webkit-border-bottom-right-image",
        "-moz-border-bottom-right-image",
        "-o-border-bottom-right-image",
        "border-bottom-right-image",
        "-webkit-border-bottom-left-image",
        "-moz-border-bottom-left-image",
        "-o-border-bottom-left-image",
        "border-bottom-left-image",
        "background",
        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
        "background-color",
        "background-image",
        "background-attachment",
        "background-position",
        "-ms-background-position-x",
        "-ms-background-position-y",
        "background-position-x",
        "background-position-y",
        "-webkit-background-clip",
        "-moz-background-clip",
        "background-clip",
        "background-origin",
        "-webkit-background-size",
        "-moz-background-size",
        "-o-background-size",
        "background-size",
        "background-repeat",
        "box-decoration-break",
        "-webkit-box-shadow",
        "-moz-box-shadow",
        "box-shadow",
        "color",
        "table-layout",
        "caption-side",
        "empty-cells",
        "list-style",
        "list-style-position",
        "list-style-type",
        "list-style-image",
        "quotes",
        "content",
        "counter-increment",
        "counter-reset",
        "-ms-writing-mode",
        "vertical-align",
        "text-align",
        "-webkit-text-align-last",
        "-moz-text-align-last",
        "-ms-text-align-last",
        "text-align-last",
        "text-decoration",
        "text-emphasis",
        "text-emphasis-position",
        "text-emphasis-style",
        "text-emphasis-color",
        "text-indent",
        "-ms-text-justify",
        "text-justify",
        "text-outline",
        "text-transform",
        "text-wrap",
        "-ms-text-overflow",
        "text-overflow",
        "text-overflow-ellipsis",
        "text-overflow-mode",
        "text-shadow",
        "white-space",
        "word-spacing",
        "-ms-word-wrap",
        "word-wrap",
        "-ms-word-break",
        "word-break",
        "-moz-tab-size",
        "-o-tab-size",
        "tab-size",
        "-webkit-hyphens",
        "-moz-hyphens",
        "hyphens",
        "letter-spacing",
        "font",
        "font-weight",
        "font-style",
        "font-variant",
        "font-size-adjust",
        "font-stretch",
        "font-size",
        "font-family",
        "src",
        "line-height",
        "opacity",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
        "-ms-interpolation-mode",
        "-webkit-filter",
        "-ms-filter",
        "filter",
        "resize",
        "cursor",
        "nav-index",
        "nav-up",
        "nav-right",
        "nav-down",
        "nav-left",
        "-webkit-transition",
        "-moz-transition",
        "-ms-transition",
        "-o-transition",
        "transition",
        "-webkit-transition-delay",
        "-moz-transition-delay",
        "-ms-transition-delay",
        "-o-transition-delay",
        "transition-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function",
        "-webkit-transition-duration",
        "-moz-transition-duration",
        "-ms-transition-duration",
        "-o-transition-duration",
        "transition-duration",
        "-webkit-transition-property",
        "-moz-transition-property",
        "-ms-transition-property",
        "-o-transition-property",
        "transition-property",
        "-webkit-transform",
        "-moz-transform",
        "-ms-transform",
        "-o-transform",
        "transform",
        "-webkit-transform-origin",
        "-moz-transform-origin",
        "-ms-transform-origin",
        "-o-transform-origin",
        "transform-origin",
        "-webkit-animation",
        "-moz-animation",
        "-ms-animation",
        "-o-animation",
        "animation",
        "-webkit-animation-name",
        "-moz-animation-name",
        "-ms-animation-name",
        "-o-animation-name",
        "animation-name",
        "-webkit-animation-duration",
        "-moz-animation-duration",
        "-ms-animation-duration",
        "-o-animation-duration",
        "animation-duration",
        "-webkit-animation-play-state",
        "-moz-animation-play-state",
        "-ms-animation-play-state",
        "-o-animation-play-state",
        "animation-play-state",
        "-webkit-animation-timing-function",
        "-moz-animation-timing-function",
        "-ms-animation-timing-function",
        "-o-animation-timing-function",
        "animation-timing-function",
        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-animation-iteration-count",
        "-moz-animation-iteration-count",
        "-ms-animation-iteration-count",
        "-o-animation-iteration-count",
        "animation-iteration-count",
        "-webkit-animation-direction",
        "-moz-animation-direction",
        "-ms-animation-direction",
        "-o-animation-direction",
        "animation-direction",
        "pointer-events",
        "unicode-bidi",
        "direction",
        "-webkit-columns",
        "-moz-columns",
        "columns",
        "-webkit-column-span",
        "-moz-column-span",
        "column-span",
        "-webkit-column-width",
        "-moz-column-width",
        "column-width",
        "-webkit-column-count",
        "-moz-column-count",
        "column-count",
        "-webkit-column-fill",
        "-moz-column-fill",
        "column-fill",
        "-webkit-column-gap",
        "-moz-column-gap",
        "column-gap",
        "-webkit-column-rule",
        "-moz-column-rule",
        "column-rule",
        "-webkit-column-rule-width",
        "-moz-column-rule-width",
        "column-rule-width",
        "-webkit-column-rule-style",
        "-moz-column-rule-style",
        "column-rule-style",
        "-webkit-column-rule-color",
        "-moz-column-rule-color",
        "column-rule-color",
        "break-before",
        "break-inside",
        "break-after",
        "page-break-before",
        "page-break-inside",
        "page-break-after",
        "orphans",
        "widows",
        "-ms-zoom",
        "zoom",
        "max-zoom",
        "min-zoom",
        "user-zoom",
        "orientation"
    ] ]
}

gulpfile.js

var gulp            = require('gulp'),
    header          = require('gulp-header'),
    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    csscomb         = require('gulp-csscomb');

var cssCharset  = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset

gulp.task('sass', function() {
  gulp.src('src/scss/**/*scss')
    .pipe(sass({outputStyle: 'expanded'}))
    //.pipe(autoprefixer())
    .pipe(csscomb())
    .pipe(header(cssCharset))
    .pipe(gulp.dest('dist/css'));
})

scssオプションexpandedを設定（無いと意図しないスペースが入る）

20161128

var gulp            = require('gulp'),
    header          = require('gulp-header'),
    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    csscomb         = require('gulp-csscomb');

// config
var cssCharset  = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset

// paths
var paths = {
    srcDir:   'src',
    dstDir:   'dst',
    scssDir:  '/scss',
    cssDir:   '/css',
    jsDir:    '/js',
    scss:     '/**/*.+(scss|sass)',
    css:      '/**/*.css',
    js:       '/**/*.js',
    html:     '/**/*.+(html|php)',
    img:      '/**/*.+(jpg|jpeg|png|gif|svg)'
}

// sass
gulp.task('sass', function() {
  gulp.src( paths.srcDir + paths.scssDir + paths.scss )
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(autoprefixer())
    .pipe(csscomb())
    .pipe(header(cssCharset))
    .pipe(gulp.dest( paths.dstDir + paths.cssDir ));
});

JSHint入門 - JSHintを使ってJSコードの信頼性を高める
http://qiita.com/yuku_t/items/717d636a174ec37ad967

インストール

cmd… npm i -D gulp-jshint

エラーがナゼか出てしまう症状に…
https://github.com/spalger/gulp-jshint#install
よく調べるとgulp-jshintの他にjshintも一緒にインストールする必要があった

cmd… npm install jshint gulp-jshint --save-dev

Gulp でタスクを並列/直列処理する
http://qiita.com/naoiwata/items/4c82140a5fb5d7bdb3f8
https://www.npmjs.com/package/run-sequence

インストール

cmd… npm i -D run-sequence

gulpでビルド時にフォルダを削除する
http://anton0825.hatenablog.com/entry/2015/06/23/000000

インストール

cmd… npm i -D rimraf

今後やりたいこと
・スタイルガイド（FrontNote候補）
・htmlインクルード

gulpfile.js メモ

var gulp            = require('gulp'),
    runSequence     = require('run-sequence'),
    browserSync     = require('browser-sync');
    plumber         = require('gulp-plumber'),
    notify          = require('gulp-notify'),
    rimraf          = require('rimraf'),
    header          = require('gulp-header'),
    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    csscomb         = require('gulp-csscomb')
    imagemin        = require('gulp-imagemin');
    jshint          = require('gulp-jshint');

var cssCharset  = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset

gulp.task('image', function() {
  return gulp.src('./src/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./dst/img'));
});

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(autoprefixer())
    .pipe(header(cssCharset))
    .pipe(gulp.dest('./dst/css'))
});

gulp.task('html', function() {
  return gulp.src('./src/**/*.html', {base: './src'})
    .pipe(gulp.dest('dst'))
});

gulp.task('js', function() {
  return gulp.src('./src/js/**/*.js')
    //.pipe(jshint())
    //.pipe(jshint.reporter('jshint warnning'))
    .pipe(gulp.dest('./dst/js'))
});

gulp.task('clean', function(callback) {
  rimraf('./dst', callback);
});

gulp.task('watch', function(){
  browserSync.init({
    notify: false,
    server:{
      baseDir: './dst',
      index  : 'index.html'
    }
  });

  gulp.watch(['./src/scss/**/*.scss'], ['sass']);
  gulp.watch(['./src/**/*.html'], ['html']);
  gulp.watch(['./src/js/**/*.js'], ['js']);
  gulp.watch(['./src/img/**/*'], ['image']);

  gulp.watch(['./dst/css/**/*.css'], browserSync.reload);
  gulp.watch(['./dst/**/*.html'], browserSync.reload);
  gulp.watch(['./dst/js/**/*.js'], browserSync.reload);
  gulp.watch(['./dst/img/**/*'], browserSync.reload);

});

gulp.task('build', function(callback) {
  runSequence('clean', 'sass', ['js', 'html', 'image'], callback);
});

gulp.task('default', ['watch']);

20161208
今後sjis対応が必要になりそうなのでメモ

gulpで処理結果をShift_JISに変換して出力する
https://www.anothersky.pw/2015/02/gulp_convert_encoding.html

gulp-convert-encodingで文字コードを指定
http://qiita.com/n_kats_/items/05140dfabcf2502782f9

gulp で shift_jis 環境を管理する
http://qiita.com/yokoh9/items/c72cb575ae29749ff2bd

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

gulp初心者のメモ

監視状態は ctrl+c で終了できる

監視状態は　ctrl+c で終了できる