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

作者：Blueed 日期：2015-12-20 点击：5168
Gulp系列教程
gulp
workflow
工作流

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

Gulp系列教程

安装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的《Introduction to Gulp.js 2: Server with BrowserSync and Configuration》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-2-development-server-browsersync-configuration/。

Blueed

现居上海。正在学习前端的道路上，欢迎交流。个人博客：Blueed.me,微博：@Ivan_z3

如需转载，烦请注明出处：http://www.w3cplus.com/workflow/gulp-tutorial-2-development-server-browsersync-configuration.html

返回顶部