【Gulp】自分の gulpfile.js はこんな感じ〜！

タイトルがバラエティ番組の１コーナーでありそう！
というわけで、自分なりにですが「gulpfile.js」はこんな感じで運用しています。
運用期間がまだ短いので改善の余地はかなりあると思いますが、修正後は随時更新していきます。
もし何かアドバイスいただけたら嬉しいです。
そもそも別のものを使った方がいい、なんてアドバイスもあればご指摘いただけるとありがたいです。

ディレクトリ構造

 |- 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でも可

gulpfile.js

gulpfile.js

// ------------------------------------------------------------ //
// パッケージ格納
// ------------------------------------------------------------ //
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'
]);

処理内容

◾️Sass
・scss使用。

「gulp.task('sass', function() {　〜」内の上から、
１、エラー通知
２、インデント　ネスト
３、２世代前のブラウザのベンダープレフィックス自動挿入
４、コンパイル後の圧縮
５、ファイル構造を維持し、別ディレクトリに書き出す
６、書き出し先

◾️Pug
「gulp.task('pug', function() {　〜」の上から、

１、エラー通知
２、インデント　ネスト
３、書き出す拡張子の設定と、構造を維持し、別ディレクトリに書き出す
４、書き出し先

◾️JavaScript

「gulp.task('js', function() {　」内の上から、

１、エラー通知
２、圧縮
３、構造を維持し、別ディレクトリに書き出す。
４、書き出し先

◾️その他機能
・上書き保存時、ブラウザをオートリロード