【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

若是显示以下，说明启动本地静态服务器成功了。

[15:16:00] Using gulpfile ~/Work/github/test-demo/gulpfile.js
[15:16:00] Starting 'serve'...
[15:16:00] Finished 'serve' after 12 ms
[15:16:00] Starting 'default'...
[15:16:00] 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。