4

先週、小さな JavaScript プロジェクト用にゼロから gulpfile を作成してみました。BrowserSync を使用してコードをコンパイルし、ブラウザー (Chrome) をリロードすることにしました。週末を通してうまく機能し、私はやり遂げました。ただし、昨日プロジェクトを開いたような気がしますが、「gulp」コマンドを実行すると、ブラウザーに接続せず、「Connected to BrowserSync」メッセージが表示され、自動再読み込み機能が提供されます。ただし、コンソールでは、ファイルが更新およびコンパイルされているという通知が引き続き表示されます。

これがどのように起こるか誰にも分かりませんか？

私が使用しているgulpfileは次のとおりです。

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');

gulp.task('browser-sync', function() {
  var files = [
    'app/**/*/.html',
    'app/assets/css/**/*.css',
    'app/assets/js/**/*.js'
    ];

  browserSync.init(files, {
    server: {
      baseDir: './app'
    }
  });
});

// process JS files and reload all browsers when complete.
gulp.task('js', function () {
    return gulp.src('app/assets/js/*js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('app/assets/js'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/assets/css'))
    .pipe(reload({stream: true}));
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function() {
  gulp.watch('app/assets/js**/*.js', ['js']);
  gulp.watch('app/assets/sass/*.scss', ['sass']);
  gulp.watch('app/*html', ['bs-reload']);
});

アドバイスをありがとう！

4

1 に答える 1

6

サービスを提供している html ファイルに browsersync の「script」タグが挿入されていないようです。html ファイルを再確認してください。body タグを忘れることがあります。body タグがない場合、script タグは挿入されません。 .

gulp を実行すると、ページがロードされ、ソース コードが開いている間にソース コードをチェックアウトし (ページ ソースを表示)、html 構造をチェックします。

正常に動作している他のプロジェクトからタグをコピーして実行し、挿入されたスクリプト タグをコピーして、現在のプロジェクト ページに貼り付けることができます。

スクリプト タグは次のようになります (BrowserSync のバージョンによって異なる場合があります)。

<body>
   <script id="__bs_script__">
     //<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
   </script>

注意: 上記の<script>タグbrowser-syncversion は2.18.5、インストールされている browser-sync のバージョンに置き換えてください。

于 2016-11-13T10:06:07.550 に答える