结一

12 天前

微信小程序之构建

本文作者: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

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
    },
  },
};
1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。