• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ian000/gulp-turbo: 完整强缩进工作流(requirejs/jade/stylus/coffee),同步异步模 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

ian000/gulp-turbo

开源软件地址(OpenSource Url):

https://github.com/ian000/gulp-turbo

开源编程语言(OpenSource Language):

CoffeeScript 60.3%

开源软件介绍(OpenSource Introduction):

gulp-Turbo

译:涡轮增压器, 前端工作流,为前端开发联调加速。

前端工作流 功能说明

  1. 快速构建前端项目
  2. 提供易于开发、调试的开发联调环境,支持预编译语言(jade,stylus,coffee)
  3. 提供基于requirejs的实时打包服务。
  4. 提供http server, 支持mock接口数据功能。
  5. 提供json文件自动校验
  6. 提供80端口代理、转发功能(可用于多项目联调)
  7. 提供透明代理(即:线下不存在的资源,直接抓取线上,域名在Vhost属性中设置)
  8. 便捷的移动端调试(默认开启htpp代理服务,端口8989,可以代替fiddler或charles.)
  9. 支持https

安装(依赖node.js,npm)

  #全局gulp包
  npm i gulp -g

  #本地gulp包
  npm i gulp --save

  #安装gulp-turbo
  npm i gulp-turbo --save

创建项目

可以使用yomen生成器,或者按照以下步骤创建项目。

1. 初始化npm项目、安装依赖

npm init

2. 创建gulpfile.js

  var gulp   = require('gulp')
    , turbo  = require('gulp-turbo')
    ;

3.配置项目(创建project-conf.json)

注意:json文件里面不能有注释

{
  //路由路径:比如将项目访问根目录127.0.0.1改为虚拟路径http://127.0.0.1/tech-bs
  "routerPath": "/tech-bs",

  //项目文件夹根目录名称
  "approot": "app",

  //默认开发模式
  "distMode": "dev",

  //静态资源域名(需要将此域名绑定本服务器hosts)。项目中的静态资源都是以带有域名的绝对路径引用的,将会用到这个配置。
  "domain": "//xxx.bbb.com",

  //配置透明代理时需要用到这个。即:线下没有的文件,将会在这个域名为根去获取内容,要求此域名跟domain指向的静态资源池相同
  "vhost": "http://xxx.aaa.com.cn",

  //自动刷新浏览器。用于调试 true是开启,将会在页面注入一个js用来做实时通讯。
  "forceLivereload": true,

  //默认端口
  "httpPort": 80,

  //反向代理,用于共享 httpPort 端口
  "serverProxies": [{

    //如果用户访问这个路径,如 http://127.0.0.1/tech-bs/abc, 相当与访问 target设置的http路径,但还是走httpPort端口
    "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
  "proxyPort": 8989,

  //代理规则(支持正则,可以设置多个规则)
  "proxyRule": [{

    //替换规则
    "pattern": "xxx.b.com/skyfire/ssu/editBefore1",

    //用于响应的文件
    "responder": "/Users/kings/didi/prod/fe-scaffold-v1/app/dev/html/page1.html"
  }]
}

4.运行

注意:

  1. mac监听1024以下端口通常需要 sudo gulp
  2. 访问路径为 http://127.0.0.1/ +routerPath 例:http://127.0.0.1/tech-bs
  3. 启动服务后,将持续监听src下的目录文件变化,自动编译。
  4. gulp启动服务后,命令窗口不能关闭。想要实现关闭命令行服务继续运行,可以执行 nohup gulp &
  #创建文件夹
  gulp init

  #启动服务
  gulp

运行example

    git clone [email protected]:ian000/gulp-turbo.git
    cd gulp-turbo
    npm i
    cd example
    npm i
    gulp (注意:mac监听1024以下端口通常需要 sudo gulp)

快速构建前端项目目录

gulp init

提供易于开发、调试的开发联调环境(支持预编译语言jade,stylus,coffee)

运行默认环境 dev

gulp

提供基于requirejs的实时打包服务。

运行编译环境 dist, 用于上线

gulp dist

提供http server, 支持mock接口数据功能。


按照后端接口,在mock目录下按层级创建json文件.详细请参考现存的mock数据路径。

提供80端口代理、转发功能

 在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端口对应的路径。
  这对于并行开发多个项目很有用。

提供透明代理(即:线下不存在的资源,直接抓取线上,域名在Vhost属性中设置)

便捷的移动端调试(默认开启htpp代理服务,端口8989,可以代替fiddler或charles.)

// 代理服务器端口。 通常用于调试移动端,抓包,替换请求. 类似fiddler或者charlse
  "proxyPort": 8989,

  //代理规则(支持正则,可以设置多个规则)
  "proxyRule": [{

    //替换规则
    "pattern": "xxx.b.com/skyfire/ssu/editBefore1",

    //用于响应的文件
    "responder": "/Users/kings/didi/prod/fe-scaffold-v1/app/dev/html/page1.html"
  }]

支持https

在https项目里面,静态资源服务就需要支持https。

在turbo里支持https服务很简单。只需要在project-conf.json里面将 https属性设置为ture,重启服务即可。

注意:https默认端口为 443, 由于本地没有https证书,第一次运行,需要在浏览器下点选“信任证书”。如果没有提示,请在浏览器打开静态资源请求,届时会弹出警告,选择信任即可。

问题列表

  1. - 使用turbo,前后端如何联调页面?
  2. - 如何设置浏览器代理?
  3. - 手动安装chrome代理插件:SwitchyOmega

change log

[02.18] - 支持https
[01.27] - 修复watch中存在的bug,任务出现错误流中断时,任务不会结束且不能再次触发的问题
[01.15] - 优化dist执行过去,添加文件缓存,再次执行dist时,未变更文件将直接从文件缓存中提取,加快dist执行时间
[01.12] - 添加静态资源管理css、image部分支持
[01.08] - 修复透明代理
[01.04] - 减掉$CONFIG需要指定entryPath的配置,修改页面loder伴生文件的引用,入口文件将由页面引用的loder伴生文件名决定。
        - 去掉dist模式时的livereload

[2015~]
[12.29] - 新增静态资源加载器(js部分)
        - 新增entry文件夹,支持子目录
        - 抽离了require配置文件
[12.11] - 优化dist模式,js压缩时添加md5变更匹配
        - 新加tasks任务,展示可用任务信息;gulp默认default任务改为dev
        - 解决dist模式下watch不能实时压缩的问题;引入coffee-script,使用时需要再coffee register
[12.10] - 优化gulpfile,减少依赖,使用更方便,直接引入便可
[12.03] -【里程碑】将脚手架包装成npm组件
        - 加入json文件校验
        - 为解决gulpfile.coffe以后的维护问题,拆分gulpfile.coffe到gulp文件夹
        - 压缩css、js时,添加处理文件的log信息输出
[12.02] - 在gulp dist之前不需要先执行gulp dev了
[11.16] - svnChanges任务修改,过滤掉文件夹和删除的变更记录
[11.12] - 提供80端口代理、转发功能
        - 新增svnChanges任务,获取svn log中的change list, 以便用于填写上线单
[11.10] - 在dist模式下,增加sourcemaps支持
[11.09] - 抽离配置文件到package.json中
[11.06] - 新增图片文件夹
        - 支持透明代理
        - 支持代理
[11.05] - 修复dist模式
[11.04] - 新增page_$config.json
        - 自动配置页面内的wwwroot

TODOS

  1. 将资源合并,构建组件化机制。

Contributors

赵新
王江伟




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
nambo/gulp-js-import: gulp-js-import发布时间:2022-06-21
下一篇:
miniMAC/magic: CSS3 Animations with special effects发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap