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