介绍

关于前端化构造工具讨论比较多的便是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

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

\2977282720-565bd32903951.png

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任务,结果如图所示:

\2414247596-565bc904e381a_articlex.png

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

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

\1389665912-565bccef79342_articlex.png

结语

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

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