本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载
由于小程序更新迭代速度很快，而且我们的技术栈是 react 全家桶，所以在对比 wepy 和 mpvue 之后，我们选择了直接使用原生小程序。对比图如下：
当然直接使用原生的有个显然的缺点：没有了构建。不过这没有关系，缺什么补上即可。
需要构建做什么
一般来说，我们需要构建主要是用来做这些工作：ES6/7 转 ES5、NPM 包管理、组件化、 CSS 预编译、图片压缩、打包合并等。
而这些能力除了CSS 预编译和图片压缩之外，其他的功能小程序默认已经提供了。所以一个小巧的小程序构建只需要支持CSS 预编译和图片压缩即可。
Gulp 构建方案
既然只涉及到一些任务的处理，那么使用 gulp 是最合适不过的了。
对于 CSS 预编译，有 gulp 对应的 sass、less、postcss 插件可选；对于图片压缩，可以使用 gulp 的 imagemini 插件，再装上各种图片的格式对应的压缩库即可。
一般来说，运行构建命令，我们都会从一个源目录（src）到一个目标目录（dev/dist），但是小程序的 NPM 能力是不允许 node_modules 在根目录之外的，这就有了冲突。总不能跑个任务拷贝整个 node_modules 到目标目录吧。
既然不能使用从一个源目录（src）到一个目标目录（dev/dist），那就只好在源目录就地解决了。
源目录解决方案
对于图片来说，压缩完了直接替换原图是没什么问题的。
对于 CSS 预编译来说，如使用 postcss，从 CSS 文件到 WXSS 文件比较好解决。但是又引出了两个新问题：
- CSS 文件最好是不要打包发布。
- 最好避免误修改 WXSS 文件，而是直接修改 CSS 文件。
第一个我们可以在项目配置文件中设置上传代码的时候过滤 CSS 文件；第二个我们可以在 VSCode 编辑器中隐藏 WXSS 文件，避免误操作。
To Base64
既然有了构建，当然希望还能把一些缺失的能力补上。如 background 不支持本地图片。对于这个 postcss 也有相关的插件能解决：
- postcss-url：可以把
background-image图片转成 base64 格式 - postcss-font-base64：可以把字体转成 base64 格式
代码配置
最后贴上相关的代码配置。
gulpfile.js
代码语言：javascript复制const gulp = require('gulp');
const rename = require('gulp-rename');
const runSequence = require('run-sequence');
const postcss = require('gulp-postcss');
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache'); // 使用缓存
const src = './miniprogram';
// 使用postcss
gulp.task('css', () => {
return gulp.src(`${src}/**/*.css`)
.pipe(postcss())
.pipe(rename((path) => {
path.extname = '.wxss';
}))
.pipe(gulp.dest((file) => {
return file.base; // 原目录
}));
});
gulp.task('img', () => {
// 修改你要压缩的图片地址
return gulp.src(`${src}/**/*.{png,jpe?g,gif,svg}`)
.pipe(cache(imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 4 }),
imagemin.svgo({
plugins: [
{ removeDimensions: true }, // 如果有 viewbox 则不需要 width 和 height
],
}),
])))
.pipe(gulp.dest((file) => {
return file.base; // 压缩到原目录
}));
});
gulp.task('watch', () => {
gulp.watch(`${src}/**/*.css`, ['css']);
});
gulp.task('dev', ['css'], () => {
runSequence('watch');
});postcss.config.js
代码语言：javascript复制const path = require('path');
module.exports = {
parser: 'postcss-scss',
plugins: {
'postcss-partial-import': {
path: [path.resolve(__dirname, 'src')],
},
'postcss-font-base64': {}, // font to base64
'postcss-advanced-variables': {},
'postcss-nested': {},
'postcss-extend-rule': {},
'postcss-color-function': {},
'postcss-url': {
url: 'inline', // inline image to base64
},
},
};
