Skip to main content
Improve format; タグを編集
ソース リンク
PicoSushi
  • 4,959
  • 1
  • 10
  • 28

【エラー】
gulp.parallel is not a function

エラー

gulp.parallel is not a function

試みたこと

【試みたこと】
以下以下のサイトに従ってパッケージのgulpをアップデートするが
 package.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか
CLI version 2.1.0
Local version 3.9.1

CLI version 2.1.0
Local version 3.9.1

なってしまう
  

https古くなったgulpのプラグインをチェック&更新する方法 | NO://kenyo--c.com/css/1572/ | Webデザインリリック

質問

【質問】
バージョンアップバージョンアップしてもエラーが消せませんでした。
どうすれば良いのでしょうか。

【gulpfile.js】
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/'
    };

/**

gulpfile.js

  • 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));
    }
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のコンパイルや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)));

gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles)));

package.json

【package.json】
{
"name": "gulp-pug-test",
"version": "1.0.0",
"description": "GulpでPugを実行するためのテスト環境です。",
"main": "index.js",
"scripts": {
"start": "gulp"
},
"keywords": [
"gulp",
"pug"
],
"author": "aaa",
"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"
}
}

{
  "name": "gulp-pug-test",
  "version": "1.0.0",
  "description": "GulpでPugを実行するためのテスト環境です。",
  "main": "index.js",
  "scripts": {
    "start": "gulp"
  },
  "keywords": [
    "gulp",
    "pug"
  ],
  "author": "aaa",
  "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.parallel is not a function

【試みたこと】
以下のサイトに従ってパッケージのgulpをアップデートするが
 package.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか
CLI version 2.1.0
Local version 3.9.1
なってしまう
 https://kenyo--c.com/css/1572/

【質問】
バージョンアップしてもエラーが消せませんでした。
どうすれば良いのでしょうか。

【gulpfile.js】
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のコンパイルや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】
{
"name": "gulp-pug-test",
"version": "1.0.0",
"description": "GulpでPugを実行するためのテスト環境です。",
"main": "index.js",
"scripts": {
"start": "gulp"
},
"keywords": [
"gulp",
"pug"
],
"author": "aaa",
"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.parallel is not a function

試みたこと

以下のサイトに従ってパッケージのgulpをアップデートするがpackage.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか

CLI version 2.1.0
Local version 3.9.1

なってしまう 

古くなったgulpのプラグインをチェック&更新する方法 | NO:1572 | Webデザインリリック

質問

バージョンアップしてもエラーが消せませんでした。
どうすれば良いのでしょうか。

gulpfile.js

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のコンパイルや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

{
  "name": "gulp-pug-test",
  "version": "1.0.0",
  "description": "GulpでPugを実行するためのテスト環境です。",
  "main": "index.js",
  "scripts": {
    "start": "gulp"
  },
  "keywords": [
    "gulp",
    "pug"
  ],
  "author": "aaa",
  "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"
  }
}
ソース リンク
wa_
  • 89
  • 1
  • 14

gulp.parallel is not a function

gulpfile.jsに関する質問です。
gulp、js初心者です。

【エラー】
gulp.parallel is not a function

【試みたこと】
以下のサイトに従ってパッケージのgulpをアップデートするが
package.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか
CLI version 2.1.0
Local version 3.9.1
となってしまう
https://kenyo--c.com/css/1572/

【質問】
バージョンアップしてもエラーが消せませんでした。
どうすれば良いのでしょうか。

【gulpfile.js】
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のコンパイルや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】
{
"name": "gulp-pug-test",
"version": "1.0.0",
"description": "GulpでPugを実行するためのテスト環境です。",
"main": "index.js",
"scripts": {
"start": "gulp"
},
"keywords": [
"gulp",
"pug"
],
"author": "aaa",
"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"
}
}