转载

Gulp系列教程：使用BrowserSync浏览及相关配置

这是Gulp.js介绍系列的第二篇教程。今天我想讨论一些首要的 Gulp.js 任务并用BrowserSync设置开发服务器。接下来我开始创建一个配置文件。

安装Gulp.js

运行 gulpfile.js 前需要安装gulp：

$ npm install --save-dev gulp@3.9.0

如果现在在命令行中运行 gulp 会报错，报错信息为 gulpfile.js 中不存在 default 任务。这是因为到现在为止我还没创建gulp任务。

我在 gulp/tasks 目录中创建了 default.js 文件并添加如下代码：

var gulp = require('gulp');  gulp.task('default', function() {   console.log('Hello Gulp.js!'); });

我知道…我说过我不喜欢Hello World式指南，但这些内容不会太多。很快我会给出更实用的代码。所以跟着我继续吧。

如果运行 gulp 命令，这个 Gulp.js 任务会向控制台输出 Hello Gulp.js！ 。

现在开始我将加快一些学习速度了。

Watch

我不需要调用函数并在控制台输出文本就可以执行任务。我打算在运行 gulp 命令时执行 watch 任务。这个任务随后会监听变化并更新文件。

var gulp = require('gulp'); gulp.task('default', ['watch']);

可以同时运行多个任务，因此我把 watch 任务写成一个数组。注意：这些任务会同时运行，而不是按序运行。随后我会讲解如何按预定顺序运行任务。

我会在 task 目录中创建另一个 development 目录并把所有开发中的任务放到这个目录里，这不是必要的，但我是这么做的：

var gulp = require('gulp');  /**  * Start browsersync task and then watch files for changes  */ gulp.task('watch', ['browsersync'], function() {  });

我晚一些再写 watch 任务。现在函数没有内容并且在运行watch任务前会运行另一个任务： browsersync 。所有数组中的任务都会在这个任务执行之前执行。

BrowserSync

你也许听过 LiveReload ，一个监听文件变化的工具并能自动刷新服务。如果仅仅是样式的改变都不需要重新加载。一旦有改变页面立即刷新。

然而 BrowserSync 更进一步：它能实现LiveReload所有功能，但是不需要安装浏览器插件并且它可以在所有连接的浏览器上同步操作例如滚动，点击，刷新或填充表单。移动设备上也同样有效。BrowserSync甚至支持开发服务器。这就是我在开发服务器上只用BrowserSync来实现实时刷新的原因。

首先安装BrowserSync：

$ npm install --save-dev browser-sync@2.9.11

在 gulp/tasks/development/ 中创建一个新的 browser-sync.js 文件。这个文件只用来启动BrowserSync和开发服务器。

var gulp        = require('gulp'); var browsersync = require('browser-sync'); var config      = require('../../config').browsersync.development;  /**  * Run the build task and start a server with BrowserSync  */ gulp.task('browsersync', ['build'], function() {   browsersync(config); });

这段代码需要解释一下：首先我加载 Gulp.js 和BrowserSync，在这个任务中需要用到。随后载入BrowserSync的配置。分分钟就能创建好配置文件。把所有的配置从任务中分离可以提高服用性并且可以在不同项目中分享。

第二件值得一提的事情是 [build] 。它的意思是在运行BrowserSync前先运行 build Gulp.js任务（我随后会写）。每个 Gulp.js 任务都需要名字。第二个参数可以传入一个JavaScript回调函数或任务或两者。

配置

在主要 Gulp.js 目录创建一个新的 config.js 文件：

var src               = 'app'; var build             = 'build'; var development       = 'build/development'; var production        = 'build/production'; var srcAssets         = 'app/_assets'; var developmentAssets = 'build/assets'; var productionAssets  = 'build/production/assets';  module.exports = {   browsersync: {     development: {       server: {         baseDir: [development, build, src]       },       port: 9999,       files: [         developmentAssets + '/css/*.css',         developmentAssets + '/js/*.js',         developmentAssets + '/images/**',         developmentAssets + '/fonts/*'       ]     }   } };

首先我用变量声明了一些后续要重复使用的路径，接下来创建了一个CommonJS模块并给BrowserSync添加了一个入口。BrowserSync按默认选项运行，但是我想重写端口并指定服务目录。

Jekyll在重建时删除所有文件因此要加速开发过程我要有点创意，因此我不想在每次Jekyll构建时重建所有资源。因此我服务监听了不止一个目录。我监听了 build/development 目录，包含了Jekyll创建的文件。我的资源会生成到一个不同的目录 build/assets 从而不让Jekyll删除。并且稍后把 app/_assets 目录额外添加到link source map。

BrowserSync只监听资源文件，防止每次Jekyll创建一个文件浏览器就发疯一样刷新。随后我会写一个任务，当Jekyll构建完成后刷新一下浏览器。

源代码

在Github上查看源码

总结

这是Gulp.js介绍系列的第二篇的总结。我们学习了如何安装Gulp.js，如何编写一个Gulp.js任务。运行其他任务以及使用BrowserSync来设置开发服务器。

本文根据 @Stefan Imhoff 的《》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://stefanimhoff.de/2014/gulp-tutorial-2-development-server-browsersync-configuration/ 。

正文到此结束