【gulp】gulp + browsersync 构建前端项目自动化工作流

什么是 gulp？

gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 node.js 构建的，利用 node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 javascript（或者 coffeescript ）源码来实现的。更多关于 gulp，可以通过官网了解。

什么是 browsersync？

browsersync 能让浏览器实时、快速响应您的文件（html、js、css、sass、less等等）的更改，browsersync 支持多终端（PC、ipad、iphone、android等等）设备同时调试。无论您是前端还是后端工程师，使用它将提高您 30% 的工作效率。更多关于 browsersync，可以通过官网了解。

安装依赖包

npm install --save-dev gulp browser-sync

配置 gulpfile.js

'use strict';

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();

// 配置服务器
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        port: 8000
    });
});

gulp.task('default', ['serve']);

打开终端，输入：

gulp

如果显示如下，说明启动本地静态服务器成功了。

[::] Using gulpfile ~/Work/github/test-demo/gulpfile.js
[::] Starting 'serve'...
[::] Finished 'serve' after  ms
[::] Starting 'default'...
[::] Finished 'default' after 9.42 μs
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:8000
    External: http://172.16.18.11:8000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://172.16.18.11:3001
 -------------------------------------
[BS] Serving files from: ./

这时候打开浏览器，输入 http://localhost:8000/ 就可以看到页面了。

-----分割线-----

以上示例只是最简单的 demo，一般项目不单单只有 browsersync 还有其他的 gulp 插件需要引用（比如，gulp-sass），后面的文章会逐一介绍如何使用这些插件，并逐步完善 gulpfile.js。

PS：

如果端口号设置在 1024 以下的话，在 linux 下监听会报错，是因为 linux 监听 <= 1024 的端口需要 root 权限。解决方法一：端口号 > 1024。解决方法二：sudo gulp。