主要的代码就是这些，其实只要知道思路，这些东西都很简单，虽然我写的有点 ️:chicken:，但是主要的逻辑还是能理清楚的一些的。更加详细的可以去:eyes:我发的源码，多谢指教。:pray::pray::pray:
开发脚手架
因为这是小程序的脚手架，它不像其他 web 框架一样需要很多 webpack 的配置，所以相对简单很多。
对于这个脚手架，相比于开发者工具创建的默认项目，我弥补了它的一些问题
默认项目太过简单，只适合自己折腾，对于团队或者企业，缺乏相应的代码约定/规范，没有强制的约定会导致团队协作间的困难，提升code review的难度，所以我在原来的基础上加入了eslint,stylelint,prettier,commitlint等配置，以及git hook 在 pre-commit 时，执行校验，确保提交的代码尽量规范
由于对 css 预处理的钟爱，另外加入了对 less 的支持，并且解决小程序背景图不支持本地图片的问题
由于以上基本都是文件处理，所以选择 gulp 作为构建工具，这里是 v4, 与v3 写法上有一定的区别，不过关系不大
在根目录下创建 gulpfile.js
const gulp = require('gulp'); const chalk = require('chalk'); const rename = require('gulp-rename'); // 支持 less gulp.task('less', () => { return gulp .src('./miniprogram/**/*.less') .pipe(less()) .pipe(postcss()) // 配置在 post.config.js .pipe( rename((path) => { path.extname = '.wxss'; }) ) .pipe( gulp.dest((file) => { return file.base; // 原目录 }) ); }); // 开发环境监听 less if (env === 'development') { gulp.watch(['./miniprogram/**/*.less'], gulp.series('less')).on('change', (path) => { log(chalk.greenBright(`File ${path} was changed`)); }); } // 一下代码注释掉了，依赖包下载太慢了，这主要负责图片的压缩 const imagemin = require('gulp-imagemin'); const cache = require('gulp-cache'); // 使用缓存 gulp.task('miniimage', () => { return gulp .src('./miniprogram/**/*.{png,jpe?g,gif,svg}') .pipe( cache( imagemin([ imagemin.gifsicle({ interlaced: true }), imagemin.mozjpeg({ quality: 75, progressive: true }), imagemin.optipng({ optimizationLevel: 5 }), imagemin.svgo({ plugins: [{ removeViewBox: true }, { cleanupIDs: false }], }), ]) ) ) .pipe( gulp.dest((file) => { return file.base; // 原目录 }) ); });
其他的一些具体配置，可以看我的GitHub 仓库源码
参考
到此这篇关于开发Node CLI构建微信小程序脚手架的示例的文章就介绍到这了,更多相关Node CLI构建小程序脚手架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: