使用gulp优化小程序构建流程

174 浏览量更新于2024-08-31 收藏 61KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"本文将详细介绍如何使用gulp构建微信小程序的步骤，包括解决文件重复打包问题，减少小程序包体积，以及实现快速增量更新。" 在微信小程序的开发过程中，优化包体积至关重要，因为它直接影响到用户的加载速度和体验。文章提到，原本使用webpack构建的小程序存在文件重复打包的问题，导致主包体积过大。因此，作者被赋予了创建一个专门的构建工具的任务，以解决这个问题。在项目中，由于公司小程序的基础库版本较低，不支持构建npm模块，所以需要自行处理`node_modules`中的依赖以及依赖路径。为此，作者编写了一个名为`babel-plugin-copy-npm`的Babel插件，以便于处理这些情况。 gulp因其单文件编译的特性，成为了构建这个小程序的理想选择。项目完成后，实现了快速编译和增量更新功能，大大提升了开发效率。构建流程分为三个主要步骤： 1. 清除dist目录下的文件（clean.js）：使用`del`库配合`fs`和`path`模块，首先检查`dist`目录是否存在，如果不存在则创建，否则删除其中所有文件，但保留`npm`文件夹。这样可以确保每次构建时都有一个干净的环境。 2. 编译文件： - 编译typescript（compileJs.js）：这一步将.ts文件转换为.js文件。通常会使用`typescript`库进行转换，并配置相应的编译选项，如目标环境、模块系统等。 - 编译SASS（compileCss.js）：将.scss文件转换为.wxss，可以使用`node-sass`或`dart-sass`库完成这一步。 - 处理WXML和JSON文件：可能需要进行模板语言的转换，保持与微信小程序的语法兼容。 - 处理依赖路径和npm包：利用自定义的`babel-plugin-copy-npm`插件处理依赖，确保它们在小程序环境中能正常工作。 3. 监听和压缩文件（watchAndCompress.js）：在开发模式下，通过`gulp.watch`监听文件变化，一旦有变动立即重新编译。在生产环境下，可以使用`gulp-uglify`等库进行代码压缩，进一步减小包体积。整个构建过程通过gulpfile.js进行配置和调度，将上述各个任务组合在一起，形成完整的构建流程。此外，项目还包含了错误处理和日志记录，以帮助开发者更好地调试和理解构建过程。项目源码可以在GitHub上找到（https://github.com/m-Ryan/ry-wx），对于需要自定义构建流程的微信小程序开发者，这是一个很好的学习和参考案例。通过这个例子，我们可以看到如何利用gulp灵活地构建小程序，解决特定问题，提高开发效率。

资源详情

资源推荐

gulp构建小程序的方法步骤构建小程序的方法步骤

主要介绍了gulp构建小程序的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的

参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

目前来说，对于构建小程序的，类似taro这些框架，生态已经挺完善的了，没有什么必要再搞一套来折腾自己。但是，我司的

小程序，是很早之前就开发的，我们负责人当时信不过这些开源的框架，于是自己用webpack搞了一套框架，但有一个比较严

重的问题，有一些文件依赖重复打包了，导致小程序包体积比较大。

持续了一个多月，主包体积在2M左右徘徊，开发都很难做下去。我们负责人终于受不了了，给了我个任务，让我写一个构建

小程序的工具，减少小程序包体积。

我们现在的框架对比一下原生小程序，其实差别不大，无非就是

ts => js

sass=>wxss

wxml=>wxml

json=>json

由于我司小程序基础库是1.9.8的，不支持构建npm，所以node_modules的依赖包以及依赖路径需要自己处理，于是写了一个

babel插件 babel-plugin-copy-npm。

这么一想，其实不难，而且单文件编译，那不是gulp的强项吗！！！

最终效果：

而且由于增量更新，只修改改变的文件，所以编译的速度非常快。

项目地址：https://github.com/m-Ryan/ry-wx

最终流程大概如下：清除dist目录下的文件 => 编译文件到dist目录下=> 开发模式监听文件更改，生产环境压缩文件。

一、清除dist目录下的文件（clean.js）

const del = require('del');

const fs = require('fs');

const path = require('path');

const cwd = process.cwd();

module.exports = function clean() {

if (!fs.existsSync(path.join(cwd, 'dist'))) {

fs.mkdirSync('dist');

return Promise.resolve(null);

}

return del([ '*', '!npm' ], {

force: true,

cwd: path.join(cwd, 'dist')

});

};

二、编译文件

1.编译typescript（compileJs.js）

const gulp = require('gulp');

const { babel } = require('gulp-load-plugins')();

const path = require('path');

const cwd = process.cwd();

module.exports = function compileJs(filePath) {

let file = 'src/**/*.ts';

let dist = 'dist';

if (typeof filePath === 'string') {

file = path.join(cwd, filePath);

dist = path.dirname(file.replace(/src/, 'dist'));

}

return gulp.src(file).pipe(babel()).pipe(gulp.dest(dist));

};

2.编译sass（compileSass.js）

const gulp = require('gulp');

const { sass, postcss, rename } = require('gulp-load-plugins')();

const path = require('path');

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38551749

粉丝: 7
资源: 936

使用gulp优化小程序构建流程

小程序Gulp开发脚手架

基于Gulp微信小程序开发工作流

微信小程序-一个由gulp构建微信小程序项目

构建工具比较：Webpack vs Gulp

gulp build

linux 安装gulp

PS D:\gulp\gulp> gulp aaa gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写， 如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1 字符: 1

gulp-useref 的assets方法

gulp和rollup的区别

"scripts": { "start": "gulp watch", "build": "gulp build pack", "postinstall": "npm run build" },

webpack vite rollup gulp

gulp grunt 和webpack 区别

gulp怎么在window上写一个变量

webpack gulp

'gulp' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

前端自动化工具gulp怎样

npm run gulp

gulp.task("watch",function(){ gulp.watch("./*.html",["copy-html"]); gulp.watch("./*.js",["copy-js"]); gulp.watch("./*.php",["copy-php"]); gulp.watch("./*.css",["copy-css"]); });

gulp no gulpfile found

gulp怎么向页面中写入一个变量

最新资源

PS D:\gulp\gulp> gulp aaa gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置行:1 字符: 1

'gulp' 不是内部或外部命令，也不是可运行的程序或批处理文件。

gulp.task("watch",function(){ gulp.watch("./.html",["copy-html"]); gulp.watch("./.js",["copy-js"]); gulp.watch("./.php",["copy-php"]); gulp.watch("./.css",["copy-css"]); });