|- dev ---- 開発用
 |  |- gulp
 |  |  |- gulpfile.js
 |  |  |- etc...
 |  |   
 |  |- devhtml ---- .pug、.scss、.jsファイル格納（.jsは圧縮のため）
 |     |- common
 |     |  |- css 
 |     |     |- import.scss ---- partialディレクト内ファイル読み込み
 |     |  |- partial 
 |     |     |- _variable.scss ---- 変数まとめファイル格納 
 |     |
 |     |- css
 |     |  |- index.scss 
 |     |- js
 |     |  |- index.js
 |     |
 |     |- index.pug
 |    
 |- html ---- 納品用、主なコンパイル先
    |- common
    |  |- css 
    |     |- import.css 
    |
    |- css
    |  |- index.css
    |- img ---- 別ツールで一括サイズ圧縮
    |  |- sample.jpg 
    |- js
    |  |- index.js 
    |
    |- index.html ---- .phpでも可

// ------------------------------------------------------------ //
// パッケージ格納
// ------------------------------------------------------------ //
const gulp = require('gulp'); // Gulp本体
const connect = require('gulp-connect-php'); // PHP使用に必須
const sass = require('gulp-sass'); // Sass（コンパイル必須）
const pug = require('gulp-pug'); // Pug（コンパイル必須）
const rename = require('gulp-rename'); // ファイルネーム変更
const autoprefixer = require('gulp-autoprefixer'); //ベンダープレフィックス付与
const browserSync = require('browser-sync'); //ブラウザ自動更新
const watch = require('gulp-watch'); // 監視
const notify = require('gulp-notify'); // エラー通知
const plumber = require('gulp-plumber'); //エラーによる動作停止を回避
const uglify = require('gulp-uglify'); //JSファイル圧縮
const cleanCss = require('gulp-clean-css'); //CSSファイル圧縮
const changed = require('gulp-changed'); //更新ファイルのみコンパイル


// ------------------------------------------------------------ //
// ディレクトリパス格納
// ------------------------------------------------------------ //

var htmlPass = '../../html'; // 納品用html
var devhtmlPass = '../devhtml'; // 開発用html
var allPug = '/**/*.pug'; // 全ての.pugファイル
var allHtml = '/**/*.html'; // 全ての.htmlファイル
var allPhp = '/**/*.php'; // 全ての.phpファイル
var allScss = '/**/*.scss'; // 全ての.scssファイル
var allCss = '/**/*.css'; // 全ての.cssファイル
var allJs = '/**/*.js'; // 全ての.jsファイル

//---------- 開発用(devhtml)ディレクトリ内 ----------//

var checkDevhtml = [
  devhtmlPass + allScss, //開発用htmlの.scss全て
  devhtmlPass + allPug, //開発用htmlの.pug全て
  devhtmlPass + allJs //開発用htmlの.js全て
]

// ---------- 納品用(html)ディレクトリ内 ----------//
var checkHtml = [
  htmlPass + allHtml, //納品htmlの.js全て
  htmlPass + allPhp, //納品htmlの.js全て
  htmlPass + allCss, //納品htmlの.js全て
  htmlPass + allJs //納品htmlの.js全て
]

// ------------------------------------------------------------ //
// タスク設定
// ------------------------------------------------------------ //

//---------- Sass ----------//
gulp.task('sass', function() {
  gulp.src(checkDevhtml[0], {
      base: devhtmlPass
    })
    .pipe(plumber({
      errorHandler: notify.onError({
        title: "Sassエラー発見！", // 任意のタイトルを表示させる
        message: "<%= error.message %>" // エラー内容を表示させる
      })
    }))
    .pipe(sass({
      errLogToConsole: true,
      outputStyle: 'expanded'
    }))
    .pipe(autoprefixer({
      browsers: ["last 2 versions"]
    }))
    .pipe(cleanCss())
    .pipe(rename(function(path) {
      path.dirname += ''; // 「devhtml」内のディレクトリ構造を維持して書き出すために必要
    }))
    .pipe(gulp.dest(htmlPass));
});


//---------- Pug ----------//

gulp.task('pug', function() {
  gulp.src(checkDevhtml[1], {
      base: devhtmlPass
    })
    .pipe(plumber({
      errorHandler: notify.onError({
        title: "Pugエラー発見！", // 任意のタイトルを表示させる
        message: "<%= error.message %>" // エラー内容を表示させる
      })
    }))
    .pipe(pug({
      pretty: true
    }))
    .pipe(rename({
      extname: '.php', //コンパイル後php拡張子で出力したい場合使用
      function(path) {
        path.dirname += ''; //「devhtml」内のディレクトリ構造を維持して書き出すために必要
      }
    }))
    .pipe(gulp.dest(htmlPass));
});


//---------- JavaScript ----------//

gulp.task('js', function() {
  gulp.src(checkDevhtml[2], {
      base: devhtmlPass
    })
    .pipe(plumber({
      errorHandler: notify.onError({
        title: "JavaScriptエラー発見！", // 任意のタイトルを表示させる
        message: "<%= error.message %>" // エラー内容を表示させる
      })
    }))
    .pipe(uglify())
    .pipe(rename(function(path) {
      path.dirname += ''; // 「devhtml」内のディレクトリ構造を維持して書き出すために必要
    }))
    .pipe(gulp.dest(htmlPass));
});


//---------- ブラウザオートリロード ----------//
gulp.task('browser-sync', function() {
  return browserSync.init(null, {
    proxy: "○○○", // 開発環境に合わせたプロキシを入力
    // index: "index.php" // .php使用する場合
  });
});

gulp.task('bs-reload', function() {
  browserSync.reload();
});


//---------- 監視 ----------//

gulp.task('watch-sass', function() {
  return watch(checkDevhtml[0], function() {
    return gulp.start(['sass']);
  });
});

gulp.task('watch-pug', function() {
  return watch(checkDevhtml[1], function() {
    return gulp.start(['pug']);
  });
});

gulp.task('watch-js', function() {
  return watch(checkDevhtml[2], function() {
    return gulp.start(['js']);
  });
});

// 自動ロード
gulp.task('watch-bsReload', function() {
  return watch(checkDevhtml, function() {
    return gulp.start(['bs-reload']);
  });
});



// ------------------------------------------------------------ //
// タスク処理実行
// ------------------------------------------------------------ //

gulp.task('default', [
  'browser-sync',
  'watch-sass',
  'watch-pug',
  'watch-js',
  'watch-bsReload'
]);