Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

タイトルがバラエティ番組の1コーナーでありそう!
というわけで、自分なりにですが「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() { 〜」内の上から、
1、エラー通知
2、インデント ネスト
3、2世代前のブラウザのベンダープレフィックス自動挿入
4、コンパイル後の圧縮
5、ファイル構造を維持し、別ディレクトリに書き出す
6、書き出し先

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

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

◾️JavaScript

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

1、エラー通知
2、圧縮
3、構造を維持し、別ディレクトリに書き出す。
4、書き出し先

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

hacchi56
マークアップエンジニア3年目。愛知県在住の29歳です。バックエンドエンジニアを目指し「Ruby on Rails」を学習中。自分を疑っている部分もあるので、積極的に「LGTM」していただけると喜んじゃいます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away