由于小程序更新迭代速度很快,而且我们的技术栈是 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 文件;第二个我们可以在 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
},
},
};
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码