1. miwashutaro0611

    Posted

    miwashutaro0611
Changes in title
+gulp v4でgulp.taskを使わないで記載してみる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,117 @@
+gulpv4で`gulp.task`が非推奨とのことだったので、少し変更したときのメモ。
+
+
+# 前提条件
+
+- html,cssを動かしたいだけなので、pug,scssの変換のみ(js,imgなどはなし)。
+- ファイルの監視・ビルドがメインになるので、ローカルサーバーを立てるなどのことはしない。
+
+# 変更した箇所について
+
+## 変更前
+
+v4の状態でも一応動きます。
+
+```js: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'))
+```
+
+変更後
+
+```js: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)
+```
+
+# 参考にしたリンク
+
+- 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
+
+
+
+