微信小程序之构建

由于小程序更新迭代速度很快，而且我们的技术栈是 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 也有相关的插件能解决：

background-image

代码配置

最后贴上相关的代码配置。

gulpfile.js

const gulp = require('gulp');
const rename = 'gulp-rename');
const runSequence = 'run-sequence');
const postcss = 'gulp-postcss');
const imagemin = 'gulp-imagemin');
const cache = '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',() => {
  // 修改你要压缩的图片地址
  /**/*.{png,jpe?g,gif,svg}`)
    .pipe(cache(imagemin([
      imagemin.gifsicle({ interlaced: true }),imagemin.jpegtran({ progressive: teral" style="color: rgb(120,imagemin.optipng({ optimizationLevel: 4 }),imagemin.svgo({
        plugins: [
          { removeDimensions: true },// 如果有 viewBox 则不需要 width 和 height
        ],}),])))
    .pipe(gulp.dest((file) => {
      // 压缩到原目录
    }));
});

gulp.task('watch',() => {
  gulp.watch(`${src}/**/*.css`,['css']);
});

gulp.task('dev',0);">'css'],() => {
  runSequence('watch');
});

postcss.config.js

const path = require('path');

module.exports = {
  parser: 'postcss-scss',plugins: {
    'postcss-partial-import': {
      path: [path.resolve(__dirname,'src')],},0);">'postcss-font-base64': {},// font to base64
    'postcss-advanced-variables': {},0);">'postcss-nested': {},0);">'postcss-extend-rule': {},0);">'postcss-color-function': {},0);">'postcss-url': {
      url: 'inline',// inline image to base64
    },};