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

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

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

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

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

Q&A

解決済

【追記】gulp4を使用して同階層でdestフォルダにsassとpugを自動コンパイルさせたい

wa_
wa_

総合スコア55

Pug

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

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

2回答

0グッド

0クリップ

850閲覧

投稿2019/04/22 03:12

編集2019/05/13 03:37

前提・実現したいこと

【実現したいこと】
pug、css、sassを同階層でdestフォルダにリアルタイムで自動コンパイルと
cssファイルはコピーさせること

【問題】
js,gulpに関して初心者です。
gulpを使ってsassを同じ階層で自動コンパイルするとエラーが出る。

【概要】
とあるサイトからテンプレートをダウンロードして、自分のしたいことを
肉付けしていきました。
sassを入れる前はpugなど、全て自動コンパイルが出来ていました。

【参考サイト】
https://www.tam-tam.co.jp/tipsnote/html_css/post10973.html
http://hiromode.hatenablog.com/entry/2018/07/29/154522
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b

発生している問題・エラーメッセージ

gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles))); ^ TypeError: gulp.parallel is not a function at Object.<anonymous> (C:\Users\Documents\pug-sass-test\gulpfile.js:139:39) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Liftoff.handleArguments (C:\Users\Documents\pug-sass-test\node_modules\gulp\bin\gulp.js:116:3) at Liftoff.execute (C:\Users\Documents\pug-sass-test\node_modules\liftoff\index.js:203:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gulp-pug-test@1.0.0 start: `gulp` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the gulp-pug-test@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

ディレクトリ構造

ディレクトリ構造

gulpfile.jsのソースコード

JavaScript

1const gulp = require('gulp'); 2 3//pug 4const pug = require('gulp-pug'); 5const fs = require('fs'); 6const data = require('gulp-data'); 7const path = require('path'); 8const plumber = require('gulp-plumber'); 9const notify = require('gulp-notify'); 10const browserSync = require('browser-sync'); 11 12//css 13const sass = require('gulp-sass'); 14const sassGlob = require('gulp-sass-glob'); 15const postcss = require('gulp-postcss'); 16const flexBugsFixes = require('postcss-flexbugs-fixes'); 17const autoprefixer = require('gulp-autoprefixer'); //Sassにベンダープレフィックスをつける 18const rename = require('gulp-rename'); //ファイルをリネーム 19 20/** 21 * 開発用のディレクトリを指定します。 22 */ 23const src = { 24 // 出力対象は`_`で始まっていない`.pug`ファイル。 25 'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'], 26 // JSONファイルのディレクトリを変数化。 27 'json': 'src/_data/', 28 'css': 'src/**/*.css', 29 'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'], 30 //'styleguideWatch': 'src/**/*.scss', 31 'js': 'src/**/*.js' 32}; 33 34/** 35 * 出力するディレクトリを指定します。 36 */ 37const dest = { 38 'root': 'dest/', 39 'html': 'dest/' 40}; 41 42/** 43 * `.pug`をコンパイルしてから、destディレクトリに出力します。 44 * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。 45 */ 46function html() { 47 // JSONファイルの読み込み。 48 var locals = { 49 'site': JSON.parse(fs.readFileSync(src.json + 'site.json')) 50 } 51 return gulp.src(src.html) 52 // コンパイルエラーを通知します。 53 .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) 54 // 各ページごとの`/`を除いたルート相対パスを取得します。 55 .pipe(data(function(file) { 56 locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html')); 57 return locals; 58 })) 59 .pipe(pug({ 60 // JSONファイルとルート相対パスの情報を渡します。 61 locals: locals, 62 // Pugファイルのルートディレクトリを指定します。 63 // `/_includes/_layout`のようにルート相対パスで指定することができます。 64 basedir: 'src', 65 // Pugファイルの整形。 66 pretty: true 67 })) 68 .pipe(gulp.dest(dest.html)) 69 .pipe(browserSync.reload({stream: true})); 70} 71 72/** 73 * cssファイルをdestディレクトリに出力(コピー)します。 74 */ 75function css() { 76 return gulp.src(src.css, {base: src.root}) 77 .pipe(gulp.dest(dest.root)) 78 .pipe(browserSync.reload({stream: true})); 79} 80 81 82/** 83 * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。 84 */ 85function sass_style() { 86 const plugins = [flexBugsFixes(), autoprefixer()]; 87 return gulp.src(src.scss, {base: src.root}) 88 .pipe(sassGlob()) 89 .pipe(sass({ 90 outputStyle: 'expanded', 91 }).on('error', sass.logError), 92 ) 93 .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) 94 .pipe(postcss(plugins)) 95 .pipe(autoprefixer({ // ベンダープレフィックスの付与 96 browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定 97 cascade: true // 整形する 98 })) 99 .pipe(rename(function (path) { 100 path.dirname += '/css'; 101 })) 102 .pipe(gulp.dest('../')) 103 .pipe(browserSync.reload({ stream: true })); 104} 105 106/** 107 * jsファイルをdestディレクトリに出力(コピー)します。 108 */ 109function js() { 110 return gulp.src(src.js, {base: src.root}) 111 .pipe(gulp.dest(dest.root)) 112 .pipe(browserSync.reload({stream: true})); 113} 114 115/** 116 * ローカルサーバーを起動します。 117 */ 118function browsersync() { 119 browserSync({ 120 server: { 121 baseDir: dest.root, 122 index: "index.html" 123 } 124 }); 125}; 126 127/** 128 * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。 129 */ 130function watchFiles(done) { 131 gulp.watch(src.html).on('change', gulp.series(html, browserReload)); 132 gulp.watch(src.scss).on('change', gulp.series(sass_style, browserReload)); 133 gulp.watch(src.css).on('change', gulp.series(css, browserReload)); 134 gulp.watch(src.js).on('change', gulp.series(js, browserReload)); 135} 136 137gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles))); 138 139/** 140 * 開発に使うタスクです。 141 * package.jsonに設定をして、`npm run default`で実行できるようにしています。 142 */ 143gulp.task('default', ['watch']); 144

index.pug

pug

1extend /_includes/_layout 2append variables 3 //- Required 4 - var pageTitle= ""; 5 - var pageDescription= site.description; 6 - var pageKeywords= site.keywords; 7 //- Optional 8 - var pageOgpTitle= ""; 9 - var pageOgpImage= site.ogpImage 10 - var pageLang= "ja"; 11 - var pageOgpType= "website"; 12 //- Not modified 13 - var pageUrl= relativePath; 14 15//- 固定ページにのみ追加のCSS 16append css 17 link(rel="stylesheet" href="/about/css/about.css") 18 19//- 固定ページにのみ追加のJS 20append js 21 script(src="/assets/js/common2.js") 22 23block content 24 // contents 25 p Contents変更しますよ 26 // /contents 27

_footer.pug

pug

1// footer 2footer 3 p: small copyright m-field 4// /footer 5

_header.pug

pug

1// header 2header 3 h1.site-name Pugで作ったサイト 4 5nav.global-nav 6 ul 7 li: a(href="#") トップ 8 li: a(href="#") メニュー01 9 li: a(href="#") メニュー02 10 li: a(href="#") メニュー03 11 li: a(href="#") メニュー04 12// /header 13

_layout.pug

pug

1block variables 2doctype html 3html(lang=pageLang) 4 head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# " + pageOgpType + ": http://ogp.me/ns/" + pageOgpType + "#") 5 include /_includes/_meta 6 7 body 8 include /_includes/_header 9 10 block content 11 12 include /_includes/_footer 13 include /_includes/_script

base.scss

scss

1$pc: 1024px; // PC 2$tab: 680px; // タブレット 3$sp: 480px; // スマホ 4 5@mixin pc { 6 @media (max-width: ($pc)) { 7 @content; 8 } 9} 10@mixin tab { 11 @media (max-width: ($tab)) { 12 @content; 13 } 14} 15@mixin sp { 16 @media (max-width: ($sp)) { 17 @content; 18 } 19} 20 21.box { 22 @include pc { 23 background-color: red; 24 }; 25 @include tab { 26 background-color: blue; 27 }; 28 @include sp { 29 background-color: yellow; 30 }; 31} 32 33@import "a"; 34@import "b"; 35

_a.scss

_a.scss

1.classA { 2 background-color: red; 3} 4

_b.scss

_b.scss

1.classB { 2 background-color: blue; 3} 4

common.js

js

1(function() { 2 console.log('Hello!!'); 3}()); 4

package.json

json

1{ 2 "name": "gulp-pug-test", 3 "version": "1.0.0", 4 "description": "GulpでPugを実行するためのテスト環境です。", 5 "main": "index.js", 6 "scripts": { 7 "start": "gulp" 8 }, 9 "keywords": [ 10 "gulp", 11 "pug" 12 ], 13 "author": "テンプレ作成者名", 14 "license": "MIT", 15 "devDependencies": { 16 "browser-sync": "^2.26.4", 17 "gulp": "^4.0.1", 18 "gulp-autoprefixer": "^6.1.0", 19 "gulp-clean-css": "^4.0.0", 20 "gulp-data": "^1.3.1", 21 "gulp-notify": "^3.2.0", 22 "gulp-plumber": "^1.2.1", 23 "gulp-postcss": "^8.0.0", 24 "gulp-pug": "^4.0.1", 25 "gulp-rename": "^1.4.0", 26 "gulp-sass": "^4.0.2", 27 "gulp-sass-glob": "^1.0.9", 28 "postcss-flexbugs-fixes": "^4.1.0" 29 } 30}

試したこと

・gulpのバージョン違いによるものかと考えたので
参考サイトに従い、変更すべきところを変更しました。
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b

・変数名が間違えているのかチェック
・package.jsonのアップデート
・gulpfile.jsのwatch部分の記述を変更
・以下のサイトに従ってパッケージのgulpをアップデートするが
package.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか
CLI version 2.1.0
Local version 3.9.1
となってしまう
https://kenyo--c.com/css/1572/

補足情報(FW/ツールのバージョンなど)

gulpのバージョン
CLI version 2.1.0
Local version 3.9.1

node v10.15.3
npm v6.4.1

マルチポスト先

スタックオーバー

ここにより詳細な情報を記載してください。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

s8_chu

2019/04/22 04:08

質問者さんの記述した`package.json`ファイルと、ディレクトリの構成、記述した Pug, SCSS, JavaScript を教えていただけませんか?
s8_chu

2019/04/22 05:07 編集

コメントしていただいたディレクトリ構成を読んだのですが、各 Pug, SCSS, JavaScript ファイルは src ディレクトリ内ではなく、 package.json ファイルと同じ階層にあるのでしょうか? コメント欄はスペースやタブが削除されてしまうことがあるので、もしスペースが削除されてしまっているのであれば、質問文に追記をしていただけませんか?
wa_

2019/04/22 05:15

失礼しました。 pug,scss,jsはsrcの中に存在しています。 今から質問文に追記していきますので少々お待ちください。
wa_

2019/04/23 01:00

s8_chu様 質問文に追記しましたのでご確認ください。 どうぞよろしくお願い致します。

回答2

0

自己解決

他で色々と質問を分散させて解決に至りましたので書きます。

解決手順

①node_modulesの再インストール
②タスクの終了を明示させる。gulp-autoprefixer を autoprefixer に変更。その他書き間違いの変更。

gulpfile.js

js

1'use strict'; 2 3const gulp = require('gulp'); 4 5//pug 6const pug = require('gulp-pug'); 7const fs = require('fs'); 8const data = require('gulp-data'); 9const path = require('path'); 10const plumber = require('gulp-plumber'); 11const notify = require('gulp-notify'); 12const browserSync = require('browser-sync'); 13 14//css 15const sass = require('gulp-sass'); 16const sassGlob = require('gulp-sass-glob'); 17const postcss = require('gulp-postcss'); 18const flexBugsFixes = require('postcss-flexbugs-fixes'); 19const autoprefixer = require('autoprefixer'); //Sassにベンダープレフィックスをつける 20const rename = require('gulp-rename'); //ファイルをリネーム 21 22/** 23 * 開発用のディレクトリを指定します。 24 */ 25const src = { 26 // 出力対象は`_`で始まっていない`.pug`ファイル。 27 'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'], 28 // JSONファイルのディレクトリを変数化。 29 'json': 'src/_data/', 30 'css': 'src/**/*.css', 31 'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'], 32 //'styleguideWatch': 'src/**/*.scss', 33 'js': 'src/**/*.js', 34 'root': 'src/' 35}; 36 37/** 38 * 出力するディレクトリを指定します。 39 */ 40const dest = { 41 'root': 'dest/', 42 'html': 'dest/' 43}; 44 45/** 46 * `.pug`をコンパイルしてから、destディレクトリに出力します。 47 * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。 48 */ 49function html() { 50 // JSONファイルの読み込み。 51 var locals = { 52 'site': JSON.parse(fs.readFileSync(src.json + 'site.json')) 53 }; 54 return gulp.src(src.html) 55 // コンパイルエラーを通知します。 56 .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) 57 // 各ページごとの`/`を除いたルート相対パスを取得します。 58 .pipe(data(function (file) { 59 locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html')); 60 return locals; 61 })) 62 .pipe(pug({ 63 // JSONファイルとルート相対パスの情報を渡します。 64 locals: locals, 65 // Pugファイルのルートディレクトリを指定します。 66 // `/_includes/_layout`のようにルート相対パスで指定することができます。 67 basedir: 'src', 68 // Pugファイルの整形。 69 pretty: true 70 })) 71 .pipe(gulp.dest(dest.html)) 72 .pipe(browserSync.reload({stream: true})); 73} 74 75/** 76 * cssファイルをdestディレクトリに出力(コピー)します。 77 */ 78function css() { 79 return gulp.src(src.css, {base: src.root}) 80 .pipe(gulp.dest(dest.root)) 81 .pipe(browserSync.reload({stream: true})); 82} 83 84 85/** 86 * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。 87 */ 88function sass_style() { 89 const plugins = [flexBugsFixes(), autoprefixer({ // ベンダープレフィックスの付与 90 browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定 91 cascade: true // 整形する 92 })]; 93 return gulp.src(src.sass_style, {base: src.root}) 94 .pipe(sassGlob()) 95 .pipe(sass({ 96 outputStyle: 'expanded', 97 }).on('error', sass.logError) 98 ) 99 .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) 100 .pipe(postcss(plugins)) 101 // .pipe(rename(function (path) { 102 // path.dirname += '/css'; 103 // })) 104 .pipe(gulp.dest(dest.root)) 105 .pipe(browserSync.reload({ stream: true })); 106} 107 108 109 110/** 111 * jsファイルをdestディレクトリに出力(コピー)します。 112 */ 113function js() { 114 return gulp.src(src.js, {base: src.root}) 115 .pipe(gulp.dest(dest.root)) 116 .pipe(browserSync.reload({stream: true})); 117} 118 119/** 120 * ローカルサーバーを起動します。 121 */ 122function browser_sync(done) { 123 browserSync({ 124 server: { 125 baseDir: dest.root, 126 index: 'index.html' 127 } 128 }); 129 done(); 130} 131 132/** 133 * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。 134 */ 135function watchFiles(done) { 136 gulp.watch(src.html).on('change', gulp.series(html)); 137 gulp.watch(src.sass_style).on('change', gulp.series(sass_style)); 138 gulp.watch(src.css).on('change', gulp.series(css)); 139 gulp.watch(src.js).on('change', gulp.series(js)); 140} 141 142gulp.task('watch', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browser_sync, watchFiles))); 143 144 145/** 146 * 開発に使うタスクです。 147 * package.jsonに設定をして、`npm run default`で実行できるようにしています。 148 */ 149gulp.task('default', gulp.task('watch')); 150

③package.jsonの変更。グローバルのgulpを読み込もうとしたため

json

1{ 2 "name": "pug-sass-test-kaihen", 3 "version": "1.0.0", 4 "description": "Gulpを使用したPugの導入テストリポジトリです。", 5 "main": "browsersync.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "gulp": "gulp" 9 }, 10 "keywords": [ 11 "gulp", 12 "pug", 13 "Sass" 14 ], 15 "author": "", 16 "license": "ISC", 17 "devDependencies": { 18 "autoprefixer": "^9.5.1", 19 "browser-sync": "^2.26.5", 20 "gulp": "^4.0.1", 21 "gulp-data": "^1.3.1", 22 "gulp-notify": "^3.2.0", 23 "gulp-plumber": "^1.2.1", 24 "gulp-postcss": "^8.0.0", 25 "gulp-pug": "^4.0.1", 26 "gulp-rename": "^1.4.0", 27 "gulp-sass": "^4.0.2", 28 "gulp-sass-glob": "^1.0.9", 29 "postcss-flexbugs-fixes": "^4.1.0" 30 } 31} 32

投稿2019/05/06 02:07

wa_

総合スコア55

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

s8_chu

2019/05/06 02:40 編集

マルチポスト先をこの質問の質問文に明示していただけませんか?
wa_

2019/05/06 02:50

質問文に追記しました。 スタックオーバーで質問したことは全てこの質問に係っています。

0

エラーメッセージ通りで、constとfunctionで同名のsassを使用しているからでは?
(エラーメッセージが画像なのでコピペできないから書きません。自分で探してくださいね>質問者さん)

... const sass = require('gulp-sass'); ... function sass() { ... } ...

投稿2019/04/23 02:06

Y.H.

総合スコア7909

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

wa_

2019/04/23 02:28

思うところを変更したら、sassに関するエラーは無くなりました。 ただ下記のようなエラーが出たので考えたいと思います。 [11:24:08] Task 'html' is not in your gulpfile [11:24:08] Please check the documentation for proper gulpfile formatting もしかして全体的にgulp 4での変更した書き方がよろしくないのでしょうか
wa_

2019/04/26 04:47

ご回答、ありがとうございます。 ご指摘していただいた所を修正したのですが gulp.parallel is not a function というエラーが出ました。 調べたところgulpのバージョンが関係しているという記事を見ました。 なので、質問内容に試みたことやエラーに関する追記したので もし良かったらご確認いただけないでしょうか。 どうぞよろしくお願い致します。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Pug

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

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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