目前来说,对于构建小程序的,类似芋头这些框架,生态已经挺完善的了,没有什么必要再搞一套来折腾自己。但是,我司的小程序,是很早之前就开发的,我们负责人当时信不过这些开源的框架,于是自己用webpack搞了一套框架,但有一个比较严重的问题,有一些文件依赖重复打包了,导致小程序包体积比较大。
持续了一个多月,主包体积在2 m左右徘徊,开发都很难做下去。我们负责人终于受不了的了,给了我个任务,让我写一个构建小程序的工具,减少小程序包体积。
我们现在的框架对比一下原生小程序,其实差别不大,无非就是
ts=比;js
sass=祝辞wxs
wxml=祝辞wxml
json=祝辞json
由于我司小程序基础库是1.9.8的,不支持构建npm,所以node_modules的依赖包以及依赖路径需要自己处理,于是写了一个宝贝插件babel-plugin-copy-npm。
这么一想,其实不难,而且单文件编译,那不是大口的强项吗! ! !
最终效果:
而且由于增量更新,只修改改变的文件,所以编译的速度非常快。
项目地址:https://github.com/m-Ryan/ry-wx
最终流程大概如下:清除dist目录下的文件=比;编译文件到dist目录下=比;开发模式监听文件更改,生产环境压缩文件。
一、清除dist目录下的文件(clean.js)
const del=要求(del);
const fs=要求(fs);
const path=要求(“路径”);
const鹿=process.cwd ();
模块。出口=function清洁(){
如果(! fs.existsSync(路径。加入(慢性消耗病,“距离”))){
fs.mkdirSync(“区域”);
返回Promise.resolve(空);
}
返回德尔([‘*’,‘!npm '], {
力量:没错,
鹿:路径。加入(慢性消耗病,“距离”)
}）;
}；
之前
二、编译文件
1。编译打印稿(compileJs.js)
const杯=要求(“吞咽”);
const{巴贝尔}=要求(gulp-load-plugins) ();
const path=要求(“路径”);
const鹿=process.cwd ();
模块。出口=function compileJs (filePath) {
让文件=' src/* */* .ts ';
让dist=熬嗬搿?
如果(typeof filePath==='字符串'){
文件路径。加入(慢性消耗病,filePath);
dist=path.dirname(文件。替换(/src/,“距离”));
}
返回gulp.src(文件).pipe(巴别塔()).pipe (gulp.dest(经销));
}；
之前
2。编译sass (compileSass.js)
const杯=要求(“吞咽”);
const {postcss sass,重命名}=要求(“gulp-load-plugins”) ();
const path=要求(“路径”);
const鹿=process.cwd ();
const插件=[
要求(autoprefixer) {
浏览器:[' ios祝辞=8 ',' ChromeAndroid祝辞=53 '),
删除:假的,
添加:真
}),
要求(postcss-pxtorpx) {
乘数:2
propList (“*”):
}）
];
模块。出口=function compileSass (filePath) {
让文件=' src/* */* .scss ';
让dist=熬嗬搿?
如果(typeof filePath==='字符串'){
文件路径。加入(慢性消耗病,filePath);
dist=path.dirname(文件。替换(/src/,“距离”));
}
返回吞咽
.src(文件)
.pipe(萨斯({outputStyle:“压缩”})。(“错误”,sass.logError))
.pipe (postcss(插件)
.pipe (
重命名({
extname:“.wxss”
}）
）
.pipe (gulp.dest(经销));
}；
之前
编译json、wxml由于需要压缩,所以需要分开处理
(copyJson.js)
const杯=要求(“吞咽”);
模块。出口=函数copyJson () {
让文件=' src/* */* . json的;
让dist=熬嗬搿?
如果(typeof filePath==='字符串'){
文件路径。加入(慢性消耗病,filePath);
dist=path.dirname(文件。替换(/src/,“距离”));
}
返回吞咽。src([文件]).pipe (gulp.dest(经销));
}；
之前
(copyWxml.js)
