Posted on

weinre的安装

如果有node环境的话，直接npm安装就可以了。

1
npm install weinre -g

具体请访问:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

weinre的使用

假设weinre已经在以下地址运行。
http://192.168.1.18:8080

访问weinre主页

1
http://192.168.1.18:8080/

其实使用非常简单，只要在你想调试的页面代码中注入以下js文件就可以了。

1
<script src="http://192.168.1.18:8080/target/target-script-min.js#anonymous"></script>

通过手机浏览器或者APP Webview访问要调试的页面。
比如说DEMO里面的：http://192.168.1.18:8080/demo/weinre-demo.html

PC Chrome访问http://192.168.1.18:8080/client/#anonymous
可以看到如下界面：

Targets列出了当前的所有被访问的调试页面，点击其中的一个。再把顶部的Tab切换到Elements。

如果想看某一个DIV的DOM，鼠标hover上去就可以了。

手机里也会hignlight对应的DIV

当然js console也是可以看到的。

support platform

Weinre support platform
　　Support the debug client (browser debugging interface):

1
2
3
Google Chrome
Apple Safari
Other WebKit based browser

　　Support the debug target (need to debug web site or application interface):

1
2
3
The Android browser application
iOS Mobile Safari application
PhoneGap/Cordova

Does not support the debug target:

1
2
iOS 3.1.3 and earlier versions
WebOS 1.45 and earlier versions

Posted on

缘起

通常我们至少会有三个环境，QA环境，RC环境，Release环境。如果再加上开发环境跟灰度环境的话就有五个。那这么多环境都在跑同一个工程，怎么才能保证各个环境可以随时切换是设计初期就要考虑到的重要环节。

各个环境的特点

QA环境(QUALITY ASSURANCE)：测试环境，开发人员提交给QA验收的版本，BUG数未知。代码可能还会有多次改动。
RC环境(Release Candidate)：预发布环境，顾名思义，发布前的最后一个版本，一般代码不会再有改动。
Release环境：生产环境，正式给用户使用的了。

资源文件的管理

一般情况下js、css、image资源文件会有两个版本，开发版本以及正式版本。
开发环境：使用工程根目录/public中的资源文件源代码，方便调试。
QA环境：QA环境发布的时候会执行Gulp打包脚本，将/public中的源文件打包至/build。QA环境使用/build目录的资源文件。
RC环境：RC环境比QA环境多了一个步骤，将/build中的文件同步至CDN。RC环境使用CDN的资源文件。
Release环境：与RC一致。

通过node-config管理配置文件

https://github.com/lorenwest/node-config

如果想在各个环境做一些定制化的东西，比如我想在Release环境报错的时候把log打出来，或者可以发报警邮件，node-config很好的满足了这个需求。
举个栗子，默认情况下我想绑定3333端口，qa环境我想绑定3344端口。
default.json

1
2
3
{
    "port":3333
}

qa.json

1
2
3
{
    "port":3344
}

剩下的就只需要在启动的时候设置相应的NODE_ENV就会自动读取了。

1
export NODE_ENV=qa

转载、引用请注明文章出处。

Posted on

希望通过Gulp实现的功能

1、静态资源文件(js、css、image)的实时更新。
2、性能优化(css、js文件压缩)。
3、替换(url)。

源代码与构建代码的分离

1
2
3
4
/views
/public
/release
/build

/views 模板页面源代码。
/public 资源文件js、css源代码以及image。
/release 构建以后生成的模板页面。
/build 构建以后生成的资源文件。

js文件相关

1、压缩、混淆js代码。
2、将js文件中的/public替换成CDN的url。
3、给js文件名添加hash并且把映射关系输出到js.manifest文件。
4、把所有js文件中的require引用按照js.manifest进行替换，key替换成value。

gulp-rev会扫描你的js文件信息生成对应的hash，只要有修改，hash就会不一样，以此达到更新实时更新资源文件的目的。
js.manifest

1
2
3
{
  "base.js": "base-358a33152f.js"
}

image文件相关

1、给image文件名添加hash并且把映射关系输出到image.manifest文件。

image.manifest

1
2
3
{
  "logo.png": "logo-358a33152f.png"
}

css文件相关

1、编译less文件。
2、压缩css代码。
3、将css文件中的/public替换成CDN的url。
4、给css文件名添加hash并且把映射关系输出到css.manifest文件。
5、把所有css文件中的图片文件引用按照image.manifest进行替换，key替换成value。

css.manifest

1
2
3
{
  "base.css": "base-358a33152f.css"
}

html模板相关

1、把所有html模板文件中的js、css、image文件分别引用按照js.manifest、css.manifest、image.manifest进行替换，key替换成value。
2、将模板文件中的/public替换成CDN的url。

转载、引用请注明文章出处。