微信小程序之構建

轉自IMWeb社區，做者：結一，原文連接

因爲小程序更新迭代速度很快，並且咱們的技術棧是 react 全家桶，因此在對比 wepy 和 mpvue 以後，咱們選擇了直接使用原生小程序。對比圖以下：

固然直接使用原生的有個顯然的缺點：沒有了構建。不過這沒有關係，缺什麼補上便可。

須要構建作什麼

通常來講，咱們須要構建主要是用來作這些工做：ES6/7 轉 ES五、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
    },
  },
};

複製代碼