0

angular アプリのフォルダー構造:

src
  client
    app
    assets
    index.html
  server
gulpfile.js

開発サーバーを作成し、index.htmlの変更を監視しようとする次のタスクがあり、変更の場合はページをリロードしようとしています

gulp.task('dev-server',function(){
  connect.server({
    port: 8888,
    livereload: true
  });
  gulp.watch('./src/client/app/index.html', ['reload']);
});

gulp.task('reload', function(){
  gulp.src('./src/client/index.html')
    .pipe(connect.reload());
});

現在の動作: dev-server タスクを実行すると、サーバーが作成されます。また、index.html が変更されると、リロード タスクが期待どおりにトリガーされます。ただし、ブラウザは自動更新されません。

質問 1: 変更時にブラウザー ウィンドウ/特定のタブを自動更新する方法を教えてください。

質問 2: localhost:8888 を起動すると、実際にはブラウザーでフォルダー構造が開かれ、そこから手動で index.html に移動する必要があります。index.html を直接起動するにはどうすればよいですか?

4

1 に答える 1

1

のfallback: './src/client/index.html'直接開口部を修正できますindex.html。しかし、livereload も私のローカル設定では機能していませんでした。何が悪いのかわからない。

browser-sync非推奨のように見えるため、livereload dev サーバーとして使用することをお勧めしますgulp-connect。

次に、次のような gulp ファイルを作成できます。

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// watch files for changes and reload
gulp.task('serve', function() {
browserSync({
    server: {
      baseDir: 'src/client'
    }
 });

 gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'src/client'}, reload);
});

gulp.task('default', ['serve']);
于 2016-03-18T00:16:52.503 に答える