千牛开放平台2.0
能编译出weex js的工程都可以很方便的使用千牛移动端调试和打包成千牛插件。本文后续会描述一个现有工程如何使用千牛调试并打包成千牛能识别的zip文件。
现有工程
以weex的cli工具weex-toolkit创建的工程为例:
AwesomeProject/
├── weex.html ##h5版本的模板文件
├── webpack.config.js ##.vue或者.we的编译
├── app.js ##entry js
├── package.json
├── assets
└── src
└── foo.vue
安装依赖
cnpm i gulp --save-dev #qap项目调试、打包等gulp插件 cnpm i gulp-qap@stable --save-dev cnpm i gulp-webpack --save-dev cnpm i webpack-dev-server --save-dev
增加gulp
①新增gulpfile.js
var path = require('path'),
gulp = require('gulp'),
webpack = require('webpack'),
gulpWebpack = require('gulp-webpack');
webpackDevServer = require('webpack-dev-server'),
gulpQap = require('gulp-qap');
var work_path = process.cwd();
var config = require(path.join(work_path, 'webpack.config.js'));
gulp.task('debug', function(cb) {
gulpQap.devtool({
ip: '30.*',//RegExp，调试时使用哪个ip进行调试
webpack: config[1],//defualt to load webpack.config.js
openUrl:['debug']//打开的页面，h5(h5版本) | debug(调试页面) | page(单个js页面)
}, cb);
});
gulp.task('package', function() {
var zipConfig = {
qapJson:'./qap.json',
zipName:'package.zip',
update:true,
jssdk:{
version:'stable',//defaul beta|stable
update:true}//是否每次debug/package都检测sdk升级
};
return gulp.src(['app.js'])//entry js
.pipe(gulpWebpack(config[1]))//weexConfig
.pipe(gulp.dest('dist'))
.pipe(gulpQap.package(zipConfig))
.pipe(gulp.dest('_output'));
});
module.exports = gulp;
②新增qap.json
{
"appKey": "32445",
"version": "1.0",
"pages": [
{
"default": true,
"url": "qap:///app.weex.js"
}
],
"WebRootPath": "http://path/to/callback/url"
}
调试
现在可以使用千牛调试了。
gulp debug
该命令会打开浏览器，使用千牛扫一扫即可调试。
使用与qap-cli方式一样，点击查看详情;
打包
gulp package
zip文件在_output/package.zip，也可以在gulpfile.js中自定义打包的名字和路径。
补充：
默认的打包用的是webpack.config.js的配置，是否启动代码压缩等请在webpack.config.js中配置。
新建工程
为了简化流程，想使用vue开发qap项目的可以直接clone下。
git clone git@github.com:fantasticcmm/qap-vue.git cd qap-vue cnpm i # 调试 gulp debug # 打包 gulp package