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

【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' 
]);