54556


gulp js の初心者です。

npx gulp を実行すると以下のエラーが出ます。

[code]

    [11:35:25] 'default' errored after 17 ms
    [11:35:25] The following tasks did not complete: html, css, js
    [11:35:25] Did you forget to signal async completion?
    
[/code]

調べたところタスクの終了を明示的にしないといけないとありました。  
【参考】  
[より便利になった gulp 4.0
への移行方法と変更点をまとめました](https://aimstogeek.hatenablog.com/entry/2018/11/30/192238)

どのように書けばタスク終了になるのかが分かりません。  
どうかご教授ください。

[code]

        'use strict';
    
        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 browser_sync() {
          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));
          gulp.watch(src.scss).on('change', gulp.series(sass_style));
          gulp.watch(src.css).on('change', gulp.series(css));
          gulp.watch(src.js).on('change', gulp.series(js));
        }
    
        gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browser_sync, watchFiles)));
    
    
    
        /**
         * 開発に使うタスクです。
         * package.jsonに設定をして、`npm run default`で実行できるようにしています。
         */
        gulp.task('default', gulp.task('watch'));
    
    
[/code]

package.json

[code]

        {
          "name": "pug-sass-test-kaihen",
          "version": "1.0.0",
          "description": "Gulpを使用したPugの導入テストリポジトリです。",
          "main": "browsersync.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "gulp": "gulp"
          },
          "keywords":  [
            "gulp",
            "pug",
            "Sass"
          ],
          "author": "",
          "license": "ISC",
          "devDependencies": {
            "browser-sync": "^2.26.5",
            "gulp": "^4.0.1",
            "gulp-autoprefixer": "^6.1.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"
          }
        }
    
    
[/code]


CC BY-SA 4.0
2019-04-29T02:59:51.813
54555
2019-05-10T04:18:35.943
2019-05-10T04:18:35.943
34049
34049
question
javascript gulp
'default' errored after


以下のように `gulpfile.js`, `package.json` に対して修正を行います。

  * `src` 変数に `root` プロパティを追加します。
  * `sass_style`, `watchFiles` 関数内の `src.scss` を `src.sass_style` に修正します。
  * `watchFiles`, `browser_sync` 関数内に `done` 関数を記述します。
  * `gulp-autoprefixer` を `autoprefixer` に変更し、それに伴って `sass_style` 関数を修正します。
  * `sass_style` 関数内の `gulp.dest` 関数に与える引数を変更します。

すると、最終的な `gulpfile.js`, `package.json` はこのようになります。これにより、質問文のエラーは解消されると思います。

[code]

    {
      "name": "pug-sass-test-kaihen",
      "version": "1.0.0",
      "description": "Gulpを使用したPugの導入テストリポジトリです。",
      "main": "browsersync.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "gulp": "gulp"
      },
      "keywords": [
        "gulp",
        "pug",
        "Sass"
      ],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "browser-sync": "^2.26.5",
        "gulp": "^4.0.1",
        "autoprefixer": "^9.5.1",
        "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"
      }
    }
    
[/code]

[code]

    'use strict';
    
    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('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',
        'root': 'src/'
    };
    
    /**
     * 出力するディレクトリを指定します。
     */
    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({ // ベンダープレフィックスの付与
            browsers: ['last 3 version', 'ie >= 10', 'iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
            cascade: true // 整形する
        })];
        return gulp.src(src.sass_style, {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(rename(function (path) {
                path.dirname += '/css';
            }))
            .pipe(gulp.dest(dest.root))
            .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 browser_sync(done) {
        browserSync({
            server: {
                baseDir: dest.root,
                index: "index.html"
            }
        });
        done();
    }
    
    /**
     * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。
     */
    function watchFiles(done) {
        const browserReload = () => {
            browserSync.reload();
            done();
        };
        gulp.watch(src.html).on('change', gulp.series(html, browserReload));
        gulp.watch(src.sass_style).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('watch', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browser_sync, watchFiles)));
    
    
    /**
     * 開発に使うタスクです。
     * package.jsonに設定をして、`npm run default`で実行できるようにしています。
     */
    gulp.task('default', gulp.task('watch'));
    
[/code]


CC BY-SA 4.0
2019-04-29T03:57:59.730
54556
2019-04-29T03:57:59.730
32986
54555
answer