Browsersync 是一个前端调试的利器，它能够让你在页面文件改动之后自动刷新浏览器，从而方便了前端的调试工作。
本文就是对于 Browsersync + Gulp 的配置作个简单的笔记。
因为使用Gulp的话，相比起来使用Browser-sync自带的命令行简单点。而且有更多的选择。
首先安装 Browsersync 与 Gulp:
$ npm install browser-sync gulp --save-dev在 gulpfile.js 中创建新任务：
文件都放在APP中。
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = {
baseDir: 'app',
watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}
gulp.task('server', function() {
browserSync.init({
files: config.watchFiles,
server: {
baseDir: config.baseDir
}
});
})
gulp.task('default',['server']); //定义默认任务
这里表示以 app 目录作为根目录启动 HTTP 服务，并监听 app 目录下的所有 html、css 以及 js 类型的文件，当这些文件有改动时 Browsersync 会自动刷新浏览器页面。
如果想配合使用 SASS 之类的，可以参考： https://www.browsersync.io/docs/gulp/
需要监听任务只需要打开命令行，输入gulp即可。
实践了一番：使用SASS和JS压缩命令行。
// var browserify = require('browserify'); var gulp = require('gulp'); var browserify = require('gulp-browserify'); var uglify = require('gulp-uglify'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); var reload = browserSync.reload; var config = { baseDir: 'app', watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ] } gulp.task('server',['sass'], function() { browserSync.init({ files: config.watchFiles, server: { baseDir: config.baseDir } }); gulp.watch("app/scss/*.scss", ['sass']); gulp.watch("app/script/*.js", ['js-watch']); gulp.watch("app/*.html").on('change', reload); }) // scss编译后的css将注入到浏览器里实现更新 gulp.task('sass', function() { return gulp.src("app/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("app/css")) .pipe(reload({stream: true})); }); // 处理完JS文件后返回流 gulp.task('js', function () { return gulp.src('app/script/*.js') .pipe(browserify()) .pipe(uglify()) .pipe(gulp.dest('app/js')); }); // 创建一个任务确保JS任务完成之前能够继续响应 // 浏览器重载 gulp.task('js-watch', ['js'], browserSync.reload); gulp.task('default',['server']); //定义默认任务
package.json如下：
{
"name": "gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"browser-sync": "~2.12.9"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^2.3.1",
"gulp-uglify": "^1.5.3",
"gulp-browserify": "^0.5.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "caibaojian",
"license": "ISC"
}
有需要可以拿去用一下，后面考虑加入图片压缩等。
目录结构
目录可能存在着一些不合理的地方。也许要把编译和开发文件单独分出来放在同一个文件里面。
