使用gulp构建微信小程序开发工作流

web开发基本上都是基于webpack或者其他的构建工具来进行开发大大节约了开发者的时间。目前的微信小程序开发也有很多开源的框架可供选择但是如果使用原生开发模式网站优化但是如果使用原生开发模式虽然可以完美使用小程序原生的新特性和功能但是工作流角度上却十分简陋。

19年末的时候公司要开发一个新的小程序组里面的大佬同事提议使用gulp来构建下原生开发模式的工作流。一是为了摆脱简陋的工作流模式以节约开发时间二是也是把技术用到刀刃上。在大佬的指导开发下这个工作便进行了。总体来说这个工作并不难增益可能也没有那么大但是还是收获了很多。

文件复制

微信小程序的page目录通常包含 wxml , json , wxss 和 js 文件与原生开发模式不同的是我们使用 sass 预处理器来写样式其他的文件保持原样不同。因此搜索引擎用户其他的文件保持原样不同。因此对于 wxml , json , js 文件来说仅仅需要copy就行。因为在项目中已经配置了 eslint+prettier 来进行语法检查和代码美化因此不需要在工作流的js代码进行规范检查。如果没有配置可以安装 gulp-eslint 执行eslint规范检查。

const srcPath = "./src/**"; const distPath = "./dist/"; const wxmlFiles = [`${srcPath}/*.wxml`]; const jsFiles = [`${srcPath}/*.js`, `!${srcPath}/env/*.js`]; const jsonFiles = [`${srcPath}/*.json`]; // copy wxml const wxml = () => { return gulp .src(wxmlFiles, { since: gulp.lastRun(wxml) }) .pipe(gulp.dest(distPath)); }; gulp.task(wxml); // 其他copy流类似 ... 复制代码 sass处理

上面我们提到使用 sass 预处理来编写样式在输出的时候我们需要把 scss 样式转换成 wxss wxss 就是普通的 css 样式。这里我们使用 gulp-sass 插件转换scss样式。但是搜索引擎用户我们使用 gulp-sass 插件转换scss样式。但是需要注意的是在 scss 文件中我们可能会import相关样式可能是公共样式也可能是varibale和minxin。

//存放variable和mixin的sass文件在被引用时直接导入不引入dist目录中 const DIRECTIMPORT = ["/scss/", "/font/"]; const sassFiles = [`${srcPath}/*.{scss, wxss}`]; const wxss = () => { return gulp .src([...sassFiles, ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/*`)], { since: gulp.lastRun(wxss) }) .pipe(plumber({ errorHandler: onError })) .pipe( tap(file => { const filePath = path.dirname(file.path); //console.log("filepath", filePath); file.contents = new Buffer( // 匹配@import String(file.contents).replace( /@import\s+['|"](.+)['|"];/g, ($1, $2) => { console.log("$1", $1); console.log("$2", $2); //如果不是变量或者mixin则注释掉 return DIRECTIMPORT.some(item => { return $2.indexOf(item) > -1; }) ? $1 : `/** ${$1} **/`; } ) ); }) ) .pipe(sass()) .pipe(postcss([autoprefixer(["iOS >= 8", "Android >= 4.1"])])) .pipe( replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => { //console.log("$1", $1); //console.log("$2", $2); //console.log("$3", $3); //去掉注释并修改scss后缀为wxss return $3.replace(/\.scss/g, ".wxss"); }) ) .pipe(rename({ extname: ".wxss" })) .pipe(gulp.dest(distPath)); }; gulp.task(wxss); 复制代码 压缩图片文件