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

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

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

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

コンパイル

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

コンパイルエラー

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

Sass

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

gulp

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

解決済

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

wa_
wa_

総合スコア0

Pug

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

コンパイル

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

コンパイルエラー

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

Sass

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

gulp

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

2回答

0評価

0クリップ

23閲覧

投稿2019/04/22 03:12

編集2022/01/12 10:58

前提・実現したいこと

【実現したいこと】
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

const gulp = require('gulp'); //pug const pug = require('gulp-pug'); const fs = require('fs'); const data = require('gulp-data'); const path = require('path'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const browserSync = require('browser-sync'); //css const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const postcss = require('gulp-postcss'); const flexBugsFixes = require('postcss-flexbugs-fixes'); const autoprefixer = require('gulp-autoprefixer'); //Sassにベンダープレフィックスをつける const rename = require('gulp-rename'); //ファイルをリネーム /** * 開発用のディレクトリを指定します。 */ const src = { // 出力対象は`_`で始まっていない`.pug`ファイル。 'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'], // JSONファイルのディレクトリを変数化。 'json': 'src/_data/', 'css': 'src/**/*.css', 'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'], //'styleguideWatch': 'src/**/*.scss', 'js': 'src/**/*.js' }; /** * 出力するディレクトリを指定します。 */ const dest = { 'root': 'dest/', 'html': 'dest/' }; /** * `.pug`をコンパイルしてから、destディレクトリに出力します。 * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。 */ function html() { // JSONファイルの読み込み。 var locals = { 'site': JSON.parse(fs.readFileSync(src.json + 'site.json')) } return gulp.src(src.html) // コンパイルエラーを通知します。 .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) // 各ページごとの`/`を除いたルート相対パスを取得します。 .pipe(data(function(file) { locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html')); return locals; })) .pipe(pug({ // JSONファイルとルート相対パスの情報を渡します。 locals: locals, // Pugファイルのルートディレクトリを指定します。 // `/_includes/_layout`のようにルート相対パスで指定することができます。 basedir: 'src', // Pugファイルの整形。 pretty: true })) .pipe(gulp.dest(dest.html)) .pipe(browserSync.reload({stream: true})); } /** * cssファイルをdestディレクトリに出力(コピー)します。 */ function css() { return gulp.src(src.css, {base: src.root}) .pipe(gulp.dest(dest.root)) .pipe(browserSync.reload({stream: true})); } /** * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。 */ function sass_style() { const plugins = [flexBugsFixes(), autoprefixer()]; return gulp.src(src.scss, {base: src.root}) .pipe(sassGlob()) .pipe(sass({ outputStyle: 'expanded', }).on('error', sass.logError), ) .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) .pipe(postcss(plugins)) .pipe(autoprefixer({ // ベンダープレフィックスの付与 browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定 cascade: true // 整形する })) .pipe(rename(function (path) { path.dirname += '/css'; })) .pipe(gulp.dest('../')) .pipe(browserSync.reload({ stream: true })); } /** * jsファイルをdestディレクトリに出力(コピー)します。 */ function js() { return gulp.src(src.js, {base: src.root}) .pipe(gulp.dest(dest.root)) .pipe(browserSync.reload({stream: true})); } /** * ローカルサーバーを起動します。 */ function browsersync() { browserSync({ server: { baseDir: dest.root, index: "index.html" } }); }; /** * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。 */ function watchFiles(done) { gulp.watch(src.html).on('change', gulp.series(html, browserReload)); gulp.watch(src.scss).on('change', gulp.series(sass_style, browserReload)); gulp.watch(src.css).on('change', gulp.series(css, browserReload)); gulp.watch(src.js).on('change', gulp.series(js, browserReload)); } gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles))); /** * 開発に使うタスクです。 * package.jsonに設定をして、`npm run default`で実行できるようにしています。 */ gulp.task('default', ['watch']);

index.pug

pug

extend /_includes/_layout append variables //- Required - var pageTitle= ""; - var pageDescription= site.description; - var pageKeywords= site.keywords; //- Optional - var pageOgpTitle= ""; - var pageOgpImage= site.ogpImage - var pageLang= "ja"; - var pageOgpType= "website"; //- Not modified - var pageUrl= relativePath; //- 固定ページにのみ追加のCSS append css link(rel="stylesheet" href="/about/css/about.css") //- 固定ページにのみ追加のJS append js script(src="/assets/js/common2.js") block content // contents p Contents変更しますよ // /contents

_footer.pug

pug

// footer footer p: small copyright m-field // /footer

_header.pug

pug

// header header h1.site-name Pugで作ったサイト nav.global-nav ul li: a(href="#") トップ li: a(href="#") メニュー01 li: a(href="#") メニュー02 li: a(href="#") メニュー03 li: a(href="#") メニュー04 // /header

_layout.pug

pug

block variables doctype html html(lang=pageLang) head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# " + pageOgpType + ": http://ogp.me/ns/" + pageOgpType + "#") include /_includes/_meta body include /_includes/_header block content include /_includes/_footer include /_includes/_script

base.scss

scss

$pc: 1024px; // PC $tab: 680px; // タブレット $sp: 480px; // スマホ @mixin pc { @media (max-width: ($pc)) { @content; } } @mixin tab { @media (max-width: ($tab)) { @content; } } @mixin sp { @media (max-width: ($sp)) { @content; } } .box { @include pc { background-color: red; }; @include tab { background-color: blue; }; @include sp { background-color: yellow; }; } @import "a"; @import "b";

_a.scss

_a.scss

.classA { background-color: red; }

_b.scss

_b.scss

.classB { background-color: blue; }

common.js

js

(function() { console.log('Hello!!'); }());

package.json

json

{ "name": "gulp-pug-test", "version": "1.0.0", "description": "GulpでPugを実行するためのテスト環境です。", "main": "index.js", "scripts": { "start": "gulp" }, "keywords": [ "gulp", "pug" ], "author": "テンプレ作成者名", "license": "MIT", "devDependencies": { "browser-sync": "^2.26.4", "gulp": "^4.0.1", "gulp-autoprefixer": "^6.1.0", "gulp-clean-css": "^4.0.0", "gulp-data": "^1.3.1", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-pug": "^4.0.1", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.0.9", "postcss-flexbugs-fixes": "^4.1.0" } }

試したこと

・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

マルチポスト先

スタックオーバー

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

s8_chu
s8_chu

2019/04/22 04:08

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

2019/04/22 05:07 編集

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

2019/04/22 05:15

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

2019/04/23 01:00

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Pug

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

コンパイル

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

コンパイルエラー

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

Sass

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

gulp

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