内容简介:由于小程序更新迭代速度很快,而且我们的技术栈是 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 }, }, };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- gulp构建小程序
- 多阶段构建Golang程序Docker镜像
- 构建一个混合的费用跟踪应用程序
- 构建安全计划 提升应用程序安全能力
- 第三章-构建Markdown应用程序
- 程序员疯狂记事:如何利用众多技术栈构建一个 Web 应用程序?!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。