Gulp+browser-sync打造前端開發自動刷新

以下是gulpfile.js:

var gulp = require('gulp'),
    config = require('./config'),
    cleanCss = require('gulp-clean-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    browserify = require('gulp-browserify'),
    nodemon = require('gulp-nodemon'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del'),
    sass = require('gulp-sass'),
    replace = require('gulp-replace'),
    browserSync = require('browser-sync').create();

gulp.task('sass', function () {
    return gulp.src('client/sass/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('client/sass/sass2css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCss())
        .pipe(gulp.dest('client/css/export'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('clean', function (callback) {
    del(['client/css/export/*.min.css'], callback);
});

gulp.task('watch', function () {
    browserSync.init({
        proxy: 'localhost:' + config.listenPort
    });

    gulp.watch('client/sass/main.scss', ['sass']);
    gulp.watch('views/pages/*.jade', browserSync.reload);
});

gulp.task('serve', function () {
    return nodemon({
        script: 'app.js',
        ignore: [
            "client/**",
            "views/**"
        ]
    });
});

gulp.task('develop', ['watch', 'serve']);

有了這個，開發就很有樂趣了。參考：http://www.browsersync.cn/docs/gulp/