基于 gulp 的 APICloud 脚手架

基于 gulp 的 APICloud 脚手架

介绍

为了方便开发 APICloud 应用,本脚手架提供了 lesspugejsES6 语法编译支持,同时集成了 autoprefixer。并且,在生产环境编译时,会自动把页面引用的所有 cssjs 压缩并以内联的方式注入到HTML页面中,对于js文件,还会对代码进行摇树优化,从而提高APP的性能。

本脚手架集成了rollup,JavaScript文件间可用ES6的import/export语法或CommonJS的require/exports语法对模块添加依赖,被依赖的模块将会自动内联进所导入模块的文件中,最终再被内联进HTML文件中。So,对于已导入的模块不需要再在HTML文件中添加script标签引用。

由于集成了babel,所以可以使用绝大部分的ES6语法,并且支持ES7的async/await语法,当使用这些语法时打包工具会自动导入相应的垫片。注意:脚手架默认没有开启垫片导入,若需要可解除.babelrc文件内的注释开启语法垫片导入。

对于模块依赖的问题,你可能要参考https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports。

本脚手架集成了 APICloud 的wifi同步插件,处在开发模式时会实时监视src目录下的文件变动并动态编译到目标目录,然后执行WIFI同步功能,从而实现改完文件APP自动刷新。

在开发环境下,为了易于调试、支持source map(目前只配置了css的source map),只编译lessES6语法并以文件链接的形式加载。

推荐每个html文件都建立对应名称的lessjs文件,打包时会自动把这些文件以内联的方式注入到HTML中。

本脚手架提供了模板创建功能,用于自动创建htmlcssjs文件,具体请参考下面使用方法的实用命令

注意: ES6 语法只能在js文件中使用,不能在html文件的内联script标签中使用!

注意: 运行打包或开发命令时会删除dist下的 htmlcssscriptimageres文件夹!

脚手架开源地址:https://github.com/lyswhut/apicloud-gulp-template

目录说明

apicloud-gulp-template
├── dist    // 最终编译后的文件目录,在gulpfile中把它改成你项目的实际目录
│   ├── config.xml
│   ├── html
│   │   └── main.html
│   ├── image
│   │   └── loading_more.gif
│   └── index.html
├── gulpfile.js
├── config.js // 配置路径、apicloud wifi功能配置等
├── createView.js
├── package-lock.json
├── package.json
├── Readme.md
├── src   // 源文件目录
│   ├── common // 公共css、less文件夹,不要在html中直接引用本文件夹的内容,本文件夹用于存放布局模板、mixin等代码,然后由css文件夹里的less文件用@import引入
│   │   └── common.less
│   ├── config.xml // app配置文件
│   ├── .syncignore // wifi 同步忽略文件列表,把不需要同步的文件放到这里
│   ├── css // css文件夹,在html引用less文件时,请把less扩展名改成css,如在index.html引用index.less的写法为src="./css/index.css"
│   │   ├── api.css
│   │   ├── index.less
│   │   └── main.less
│   ├── html // html文件夹
│   │   └── main.pug
│   ├── image // 图片文件夹
│   │   └── loading_more.gif
│   ├── index.pug  // app主页文件
│   ├── layout  // 存放pug布局文件,不要在html中直接引用本文件夹的内容,在html文件夹的pug文件中用extend或include的方式引入
│   │   └── layout.pug
│   ├── res // 资源文件目录
│   └── script // js 文件夹
│       ├── api.js
│       ├── index.js
│       └── main.js
└── tmp // 本文件夹为临时文件目录,用于存放编译后的less、js文件,最后再读取本文件夹的内容内联到html中
    ├── css
    │   ├── api.css
    │   ├── index.css // 事实上,上面的 src="./css/index.css" 引用的是这个文件!
    │   └── main.css
    ├── html
    │   └── main.html
    ├── index.html
    └── script
        ├── api.js
        ├── index.js
        └── main.js

使用

git clone https://github.com/lyswhut/apicloud-gulp-template.git

rm -rf .git

npm install

然后把你的源代码放到src目录中对应的目录里。

再打开 config.js 修改 paths 对象里的 dist 值为你的最终输出目录。

再说一遍,运行打包或开发命令时会删除 dist 下的 htmlcssscriptimageres文件夹!

最后

# 开发模式
npm run dev

# 打包
npm run build

# 实用命令
## 以main.pug为模板新建名为test.pug的文件及对应css及js文件
## 会自动识别是.pug/.ejs/.html文件,less/css也是
## 若不传目标模板,将以 index 为目标模板
npm run cv -- test main

你可能感兴趣的:(前端,apicloud,脚手架,前端,混合APP,gulp)