微信小程序之构建

转自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

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

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
    },
  },
};

复制代码