gulp watc
hがおそらく正常に機能せず解決策が見つからない為アド...

guest　

gulp watchがおそらく正常に機能せず解決策が見つからない為アドバイス頂けると幸いです。

＜gulpfile.jp＞
const gulp = require('gulp');
const browserify = require('browserify');
const browserSync = require('browser-sync');
const source = require('vinyl-source-stream');

//gulpタスクの作成
gulp.task('build', function(done) {
browserify({
entries: ['src/app.js']//ビルド元のファイルを指定
}).bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/'));//出力ディレクトリを指定
done();
});
gulp.task('browser-sync', function (done) {
browserSync.init({
server: {
baseDir: "./", //対象ディレクトリ
index: "index.html"
}
});
done();
});
gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});

// Gulpを使ったファイルの監視
gulp.task('default', gulp.series('build', 'browser-sync'), function (done) {
gulp.watch('./src/*.js', gulp.task('build'));
gulp.watch("./*.html", gulp.task('bs-reload'));
gulp.watch("./dist/*.+(js|css)", gulp.task('bs-reload'));
done();
});

ターミナルより「gulp」実行していますが以下の通り正常には実行されているはずだと思うのですが、
ファイルに変更を加えてもリロードが自動で行われません。

＜ターミナル上での実行結果＞
[10:35:57] Using gulpfile /Applications/MAMP/htdocs/js_advanced/backbone_sample02/gulpfile.js
[10:35:57] Starting 'default'...
[10:35:57] Starting 'build'...
[10:35:57] Finished 'build' after 13 ms
[10:35:57] Starting 'browser-sync'...
[10:35:57] Finished 'browser-sync' after 73 ms
[10:35:57] Finished 'default' after 90 ms
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.3.3:3000
------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------
[Browsersync] Serving files from: ./

一応監視はエラーなくされているようですがどこか問題あればご指摘いただきたく、よろしくお願い致します。
gulpバージョン4系での記述も間違ってはいないと思うのですが。。。

2021/01/08

回答 1件

ウェブカツコーチ　

講師からの回答

監視関連の記述がバージョン4に適していないようですね。↓の記事がgulp4の記法について詳しく記載しているので参考にしてください。
https://ics.media/entry/3290/

なお今回のプロジェクトのgulpはバージョン3を採用しており、インストールファイルのgulp記述もすべてバージョン3で記述しています。確かにバージョン4になることでパフォーマンスが上がるなどのメリットもありますが、gulpのバージョンは記法が異なる、実行環境のバージョンを合わせ等で結構ハマるポイントが多く、現場でもすでにバージョン3で運用しているプロジェクトをわざわざ4に上げることはあまりありません。

したがって、このレッスンの主題はあくまでjavascript, backbone.jsですし、自身で原因調査をしてバージョン4への書き換えが難しいようでしたら既存のバージョン3のgulpを使用し、レッスンを進めることを優先しましょう。

2019/07/09

guest　

ご返信ありがとうございます。gulp3へ変更の場合node.jsのバージョンも落とす必要がありました為、gulp4で調べながら無事正常に動作する事が出来ました。一応以下にコードを記載致します。
gulp3でも構築できるよう別で一からやってみようと思います。

const gulp = require('gulp');
const browserify = require('browserify');
const browserSync = require('browser-sync').create();
const source = require('vinyl-source-stream');

gulp.task('build', function (done) {
browserify({
entries: ['src/app.js']
}).bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/'));
done();
});

gulp.task('browser-sync', function (done) {
browserSync.init({
server: {
baseDir: "./",
index: "index.html"
}
});
done();
});

gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});

gulp.task('watch', function (done) {
gulp.watch ('./src/*.js', gulp.series('build', 'bs-reload'));
done();
});
gulp.task('watch2', function (done) {
gulp.watch("./*.html", gulp.series('build', 'bs-reload'));
done();
});

gulp.task('default', gulp.parallel('watch', 'watch2', 'browser-sync'));

2020/02/29

guest　

度々失礼致します。
先ほど記載のコードだと、build1がループで発生してしまう為誤りです。
以下でちゃんと動作致しました。

const gulp = require('gulp');
const browserify = require('browserify');
const browserSync = require('browser-sync').create();
const source = require('vinyl-source-stream');

gulp.task('build', function (done) {
browserify({
entries: ['src/app.js']
}).bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/'));
done();
});

gulp.task('browser-sync', function (done) {
browserSync.init({
server: {
baseDir: "./",
index: "index.html"
}
});
done();
});

gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});

gulp.task('watch', function (done) {
gulp.watch ('./src/*.js', gulp.series('build', 'bs-reload'));
gulp.watch ('./*.html', gulp.task('bs-reload'));
gulp.watch ('./dist/*.+(js|css)', gulp.task('bs-reload'));
done();
});

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

2020/02/29

gulp watc
hがおそらく正常に機能せず解決策が見つからない為アド...

部活の学習一覧

ご意見箱

gulp watchがおそらく正常に機能せず解決策が見つからない為アド...

部活の学習一覧

ご意見箱

gulp watc
hがおそらく正常に機能せず解決策が見つからない為アド...