专栏首页IMWeb前端团队微信小程序之构建

微信小程序之构建

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【CSS】410- 关于CSS盒子模型、BFC及其应用

    把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型.

    pingan8787
  • vue-cli首屏优化技巧

    之前用 vuecli做了个博客,是一个单页面项目,大概有十个路由 直接 npm run build打包出来,有一个 1M的巨大 js文件

    前端迷
  • CSS border dashed属性虚线间隔不可控的解决方法

    可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:

    德顺
  • 「css基础」关于字体相关的基础知识(一)

    常言道网页设计的好坏,95%取决于字体的排版。尽管现在抖音、小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,...

    前端达人
  • 图像处理初学者应该学习的100个问题-你都学会了吗?

    本文整理了图像处理初学者应该需要了解的100个基础问题,涉及读取、显示图像、操作像素、拷贝图像、保存图像、灰度化(Grayscale)、二值化(Thres...

    代码医生工作室
  • salesforce lightning零基础学习(十四) Toast 浅入浅出

    https://developer.salesforce.com/docs/component-library/bundle/force:showToast/s...

    用户1169343
  • 为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文)

    Web 页面性能优化,解决了图片相关,问题就解决了大半。本文从 Web 常见的图片格式入手,引出与图片优化相关的有效方案,期望对大家能有一点帮助。

    lucifer210
  • 【Rust日报】 2019-11-12 揭开异步Rust的神秘面纱

    经过大量的重构之后,librsvg现在可以在Rust中完成所有CSS解析和匹配,无需使用libcroco。另外,CSS引擎来自Mozilla Servo,因此它...

    MikeLoveRust
  • 喜马拉雅、ctrip、b站、流利说、蜻蜓FM、爱回收前端面试经历

    我的回答是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度,JS的事件循环中每个宏任务称为一个Tick(标记),在每个标记的末尾会追加一...

    前端迷
  • 浏览器输入URL回车之后发生了什么?(超详细版)

    这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最近闲的无聊,然后就自己做了一篇笔记,感觉比之前理解更透彻了。

    前端迷

扫码关注云+社区

领取腾讯云代金券