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)