前提・実現したいこと
【実現したいこと】
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
マルチポスト先
ここにより詳細な情報を記載してください。
まだ回答がついていません
会員登録して回答してみよう