Gulp での BrowserSync_html/css_WEB-ITnose の使用

BrowserSync については長い間聞いており、関連記事をいくつか読んだことがありますが、使用したことはありません。私はこれまでプロジェクトの開発に Gulp を使用していましたが、Sass を書き終わるたびに、その効果を確認するために F5 キーを押してページを更新する必要がありました。このような便利な機能が今になって使用され始めたと考えるのは非常にばかげています。

BrowserSync は複数のブラウザを同時に更新できます。さらに驚くべきことは、1 つのブラウザでのページのスクロール、ボタンのクリック、入力ボックスへの情報の入力などのユーザーの動作も各ブラウザに同期されることです。

ブラウザ同期モジュールをインストールします

npm install browser-sync -g

コマンドラインから直接使用します

browser-sync start --server --files "css/*.css"

上記のコマンドを使用すると、ミニサーバーが開き、ブラウザが自動的に開きます。デフォルトのアドレスは localhost です。 :3000 で、インデックスはデフォルトで開かれます。そうでない場合は、localhost:3000/test.html など、開きたいページを手動で追加する必要があります。

通常、デフォルトのアドレスは必要ないため、プロキシ モードを使用する必要があります:

browser-sync start --proxy "localhost:8080" --files "css/*.css"

Browsersync + Gulp

var gulp = require('gulp'),    sass = require('gulp-ruby-sass'),    autoprefixer = require('gulp-autoprefixer'),    minifycss = require('gulp-minify-css'),    rename = require('gulp-rename'),    notify = require('gulp-notify');var browserSync = require('browser-sync').create();gulp.task('sass', function() {    return sass('sass/style.scss', {style: "expanded"})        //.pipe(sass({style: "expanded"}))        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))        .pipe(rename({suffix: '.min'}))        .pipe(minifycss())        .pipe(gulp.dest('css'))        .pipe(notify({ message: 'Styles task complete' }))        .pipe(browserSync.stream());});gulp.task('serve', ['sass'], function() {    browserSync.init({        server: "./"    });    gulp.watch("sass/*.scss", ['sass']);    gulp.watch("*.html").on('change', browserSync.reload);});gulp.task('default', ['serve']);

where

gulp.watch("sass/*.scss", ['sass']);

sass をコンパイルした後、ページを更新せずに更新します。

gulp.watch("*.html").on('change', browserSync.reload);

は、HTML ファイルを変更した後にページを更新します。

js を変更した後にページを更新する必要がある場合は、次のように行うことができます:

gulp.task('sass', function() {    return sass('sass/style.scss', {style: "expanded"})        //.pipe(sass({style: "expanded"}))        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))        .pipe(rename({suffix: '.min'}))        .pipe(minifycss())        .pipe(gulp.dest('css'))        .pipe(notify({ message: 'Styles task complete' }))        .pipe(browserSync.stream());});gulp.task('js', function () {    return gulp.src('js/*js')        .pipe(browserify())        .pipe(uglify())        .pipe(gulp.dest('dist/js'))        .pipe(browserSync.stream());;});gulp.task('serve', ['sass', 'js'], function() {    browserSync.init({        server: "./"    });    gulp.watch("sass/*.scss", ['sass']);    gulp.watch("*.html").on('change', browserSync.reload);    gulp.watch("js/*.js", ['js'])});gulp.task('default', ['serve']);

BrowserSync は確かに良いものです。