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

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

More than 1 year has passed since last update.

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)

参考にしたリンク

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