閲覧ありがとうございます。
gulp(v4)で、pugをhtmlにコンパイルしたいのですが、上手くいきません。
お手数ですが、解決法をお教えただけますと幸いです。
よろしくお願い致します。
▼行ったコマンド
C:\Users\Hina\Desktop\sample にて、
npm install gulp --save-dev npm init -y npm install gulp-sass --save-dev npm install gulp-autoprefixer --save-dev npm install gulp-sourcemaps --save-dev npm run dev npm install browser-sync --save-dev npx gulp npm install gulp-pug --save-dev npm run dev
▼エラー文
(pugファイルにて、上書き保存を行うと出ます。それまでは、
[16:07:35] Using gulpfile ~\Desktop\sample\gulpfile.js
[16:07:35] Starting 'dev'...
で止まっています。)
PS C:\Users\Hina\Desktop\sample> npm run dev > sample@1.0.0 dev C:\Users\Hina\Desktop\sample > gulp dev [16:07:35] Using gulpfile ~\Desktop\sample\gulpfile.js [16:07:35] Starting 'dev'... [16:07:57] Starting 'pug'... [16:07:57] 'pug' errored after 38 ms [16:07:57] ReferenceError: plumber is not defined at gulp.task.done (C:\Users\Hina\Desktop\sample\gulpfile.js:66:5) at taskWrapper (C:\Users\Hina\node_modules\undertaker\lib\set-task.js:13:15) at bound (domain.js:395:14) at runBound (domain.js:408:12) at asyncRunner (C:\Users\Hina\node_modules\async-done\index.js:55:18) at process._tickCallback (internal/process/next_tick.js:61:11)
▼index.pug
pug
1doctype html 2html(lang="ja") 3 head 4 meta(charset="utf-8") 5 style(src="css/style.css") 6 title Pugテスト 7 body 8 h1.sitettl Pugテストサイトタイトル 9 main.main 10 h2.content_ttl メインタイトル
▼gulpfile.js
JavaScript
1const gulp = require('gulp'); 2const autoprefixer = require('gulp-autoprefixer'); 3const sass = require('gulp-sass'); 4const sourcemaps = require('gulp-sourcemaps'); 5 6const paths = { 7 'src': { 8 'scss': 'src/scss/**/*.scss', 9 pug: "src/pug/**/*.pug", 10 }, 11 'dist': { 12 'css': 'dist/css/', 13 html: "dist/", 14 } 15}; 16 17gulp.task('sass', done => { 18 gulp.src(paths.src.scss) 19 .pipe(sourcemaps.init()) 20 .pipe(sass({ 21 outputStyle: 'expanded', 22 }).on('error', sass.logError)) 23 .pipe(autoprefixer({ 24 browsers: ['last 2 versions'], 25 })) 26 .pipe(sourcemaps.write()) 27 .pipe(gulp.dest(paths.dist.css)) 28 .pipe(gulp.dest(paths.dist.css)); 29 done(); 30}); 31 32const browserSync = require('browser-sync').create() 33 34gulp.task('serve', done => { 35 browserSync.init({ 36 server: { 37 baseDir: './dist', 38 index: 'index.html', 39 }, 40 }) 41 done() 42}) 43 44gulp.task('watch', () => { 45 const browserReload = done => { 46 browserSync.reload() 47 done() 48 } 49 50 gulp.watch('./dist/**/*', browserReload) 51}) 52 53gulp.task('default', gulp.series('serve', 'watch')) 54 55const pug = require("gulp-pug"); 56 57// setting : Pug Options 58const pugOptions = { 59 pretty: true, 60}; 61 62// pugコンパイル 63gulp.task("pug", done => { 64 gulp 65 .src(paths.src.pug) 66 .pipe( 67 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 68 ) 69 .pipe(pug(pugOptions)) 70 .pipe(gulp.dest(paths.public.html)); 71 done(); 72}); 73 74gulp.task("dev", () => { 75 gulp.watch(paths.src.scss, gulp.task('sass')); 76 gulp.watch(paths.src.pug, gulp.task("pug")); 77});
▼package.json
json
1{ 2 "name": "sample", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "dev": "gulp dev" 9 }, 10 "keywords": [], 11 "author": "", 12 "license": "ISC", 13 "dependencies": {}, 14 "devDependencies": { 15 "browser-sync": "^2.26.5", 16 "gulp-autoprefixer": "^6.1.0", 17 "gulp-pug": "^4.0.1", 18 "gulp-sass": "^4.0.2", 19 "gulp-sourcemaps": "^2.6.5" 20 } 21}
以上になります。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/24 09:19