gulp+browserSync配置

Browsersync 是一个前端调试的利器,它能够让你在页面文件改动之后自动刷新浏览器,从而方便了前端的调试工作。

本文就是对于 Browsersync + Gulp 的配置作个简单的笔记。

  1. 首先安装 Browsersync 与 Gulp:
1
$ npm install browser-sync gulp --save-dev
  1. gulpfile.js 中创建新任务:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = {
baseDir: 'src',
watchFiles: [ 'src/**/*.html', 'src/assets/css/*.css', 'src/assets/js/*.js' ]
}
gulp.task('serve', function() {
browserSync.init({
files: config.watchFiles,
server: {
baseDir: config.baseDir
}
});
})

这里表示以 src 目录作为根目录启动 HTTP 服务,并监听 src 目录下的所有 htmlcss 以及 js 类型的文件,当这些文件有改动时 Browsersync 会自动刷新浏览器页面。

如果想配合使用 SASS 之类的,可以参考: https://www.browsersync.io/docs/gulp/

同时为了避免之后每次都要重新配置一遍,于是我自己写了个简单的 yo 生成器: https://github.com/wusuopu/my-yeoman-generator

由于这只是我自己 generator,并没有发布到 npm 上,因此只能手动进行安装。各位有兴趣的可以试试。使用方法:

  1. 安装 yo 和 bower: $ npm install -g yo bower

  2. 安装 generator:

1
2
3
$ git clone https://github.com/wusuopu/my-yeoman-generator generator-wusuopu
$ cd generator-wusuopu
$ npm link
  1. 生成项目:
1
2
3
$ mkdir webpage
$ cd webpage
$ yo wusuopu:bootstrap3

这里 bootstrap3 generator 包含了 bootstrap3、font-awesome、jquery 这些常用的前端库,省得每次都需要重新下载一遍。