質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1392閲覧

gulp(v4)で、pugがコンパイルされない

_shizu

総合スコア21

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2019/05/18 07:11

編集2019/05/19 11:43

閲覧ありがとうございます。
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}

以上になります。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ReferenceError: plumber is not defined

plumberが無いって言われてるので、gulp-plumberインストールしてgulpfile.jsで呼び出せばいけるんじゃないですか?

投稿2019/06/05 23:54

runnynose

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_shizu

2019/08/24 09:19

ご回答ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問