お世話になります。
いまgulpで色々と自動化をさせているのですが、watchで監視しているファイルを修正してもブラウザにリアルタイムに反映されません。と言うよりは、ワンクッションソースの修正を入れると反映されます。
具体的には、
・1回目の修正ををすると、ブラウザはリロードされるも修正箇所ははんえいされない
・2回目の修正をすると、再度リロードされ、1回目の修正が反映される(2回目は修正されない)
かなりはまってしまったので、どなたか解決法が分かる方ご教授お願いいたします。
js
1// require()省略 2 3// TypeScript 4gulp.task( 'ts', function(){ 5 var opt = { 6 noImplicitAny : true, sortOutput : true, removeComments : true 7 }; 8 gulp.src( 'app/src/ts/*.ts' ) 9 .pipe( plumber( { 10 errorHandler : function( err ){ 11 notify.onError( "Error: <%= err.message %>" ); 12 this.emit( 'end' ); 13 } 14 } ) ) 15 .pipe( sourcemaps.init() ) 16 .pipe( typescript( opt ) ) 17 .pipe( sourcemaps.write( './' ) ) 18 .pipe( gulp.dest( 'app/prot/js' ) ); 19} ); 20 21// ファイル圧縮時使用 uglify()解除 22gulp.task( 'js', [ 'ts' ], function(){ 23 gulp.src( [ 'app/prot/js/*.js', '!app/prot/js/*.min.js' ] ) 24 .pipe( plumber( { 25 errorHandler : function( err ){ 26 notify.onError( "Error: <%= err.message %>" ); 27 this.emit( 'end' ); 28 } 29 } ) ) 30 .pipe( rename( { 31 extname : '.min.js' 32 } ) ) 33 .pipe( gulp.dest( 'app/prot/js' ) ) 34 .pipe( browserSync.stream() ); 35} ); 36 37// gulpfile.js 38gulp.task( 'default', function(){ 39 browserSync.init( { 40 server : { 41 baseDir : "app/prot" 42 } 43 } ); 44 gulp.watch( 'app/src/ts/*.ts', [ 'js' ] ); 45} );
補足
行いたいフローは、
① app/src/ts/.tsの修正が入ると、tsファイルをコンパイルし、app/prot/jsフォルダにjsファイルを出力
② ①が終わった後に、app/prot/js/.jsをリネームし、同フォルダ内に出力
です。
あなたの回答
tips
プレビュー