- 快速构建前端项目
- 提供易于开发、调试的开发联调环境,支持预编译语言(jade,stylus,coffee)
- 提供基于requirejs的实时打包服务。
- 提供http server, 支持mock接口数据功能。
- 提供json文件自动校验
- 提供80端口代理、转发功能
- 提供透明代理(即:线下不存在的资源,直接抓取线上)
- 提供代理服务(即:htpp代理服务,支持抓包和mapping本地文件,可以用来调试移动端)
- 提供获取svn的change list工具, 以便用于填写上线单
#全局gulp包
npm i gulp -g
#本地gulp包
npm i gulp --save
#安装gulp-turbo
npm i gulp-turbo --save
npm init
npm i require-dir --save
var gulp, porjectConf, requireDir, turbo;
gulp = require('gulp');
requireDir = require('require-dir');
turbo = require('gulp-turbo');
porjectConf = require('./porject-conf.json');
global.globalGulp = gulp;
global.pkg = porjectConf;
requireDir(turbo.dir);
gulp.task('dev', ['jsonlint', 'setDev', 'compile', 'proxy', 'server', 'watch']);
gulp.task('dist', ['setDist', 'jade', 'stylus', 'rMin', 'cpVender', 'cpImg','server', 'watch']);
gulp.task('default', ['dev']);
注意:json文件里面不能有注释
{
//路由路径:比如将项目访问根目录127.0.0.1改为虚拟路径http://127.0.0.1/tech-bs
"routerPath": "/tech-bs",
//项目文件夹根目录名称
"approot": "app",
//默认开发模式
"distMode": "dev",
//静态资源域名。项目中的静态资源都是以带有域名的绝对路径引用的,将会用到这个配置。
"domain": "//xxx.bbb.com",
//配置透明代理时需要用到这个。即:线下没有的文件,将会在这个域名为根去获取内容,要求此域名跟domain指向的静态资源池相同
"vhost": "http://xxx.aaa.com.cn",
//自动刷新浏览器。用于调试 true是开启,将会在页面注入一个js用来做实时通讯。
"forceLivereload": true,
//默认端口
"httpProt": 80,
//反向代理,用于共享 httpProt 端口
"serverProxies": [{
//如果用户访问这个路径,如 http://127.0.0.1/tech-bs/abc, 相当与访问 target设置的http路径,但还是走httpProt端口
"source": "/tech-bs/abc",
"target": "http://127.0.0.1:8080/tech-bs/abc",
"options": {
//请求头
"headers": {
"ABC_HEADER": "abc"
}
}
}, {
"source": "/tech-bs/aaa",
"target": "http://127.0.0.1:8081/tech-bs/aaa"
}],
// 代理服务器端口。 通常用于调试移动端,抓包,替换请求. 类似fiddler或者charlse
"proxyProt": 8989,
//代理规则(支持正则,可以设置多个规则)
"proxyRule": [{
//替换规则
"pattern": "xxx.b.com/skyfire/ssu/editBefore1",
//用于响应的文件
"responder": "/Users/kings/didi/prod/fe-scaffold-v1/app/dev/html/page1.html"
}]
}
注意:mac监听1024以下端口通常需要 sudo gulp) 访问路径为 http://127.0.0.1/ +routerPath 例:http://127.0.0.1/tech-bs 启动服务后,将持续监听src下的目录文件变化,自动编译。 gulp启动服务后,命令窗口不能关闭。想要实现关闭命令行服务继续运行,可以执行 nohup gulp &&
#创建文件夹
gulp init
#启动服务
gulp
git clone [email protected]:ian000/gulp-turbo.git
cd gulp-turbo
npm i
cd example
npm i
gulp (注意:mac监听1024以下端口通常需要 sudo gulp)
gulp init
运行默认环境 dev
gulp
运行编译环境 dist, 用于上线
gulp dist
按照后端接口,在mock目录下按层级创建json文件.详细请参考现存的mock数据路径。
在package.json文件中设置转发规则。
e.g :
"serverProxies":[
{
"source": "/tech-bs/abc",
"target": "http://127.0.0.1:8080/tech-bs/abc",
"options": {
"headers": {
"ABC_HEADER": "abc"
}
}
},
{
"source": "/tech-bs/aaa",
"target": "http://127.0.0.1:8081/tech-bs/aaa"
}
]
当访问 http://127.0.0.1/tech-bs/abc 时,会命中第一条代理规则,转发到 8080端口对应的路径。
这对于并行开发多个项目很有用。
[12.03] -【里程碑】将脚手架包装成npm组件
[12.03] - 加入json文件校验
[12.03] - 为解决gulpfile.coffe以后的维护问题,拆分gulpfile.coffe到gulp-tasks文件夹
[12.03] - 压缩css、js时,添加处理文件的log信息输出
[12.02] - 在gulp dist之前不需要先执行gulp dev了
[11.16] - svnChanges任务修改,过滤掉文件夹和删除的变更记录
[11.12] - 提供80端口代理、转发功能
[11.12] - 新增svnChanges任务,获取svn log中的change list, 以便用于填写上线单
[11.10] - 在dist模式下,增加sourcemaps支持
[11.09] - 抽离配置文件到package.json中
[11.06] - 新增图片文件夹
[11.06] - 支持透明代理
[11.06] - 支持代理
[11.05] - 修复dist模式
[11.04] - 新增page_$config.json
[11.04] - 自动配置页面内的wwwroot
- 将资源合并,构建组件化机制。
- dist文件夹内文件统一添加版本号问题
- 服务挂载