Gulp-ライブリロード

Live Reloadは、ファイルシステムの変更を指定します。 BrowserSync は、CSSディレクトリ内のすべてのHTMLおよびCSSファイルを監視し、ファイルが変更されるたびに、すべてのブラウザーでページにライブリロードを実行するために使用されます。 BrowserSyncは、複数のデバイス間でURL、相互作用、およびコード変更を同期することにより、ワークフローを高速化します。

BrowserSyncプラグインのインストール

BrowserSyncプラグインは、クロスブラウザーCSSインジェクションを提供し、次のコマンドを使用してインストールできます。

npm install browser-sync --save-dev

BrowserSyncプラグインの構成

BrowserSyncプラグインを使用するには、次のコマンドに示すように、構成ファイルに依存関係を記述する必要があります。

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

Gulpを使用してサーバーで動作するには、_BrowserSync_のタスクを作成する必要があります。サーバーを実行しているため、サーバーのルートについてBrowserSyncにtelする必要があります。ここでは、ベースディレクトリを「ビルド」として使用しています。

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

次のCSSファイルのタスクを使用して、ブラウザに新しいスタイルを挿入することもできます。

gulp.task('styles', function() {

   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

BrowserSyncのタスクを作成する前に、パッケージマネージャーを使用してプラグインをインストールし、このリンク：/gulp/gulp_combining_tasks [chapter]で定義されているように構成ファイルに依存関係を書き込む必要があります。

設定が完了したら、BrowserSyncとwatchTaskの両方を実行して、ライブリロード効果を発生させます。 2つのコマンドラインを個別に実行する代わりに、次のコードに示すように、watchTaskとともに_browserSynctask_を追加して一緒に実行します。

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

プロジェクトディレクトリで次のコマンドを実行して、上記の結合タスクを実行します。

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

URL http：//localhost：3000/ でブラウザウィンドウが開きます。 CSSファイルに加えられた変更はコマンドプロンプトに反映され、変更されたスタイルでブラウザが自動的にリロードされます。

Gulp-live-reload

Gulp-ライブリロード

BrowserSyncプラグインのインストール

BrowserSyncプラグインの構成