前端工程本质上是软件工程的一种。软件工程化关注的是性能、稳定性、可用性、可维护性等方面，注重基本的开发效率、运行效率的同时，思考维护效率。一切以这些为目标的工作都是"前端工程化"。工程化是一种思想而不是某种技术。
本篇文章你可以学到：
如何使小程序支持scss；
怎样通过gulp编译你的项目；
项目常用的模块封装；
小程序同webview之间如何优雅的进行交互；
集中式管理你的项目提高可维护性；
提升开发效率的小工具编写；
全文全部基于原生的小程序开发所阐述，各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来，而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。
普通小程序开发流程有可能会遇到的坑列举部分常见的
小程序本身不支持常用的css预编译器,导致样式规范随意散落在各个文件，无法统一进行管理，而现代前端开发中不论是less,sass,stylus 都可以提升css效率；
缺少统一的request拦截请求；
缺少统一的路由管理；
缺少集中式的API地址和ENV环境变量管理；
缺少统一的本地缓存读取管理；
重复的webview页面；
不支持ES7以上的高级语法，如async await等特性；
不管是体验版还是开发版只能存在一种环境，一旦发布预览测试环境切换繁琐；
上线前需要手动修改线上环境，容易出错......
如何解决？要解决工程化的问题，需要从两个角度入手：开发 && 部署。
开发Question
如何提高开发生产效率？
如何降代码维护难度？
Program
制定开发规范，提高团队协作能力；
使用自动化编译工具使项目支持各种插件和提高效率的工具；
模块/组件化开发;
所有需要集中管理的地方进行统一封装；
部署环境切换；
压缩打包；
项目搭建 完整目录结构开发流程
工程化方案选型
对于目前常用的工程化方案，webpack，rollup，parcel等来看，都常用与单页应用的打包和处理，而小程序天生是 “多页应用” 并且存在一些特定的配置。根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。所以小程序工程化方案推荐使用 gulp。
Start初始化一个项目，结构如下
src 为开发目录
dist（开启编译后可见）为预览/上传目录
.gitignore git上传忽略文件
gulpfile.js 编译配置文件
CHANGELOG.md 版本更新日志
README.md 项目说明文件
package.json 项目配置文件
编译用到的插件 使用npm或yarn自行安装，安装过程不过多赘述，不会请自行搜索。
"gulp": "^3.9.1"
"gulp-sass": "^4.0.2" scss编译插件
"gulp-postcss": "^6.4.0" 强大的css处理插件
"gulp-rename": "^1.2.2" 更改文件名
"gulp-replace": "^1.0.0" 替换内容
"gulp-changed": "^3.2.0" 检测改动
"autoprefixer": "^6.5.1" 自动添加前缀
gulp配置打包sass非常简单，唯一需要注意的是@import的使用,wxss是支持样式导入的，但上面说到过小程序是天生的多页面应用，每一个页面都对应一个wxss，因此sass打包会把import的文件打包到当前文件，从而导致当前文件的体积变大。由于微信限制单包代码不能超过2M，因此当css越写越多的时候，这种打包方式势必会使样式文件越来越大。
解决import导入问题那如何解决import的导入问题呢，其实也比较简单，说白了就是sass处理的时候，让其不处理import部分的语句就可以了。有两种方式可以做到，第一种是改写sass处理的源码，当遇到import语句时跳过。第二种是，在把文件交给sass处理前，我们先把import语句部分注释掉，这样sass处理的时候就会忽略了，当sass处理完成后，再把注释掉的语句打开即可。显然第一种成本比较高，也不好维护，所以我们采用第二种。
在处理import的时候，还有个地方是需要注意的。在sass中，import除了能引入css外，也可以引入变量，函数。因此，我们在处理的时候也需要注意区分，变量和函数最好有一个独立的文件目录存放，并且在import的时候，对于变量和函数，是必须交给sass处理的，也就是不能注释掉。因此我们单独配置了sass变量和函数存放的位置，这样我们在打包的时候，遇到这样的import语句，我们就跳过，交给sass处理，否则就代表其是引入了共用的样式文件，这样我们交给sass处理前，就先将其注释掉，sass处理完成后再把注释打开。
完整实现支持scss思路如下：
指定文件处理目录
gulp-replace通过正则匹配@import语句将其注释
判断当前@import语句是否存在于变量和函数文件的配置路径中
不存在就注释，存在就跳过
启用gulp-sass编译scss文件，
通过postcss对低版本ios和安卓进行兼容样式处理
gulp-rename更改文件后缀为.wxss
gulp-replace通过正则匹配@import语句打开注释