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

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

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

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

Q&A

0回答

307閲覧

Gulp4 : watch()が終了してしまう。

yooonb

総合スコア17

gulp

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

0グッド

1クリップ

投稿2018/10/15 13:11

前提・実現したいこと

Gulp4でwatch()を使って監視をしたいです。

エラー:watch()が終了してしまう。

[21:57:59] Using gulpfile ~/panshoku-2/gulpfile.js [21:57:59] Starting 'default'... [21:57:59] Finished 'default' after 1.86 ms

該当のソースコード

js

1gulp.task('default', function(callback){ 2 gulp.series(gulp.parallel('sass-watch', 'browser-sync')); 3 callback(); 4});

修正したこと

callback()をやめる。

js

1gulp.task('default', gulp.series(gulp.parallel('sass-watch', 'browser-sync')));

修正後のエラー

[21:50:54] Using gulpfile ~/panshoku-2/gulpfile.js [21:50:54] Starting 'default'... [21:50:54] The following tasks did not complete: default [21:50:54] Did you forget to signal async completion?

補足情報

Mac
gulpのバージョン

[21:55:11] CLI version 2.0.1 [21:55:11] Local version 4.0.0

該当ファイルの抜粋

js

1gulp.task('sass', function () { 2 return gulp.src('./css/*.scss') 3 .pipe(sourcemaps.init()) 4 // Sassのコンパイルを実行 5 .pipe(sass({outputStyle: 'compressed'}) // CSSのミニファイ 6 // Sassのコンパイルエラーを表示 7 .on('error', sass.logError)) 8 // ソースマップの作成 9 .pipe(sourcemaps.write({includeContent: false})) 10 .pipe(sourcemaps.init({loadMaps: true})) 11 // autoprefixer 12 .pipe(autoprefixer(['last 3 versions', 'ie >= 8', 'Android >= 4', 'iOS >= 8'])) 13 .pipe(sourcemaps.write()) 14 // cssフォルダー以下に保存 15 .pipe(gulp.dest('css')); 16}); 17 18// ブラウザリロード 19gulp.task('browser-sync', function(callback) { 20 browserSync.init({ 21 server: { 22 baseDir: "./", 23 index: "index.html" 24 } 25 }); 26 callback(); 27}); 28gulp.task('bs-reload', function (callback) { 29 browserSync.reload(); 30 callback(); 31}); 32 33// JS圧縮 34gulp.task('minify-js', function() { 35 return gulp.src("./js/*.js") 36 .pipe(uglify()) 37 .pipe(gulp.dest('./js/dist/')); 38}); 39 40// watchタスク(html,js,sassファイル変更時に実行するタスク) 41gulp.task('sass-watch', gulp.series(gulp.parallel('sass'), function(callback){ 42 gulp.watch('./css/*.scss', gulp.task('sass', 'bs-reload')); 43 gulp.watch("./*.html", gulp.task('bs-reload')); 44 gulp.watch("./js/*.js", gulp.task('minify-js', 'bs-reload')); 45 callback(); 46})); 47 48 49gulp.task('default', function(callback){ 50 gulp.series(gulp.parallel('sass-watch', 'browser-sync')); 51 callback(); 52});

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問