gulp v4でgulp.taskを使わないで記載してみる

gulpv4でgulp.taskが非推奨とのことだったので、少し変更したときのメモ。

前提条件

• html,cssを動かしたいだけなので、pug,scssの変換のみ(js,imgなどはなし)。
• ファイルの監視・ビルドがメインになるので、ローカルサーバーを立てるなどのことはしない。

変更した箇所について

変更前

v4の状態でも一応動きます。

gulpfile.js

const gulp = require('gulp')
const pug = require('gulp-pug')
const sass = require('gulp-sass')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const filepath = {
  src: 'src/',
  dist: 'dist/'
}
const src = {
  html: `${filepath.src}**/*.pug`,
  css: `${filepath.src}scss/*.scss`
}
gulp.task('html', () => {
  return gulp
    .src(src.html)
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(
      pug({
        basedir: 'src',
        pretty: true,
      })
    )
    .pipe(gulp.dest(filepath.dist))
})
gulp.task("css", () => {
  return gulp
    .src(src.css)
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(sass())
    .pipe(gulp.dest(`${filepath.dist}css`))
})

gulp.task('watch', gulp.series(gulp.parallel('html', 'css'), () => {
  gulp.watch(src.html, gulp.task('html'))
  gulp.watch(src.css, gulp.task('css'))
}))

gulp.task('default', gulp.task('watch'))
gulp.task('build', gulp.parallel('html', 'css'))

変更後

gulpfile.js

const { src, dest, watch, parallel } = require('gulp')
const pug = require('gulp-pug')
const sass = require('gulp-sass')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const filepath = {
  src: 'src/',
  dist: 'dist/'
}
const filesrc = {
  html: `${filepath.src}**/*.pug`,
  css: `${filepath.src}scss/**/*.scss`
}

const html = () => {
  return src(filesrc.html)
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(
      pug({
        basedir: 'src',
        pretty: true,
      })
    )
    .pipe(dest(filepath.dist))
}

const css = () => {
  return src(filesrc.css)
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(sass())
    .pipe(dest(`${filepath.dist}css`))
}

exports.default = () => {
  watch(filesrc.html, html)
  watch(filesrc.css, css)
}
exports.build = parallel(html, css)

ブラウザが開く&開発・本番環境などで行うことを切り分ける(2019.06.16追記)

変更した点

• scssからstylusに変更
• browser-syncを使いgulpfile起動時にブラウザを開く
• 実際のプロジェクトで使ったものの抜粋なので、pugの対応ファイルの場所の変更
• 開発時にはcssのsourcemap生成・本番時にはhtmlファイルを1行にするなどの開発・本番環境で処理を分ける

ファイルの中身

gulpfile.js

const { src, dest, watch, parallel } = require('gulp')
const pug = require('gulp-pug')
const data = require('gulp-data')
const stylus = require('gulp-stylus')
const postcss = require('gulp-postcss')
const cssnext = require('postcss-cssnext')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const sourcemaps = require('gulp-sourcemaps')
const cleanCSS = require('gulp-clean-css')
const browserSync = require('browser-sync')
const htmlmin = require('gulp-htmlmin')
const mode = require('gulp-mode')({
  modes: ['production', 'development'],
  default: 'development',
  verbose: false,
})


const srcPath = {
  html: [
    'src/pages/**/*.pug',
    '!' + 'src/**/_*.pug',
  ],
  stylus: 'src/**/*.styl',
}

const destPath = {
  root: 'dist/',
  assets: 'dist/assets/',
}

const htmlFunc = () => {
  return src(srcPath.html)
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(
      data(file => {
        return {
          relativePath: file.history[0].replace(file.base, ''),
        }
      })
    )
    .pipe(
      pug({
        basedir: 'src',
        pretty: true,
      })
    )
    .pipe(
      mode.production(
        htmlmin({
          collapseWhitespace: true,
          minifyJS: true,
          removeComments: true,
        })
      )
    )
    .pipe(dest(destPath.root))
    .pipe(browserSync.reload({ stream: true }))
}

const browsers = [
  'last 2 versions',
  '> 5%',
  'ie = 11',
  'not ie <= 10',
  'ios >= 8',
  'and_chr >= 5',
  'Android >= 5',
]

const stylusFunc = () => {
  return src('src/assets/stylus/*.styl')
    .pipe(mode.development(sourcemaps.init()))
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    )
    .pipe(stylus())
    .pipe(postcss([cssnext(browsers)]))
    .pipe(cleanCSS())
    .pipe(mode.development(sourcemaps.write()))
    .pipe(dest(`${destPath.assets}css/`))
    .pipe(browserSync.reload({ stream: true }))
}

const browserSyncFunc = () => {
  browserSync({
    server: {
      baseDir: 'dist/',
      index: 'index.html',
    },
  })
}

const watchFiles = () => {
  watch(srcPath.html[0], htmlFunc)
  watch(srcPath.stylus, stylusFunc)
}

exports.default = parallel(watchFiles, browserSyncFunc)

exports.build = parallel(htmlFunc, stylusFunc)

参考にしたリンク

• https://twitter.com/tonkotsuboy_com/status/1133319513825394688
• https://gulpjs.com/docs/en/getting-started/working-with-files
• https://gulpjs.com/docs/en/getting-started/watching-files