目前来说，对于构建小程序的，类似芋这些框架，生态已经挺完善的了，没有什么必要再搞一套来折腾自己。但是，我司的小程序，是很早之前就开发的，我们负责人当时信不过这些开源的框架，于是自己用工具搞了一套框架，但有一个比较严重的问题，有一些文件依赖重复打包了，导致小程序包体积比较大。

持续了一个多月，主包体积在2M左右徘徊，开发都很难做下去。我们负责人终于受不了了，给了我个任务，让我写一个构建小程序的工具，减少小程序包体积。

我们现在的框架对比一下原生小程序，其实差别不大，无非就是

ts=js sass=wxsswxml=wxmljson=JSON由于我司小程序基础库是1.9.8的，不支持构建国家预防机制，所以节点_模块的依赖包以及依赖路径需要自己处理，于是写了一个巴别塔插件巴别塔-插件-副本-国家预防机制。这么一想，其实不难，而且单文件编译，那不是吞咽的强项吗！

最终效果：

而且由于增量更新，只修改改变的文件，所以编译的速度非常快。

项目地址：https://github.com/m-Ryan/ry-wx

最终流程大概如下：清除距离目录下的文件=编译文件到距离目录下=开发模式监听文件更改，生产环境压缩文件。

一、清除距离目录下的文件(clean.js)

const del=require(' del ')；const fs=require(' fs ')；const path=require(' path ')；const CWD=流程。CWD()；模块。exports=function clean(){ if(！fs.existsSync(path.join(cwd，' dist '){ fs。mkdirsync(' dist ')；返回答应我。解析(null)；}返回del([ '*，npm' ]，{ force: true，CWD 3360 path。join(CWD，“dist”)})；};二、编译文件

1.编译typescript(compileJs.js)

常数大口=require('大口');const { babel }=require('吞咽-加载-插件')();const path=require(' path ')；const CWD=流程。CWD()；模块。exports=function Compilejs(FilePath){ let file=' src/* */* .ts '；let dist=' distif(文件路径的类型==' string '){ file=path。加入(CWD，文件路径)；dist=路径。目录名(文件。替换(/src/，' dist ')；}返回大口。src(文件)。管道（巴别塔())。管道（大口。目的地(dist))；};2.编译sass(compileSass.js)

常数大口=require('大口');const { sass，postcss，rename }=require(' graw-load-plugins ')(；const path=require(' path ')；const CWD=流程。CWD()；const plugins=[require(' autoprefixer ')({ browsers :[' IOs=8 '，' ChromeAndroid=53' ]，remove: false，add: true })、require(' postss-pxtropx ')({ multiplier : 2，proprist :[' *]})]；模块。exports=function compiless(Filepath){ let file=' src/* */* .“SCS”；let dist=' distif(文件路径的类型==' string '){ file=path。加入(CWD，文件路径)；dist=路径。目录名(文件。替换(/src/，' dist ')；}回饮src(文件)。管道(sass({ output style : ' compressed ' }).on('error '，sass.logError)).管道(postcss(插件))。管道（重命名({ extname : }).wxss' }).管道（大口。目的地(dist))；};编译json，wxml，由于需要压缩，所以需要分开处理

(copyJson.js)

常数大口=require('大口');模块。exports=function copyJson(){ let file=' src/* */* .JSON '；let dist=' distif(文件路径的类型==' string '){ file=path。加入(CWD，文件路径)；dist=路径。目录名(文件。替换(/src/，' dist ')；}返回大口。src([文件])。管道（大口。目的地(dist))；};(copyWxml.js)

常数大口=require('大口');const minifyHtml=require('大口-HTMl-minify’)；模块。exports=function copyWxmlFiles(){ let file=' src/* */* .wxml '；let dist=' distif(文件路径的类型==' string '){ file=path。加入(CWD，文件路径)；dist=路径。目录名(文件。替换(/src/，' dist ')；}返回大口。src(文件)。管道(minifyHtml()).管道（大口。目的地(dist))；};4.拷贝其他静态资源，例如字体、图片

(copyAssets.js)

常数大口=require('大口');模块。exports=函数copy assets(){ let file=' src/* */* * '；let dist=' distif(文件路径的类型==' string '){ file=path。加入(CWD，文件路径)；dist=路径。目录名(文件。替换(/src/，' dist ')；}回饮src([文件，'!**/*.json '，'！**/*.ts '，'！**/*.js '，'！**/*.SCS '，'！**/*.wxml' ]).管道（大口。目的地(dist))；};5.引入文件(gulpfile.js)

常数大口=require('大口');const clean=require(' ./build/clean’)；const compileJs=require(' ./build/Compilejs’)；const compileSass=require(' ./build/compiless as ')；const copyJson=require(' ./build/copy JSON’)；const copyWxml=require(' ./build/copy WXMl ')；const copyAssets=require(' ./build/copy assets’)；const fs=require(' fs-extra ')；const path=require(' path ')；常数粉笔=require('粉笔');const CWD=流程。CWD()；const day js=require(' day js ')；常量任务=[干净，庄重。并行([compileJs，compileSass，copyJson，copyWxml])，copyAssets]；if(过程。ENV。NODE _ ENV==' development '){任务。推(看)；}坟墓。任务('默认'，严重。系列(任务))；任务（手表，手表);函数watch() { console.log(粉笔。蓝色(` s正在监听文件.$ { GetNow()} `)；常量观察器=大口。watch(' src/* */* *)；watcher.on('change ')，函数(filePath，stats){ compile(文件路径)；});watcher.on('add ')，函数(文件路径，统计){编译(文件路径)；});watcher.on('unlink '，function(filePath，stats){ let distfile=filepath.replace(/^srcb/,' dist ')；让绝对路径=if (distFile.endsWith(').ts '){ distFile=distFile。替换(/).ts$/，' .js’)；} else if (distFile.endsWith(').SCS’){ distFile=distFile。替换(/).scss$/，' .wxss’)；}绝对路径=path.join(cwd，distFile)；if (fs.existsSync(绝对路径)){ fs.unlinkSync(绝对路径);console.log(粉笔。黄色(`删除文件：$ {路径。base name(distFile)} $ { GetNow()} `)；} });}函数编译(文件路径){ console.info(粉笔。绿色(`编译完成：$ {路径。basename(FilePath)} $ { GetNow()} `)；if (filePath.endsWith(').ts’){ Compilejs(FilePath)；} else if (filePath.endsWith(').SCS’){ compiless(文件路径)；} else if (filePath.endsWith(').wxml’){ copyWxml(filePath)；} else if (filePath.endsWith(').JSON’){ copyJson(file path)；} else { copy assets(Filepath)；} }函数getNow() { return dayjs().格式(' hh :mm :s ')；}巴别塔的配置如下。babelrc.js

const babelopments={ preset s :[' @ babel/preset-typescript '，[ '@babel/env' ]，plugins: [ 'lodash '，[' @ babel/plugin-propose-decorator '，{ legacy: true } ]，' babel-plugin-add-module-exports '，[' @ babel/plugin-transform-runtime '，{ corejs: false，helpers: true，regenerator:/src ' }]，[ 'babel-plugin-copy-npm '，{ rootDir: 'src '，outputDir: 'dist '，npmDir: 'npm '，format: 'cjs '，strict: false，minify: true，loose: true，cache : true }]}；if(过程。ENV。node _ ENV==' production '){ babelopments。偏好。unshift([' minify '，{ mangle: { exclude: [ 'wx '，' module '，' exports '，' __wxConfigx '，' process '，' global' ] }，keepfnname 3360 true })；} module.exports=babelOptions以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。