質問: require('browser-sync').create(); gulp.task('serve', () => { // WordPress 開発環境用 browserSync.init({ proxy: "10.0.0.282:8888/wordpress" }); }); gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "./src", index: "index.php" } }); }); gulp.task('bs-reload', function () { browserSync.reload(); }); gulp.task('convertToCss', function() { gulp.src('./src/scss/style.scss') .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('./')); }); gulp.task('watch', () => { // scssファイルが変更されたらsassタスクを実行 gulp.watch("./src/scss/**/*.scss", ['convertToCss']); // phpファイルとcssファイルが変更されたら、ブラウザをリロード gulp.watch(['./*.php', './*.css']).on('change', browserSync.reload); }); gulp.task('default', ['serve', 'watch']); ``` ``` @charset "utf-8"; @import "./layout/*"; ``` その他 --- jsの知識はかなり低いです。 「gulp watch できない」などの検索ワードで調べたのですが、どうもしっくりくる記事がなく、困っています。
回答: > > `gulp.task('default', ['serve', 'watch']);` > > > まずこの書き方ですが、 serveとwatchを並列動作させたいと言っています。 こんな書き方舌ってことは、watchで使う前にserveが先に走って欲しいからですよね? ならば`watch`の依存タスクに`serve`を設定すべきで、 そこで動かすと並列動作してしまうのでおかしなことになるはずです。 このように変更してみてはどうでしょうか? ``` gulp.task('watch', ['serve'], () => { // watchタスクの中身 }); gulp.task('default', ['watch']); ```