nnnoot
@nnnoot

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

gulp4を導入にあたるエラーについて

Q&A

Closed

解決したいこと

gulp4を導入したい。

発生している問題・エラー

[11:11:11] The following tasks did not complete: default
[11:11:11] Did you forget to signal async completion?

該当するソースコード

gulpfile.js
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});

自分で試したこと

上記サイトの順番通りに進行していた。

npx gulpを実行するとタスクを実行すると、cssフォルダーにコンパイルされたCSSファイルが書き出されるはずなのですが、エラーとなってしまう。

その他参考サイトをいくつか試したが解決できず投稿に至りました。

0

1Answer

そのエラーの前に gulp-sass のエラーが出ていませんでしたか? 手元で試すと以下のようになりました。

% npx gulp
[13:19:06] Using gulpfile ~/xxx/gulpfile.js
[13:19:06] Starting 'default'...
Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[13:19:06] The following tasks did not complete: default
[13:19:06] Did you forget to signal async completion?

npm install -D sass したうえで、メッセージに従ってご質問の gulpfile.js の4行目を const sass = require('gulp-sass')(require('sass')); に直すと動くようになりました。

% npx gulp
[13:19:28] Using gulpfile ~/xxx/gulpfile.js
[13:19:28] Starting 'default'...
[13:19:28] Finished 'default' after 51 ms
0Like

Comments

  1. @nnnoot

    Questioner

    早急なご回答ありがとうございます。
    おっしゃる通りに進行すればコードエラーがなくなりました。
    迷っていたので大変助かりました。
    ありがとうございます。
  2. @nnnoot

    Questioner

    追加で質問させてください。

    一度はうまくいったものの

    'MODULE_NOT_FOUND',

    との表示から進まなくなりました。
    ご教授いただければ助かります。
  3. それも前後のエラーメッセージに何のモジュールが見つからないか出ていると思います。全文を貼ってください。
  4. @nnnoot

    Questioner

    Error: Cannot find module 'sass'
    Require stack:
    - /Users/#/Desktop/sample2.gulp/gulpfile.js
    - /Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js
    - /Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
    - /Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/index.js
    - /Users/#/Desktop/sample2.gulp/node_modules/gulp/bin/gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/#/Desktop/sample2.gulp/gulpfile.js:4:35)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
    '/Users/#/Desktop/sample2.gulp/gulpfile.js',
    '/Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js',
    '/Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
    '/Users/#/Desktop/sample2.gulp/node_modules/gulp/node_modules/gulp-cli/index.js',
    '/Users/#/Desktop/sample2.gulp/node_modules/gulp/bin/gulp.js'
    ]


    この辺りでしょうか?
    よろしくお願いします。
  5. Error: Cannot find module 'sass' と出ているとおり、 sass がインストールされていません。
    npm install -D sass を実行してインストールしてください。(以前まで gulp-sass をインストールすると一緒に入りましたが、今では別々に入れる必要があります)
  6. 大量のエラーメッセージが出るときは、最初に出たエラーが後に続くエラーを引き起こしているか、または最後に表示されたエラーがそれまでのエラーを総括している場合が多いです。エラーメッセージの前後にもよく目を通すことをおすすめします。
  7. @nnnoot

    Questioner

    遅くなりました。
    ご回答ありがとうございます。
    勉強になりました。
    今後はエラー前後の確認を実践していきます。

Your answer might help someone💌