gulp version3 → 4 移行流れ

gulpv3 から gulpv4の設定の流れ ※3から4の移行作業になるのでパスなど設定されている前提。

必要Task一覧

pug
stylus
webpack
server
imgcopy
watch

install

% npm uninstall gulp
% npm i -D gulp

gulpを削除して最新gulpがインストール

package.json

"gulp": "^4.0.2",

package.json を確認すると4に変更されたのが確認できた。 install後taskが入っている gulp ディレクリーを gulpfile.js に変更。

task中身の変更

1. pug

gulp3の pugtask中身

gulp/task/pug.js

import gulp from 'gulp';
import pug from 'gulp-pug'
省略.....
gulp.task('pug' () => {
 ...処理... 
};

gulp３からgulp4に変更する場合は必要なモジュールを同じくrequireで定義。

gulpfile.js/task/pug.js

const { src, dest } = require('gulp');
const pug = require('gulp-pug');
省略..

const pugTask = () => {
  ..gulp3の処理をここに入力..
}
exports.pugTask = pugTask;

exports をしたら gulpfile.js の中に index.js ファイルを作成しておく。

gulpfile.js/index.js

//呼びださいは{}指向で定義task関数が多い時にはコンマ区切りで定義
const { pugTask } = require('./task/pug');
exports.pugTask = pugTask;

% gulp pugTask
[16:03:28] Using gulpfile ~/Downloads/projectroot/gulpfile.js
[16:03:28] Starting 'pugTask...
[16:03:29] Finished 'pugTask' after 1.22 s

exports定義をするとコマンドラインで使うことができた👍

gulp3から４に代わった大きな変更点

importの代わりに const 定義で require して呼び出し
Taskをfunctionで定義後 exports をする必要がある
gulpfile.jsのディレクトリにindex.jsをおいておく必要がある

その他

taskを定義しる中モジュールの呼びださいが多くなる場合があるのでその場合は gulp-load-plugins があすすめ。

const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

gulp-load-pluginsを使う場合はimprotをする必要がなくなるのでgulp設定コードが短くなる

簡単なHTMLを書き出しできるpugのtaskを作成。

gulpfile.js/task/pug.js

const { src, dest } = require('gulp');
const browserSync = require('browser-sync');
const { PATHS } = require('../config');

const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

const pug = () => {
  return src(PATHS.PUG.SRC)
    .pipe($.plumber()) // loadPluginsの＄にpugを格納している。
    .pipe(
      $.pug({ // loadPluginsの＄にpugを格納している。
        pretty: true,
        locals: pugOption,
      }),
    )
    .pipe(
      $.rename({ // loadPluginsの＄にrenameを格納している。
        extname: '.php',
      }),
    )
    .on('error', (err) => {
      console.log(err.message);
    })
    .pipe(dest(PATHS.PUG,OUT))
    .pipe(browserSync.stream());
};

exports.pug = pug;

必要なtaskを同じく設定

2.stylus

gulpfile.js/task/stylus.js

const { src, dest } = require('gulp');
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const mqpacker = require('css-mqpacker');
const sortCSSmq = require('sort-css-media-queries');
const rupture = require('rupture');
const { PATHS } = require('../config');

const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

const stylus = () => {
  return src(PATHS.STYLUS.SER)
    .pipe($.sourcemaps.init())
    .pipe($.plumber())
    .pipe(
      $.stylus({
        'include css': true,
        compress: true,
        use: [rupture()],
      }),
    )
    .pipe(
      $.postcss([
        mqpacker({
          sort: sortCSSmq,
        }),
        autoprefixer({
          remove: false,
          browsers: ['last 4 versions'],
        }),
      ]),
    )
    .on('error', function(err) {
      console.log(err.message);
    })
    .pipe($.sourcemaps.write('.'))
    .pipe(dest(PATHS.STYLUS.OUT))
    .pipe(browserSync.stream());
};

exports.stylus = stylus;

3.webpack

gulpfile.js/task/webpack.js

const { dest } = require('gulp');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const webpackConfig = require('../../webpack.config');
const browserSync = require('browser-sync');
const { PATHS } = require('../config');

const js = () => {
  return webpackStream(webpackConfig, webpack)
    .pipe(dest(PATHS.JS.SRC))
    .pipe(browserSync.stream());
};
exports.js = js;

4.server

gulpfile.js/task/server.js

const browserSync = require('browser-sync');
const connect = require('gulp-connect-php');
const { PATHS } = require('../config');

const server = () => {
  connect.server(
    {
      port: PATHS.BROWSERSYNC.PORT,
      base: PATHS.BROWSERSYNC.DOCUMENT_ROOT,
      stdio: 'ignore',
    },
    () => {
      browserSync({
        proxy: PATHS.BROWSERSYNC.PROXY,
      });
    },
  );
};
exports.server = server;

watch

最後にwatch設定。

gulpfile.js/index.js

const { watch, series, parallel } = require('gulp');
const { pug } = require('./tasks/pug');
const { stylus } = require('./tasks/stylus');
const { js } = require('./tasks/webpack');
const { server } = require('./tasks/server');
const browserSync = require('browser-sync');
const connect = require('gulp-connect-php');

const { PATHS } = require('./config');

const watchTask = () => {
  connect.server(
    {
      port: PATHS.BROWSERSYNC.PORT,
      base: PATHS.BROWSERSYNC.DOCUMENT_ROOT,
      stdio: 'ignore',
    },
    () => {
      browserSync({
        proxy: PATHS.BROWSERSYNC.PROXY,
      });
    },
  );
  watch(
    [ '監視したいパス' ],
    parallel(pug, stylus, js, php, copyimg),
  ).on('change', series(browserReload));　
  //watchしたパスの常に監視してonchangeした場合動的に変わる処理
};

exports.default = series(parallel(pug, stylus, js, copyimg), watchTask);
exports.pug = pug;
exports.stylus = stylus;
exports.js = js;
exports.watchTask = watchTask;
exports.server = server;