微信小程序之构建

栏目: CSS · 发布时间: 5年前

内容简介:由于小程序更新迭代速度很快,而且我们的技术栈是 react 全家桶,所以在对比 wepy 和 mpvue 之后,我们选择了直接使用原生小程序。对比图如下:当然直接使用原生的有个显然的缺点:没有了构建。不过这没有关系,缺什么补上即可。

由于小程序更新迭代速度很快,而且我们的技术栈是 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 = 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
    },
  },
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷产品:36讲直通世界级产品经理

硅谷产品:36讲直通世界级产品经理

曲晓音 / 电子工业出版社 / 2018-10 / 59

《硅谷产品:36讲直通世界级产品经理》是Facebook资深产品经理曲晓音撰写的产品实战教程,立足于作者在Facebook、Instagram、Microsoft、Atlassian等硅谷科技公司的工作经验,分享硅谷先进的产品思维和方法论,用实际案例带领读者了解硅谷产品经理的所想所做。 《硅谷产品:36讲直通世界级产品经理》适合产品经理从业者、想要提升产品理解能力的技术运营人员、刚刚入行或者......一起来看看 《硅谷产品:36讲直通世界级产品经理》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具