在Gulp中使用BrowserSync

博客已遷移至http://zlwis.me。

很早就據說過BrowserSync，也看過一些相關文章，可就是沒用過。以前一直在用Gulp開發項目，每次編寫完Sass後還要用按F5刷新頁面看效果，想一想也是夠傻的，這麼好用的東西居然如今纔開始用。

BrowserSync能夠同時同步刷新多個瀏覽器，更神奇的是你在一個瀏覽器中滾動頁面、點擊按鈕、輸入框中輸入信息等用戶行爲也會同步到每一個瀏覽器中。

安裝browser-sync模塊

npm install browser-sync -g

命令行直接使用

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

使用上面命令會開啓一個迷你服務器，自動幫你打開瀏覽器，默認地址localhost:3000，默認打開index.html，若是沒有，須要手動加上你要打開的頁面，如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']);

其中

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確實是一個好東西！