介绍

关于前端化构造工具讨论比较多的便是grunt与gulp，二者都能实现css、js等文件压缩整合等操作，其中一个重点便是实时预览文件列表、内容页面，而且不用手动刷新页面(这是多么吸引人),这要比以前开发网页程序便捷多了，想像一下我只要在编辑器按下ctrl+s，浏览器遍及时显示，不需要一直重复ctrl+s、F5,ctrl+s、F5,ctrl+s、F5..无限死循环中。

为何选择gulp

gulp基于nodejs流操作，相对于grunt要快得多，至于他们之间的恩怨情仇，各位技术控们可以访问前端工程的构建工具对比 Gulp vs Grunt或者自己冲浪下，在此就不多加赘言了。

实现页面实时预览方式有很多，比如说grunt/gulp+connect+浏览器插件/livereload等多种组合方式，在此个人亲身体验，觉得不管是静态页面还是动态页面的方式都是gulp+browserSync实现最为简便，毕竟不需要多下载livereload或者浏览器插件，并且代码简洁易懂。

安装使用

gulp基于nodejs，因此在安装gulp之前，请先确保nodejs已正确安装，并且以下cmd命令均在项目根路径下执行。 ps：请原谅fidding自身电脑系统是windows7，不过相信这并不会阻碍各位技术控们热忱的心。

gulp安装

打开cmd，安装gulp

npm install -g gulp

查看gulp版本号

npm gulp -v

当出现如下类似提示时，那么恭喜你已经安装成功了

browserSync安装

在项目根目录下创建package.json安装。

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "gulp",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "fidding.hjh",
  "devDependencies": {
    "browser-sync": "^2.10.0",
    "gulp": "^3.9.0"
  }
}

在cmd上运行

npm install

完成browser-sync安装

静态页面监听

在项目根目录下创建gulpfile.js，并实现监听。

gulpfile.js

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
/*
*静态页面html实时预览
*/
gulp.task('server', function() {
    browserSync.init({
        server: ""
    });
    gulp.watch([                    //监听文件变化数组
        '*.html',
        'src/js/*.js',
        'src/css/*.css'
        ]).on("change", browserSync.reload);
});

动态页面监听

上面gulp任务server实现了静态页面的实时预览，那么如果要实现php这种动态页面呢？ 便需要browserSync通过代理URL(localhost：3000)来查看网站，在gulp的server任务中修改如下(主要修改init以及watch的监听文件)

gulp.task('server', function() {
    browserSync.init({
        proxy: "localhost:9999",    //apache或iis等代理地址
        notify: false,              //刷新是否提示
        open: true                ` //是否自动打开页面
    });
    gulp.watch([                    //监听文件变化数组
        '*.php',
        'src/js/*.js',
        'src/css/*.css'
        ]).on("change", browserSync.reload);
});

在cmd下执行

gulp server

启动gulp的server任务，结果如图所示：

browserSync将会通过监听localhost：3000来代理你的proxying地址。

你也可以通过上面的UI地址(localhost:3001)对browserSync进行一些配置，具体情况在此就不多说了。

结语

最后套用下Browsersync中文网站的一句话：

无论你是前端还是后端工程师，使用它将提高您30%的工作效率