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

前言

刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念。当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手。学了些东西后,就按捺不住地想跳出原生工具的条条框框,把近些日子学的东西都拿出来熬一熬。

已有的一个小程序项目使用了github上一个使用webpack、babel、sass开发的小程序脚手架(wxapp-boilerplate),我需要在不变动原有项目代码的基础上,使用gulp来重构项目的工作流。

使用体验:使用vscode配合各种插件在src目录下开发,使用微信web开发者工具预览调试,通过cmd打开服务,可以用gulp命令快速创建page、component模板。还是很nice的。

介绍

根据开发中的刚需和痛点,最终做了以下工作,有实现不到位的,欢迎大家提出建议。

sass编译成wxss,同时处理了@import直接导入导致单文件过大的问题
修改gulpfile.js的aliasWords可为项目js配置alias
支持在src中的wxs使用es6+
使用微信web开发者工具的Npm构建
gulp命令快速创建page、component模板

项目地址:https://github.com/bluehat999/weapp-gulp

文章地址:https://www.cnblogs.com/mthz/p/weapp-gulp.html

要点

实现过程中遇到的问题,也是一些要点:

1.项目中的WXS文件使用了ES6语法,而WXS原生不支持ES6

wxs不支持ES6 语法,其标准基本是参考ES5 标准.
解决方案是使用babel将wxs像js那样从ES6转为ES5,在使用babel的时候,有个模块始终无法加载到,查出问题应该是babel的依赖间版本不一致的问题,就在github上查了gulp-babel的仓库,参照readme.md的示例重新安装模块和使用,就成功解决。

安装:

  npm install --save-dev gulp-babel @babel/core @babel/preset-env

使用:

  const f_wxs = done => {
      return gulp.src(WXS, { since: gulp.lastRun(f_wxs) })
          .pipe(plumber({ errorHandler: onError }))
          .pipe(babel({
            presets: ['@babel/preset-env']
          }))
          .pipe(rename({extname:'.wxs'}))
          .pipe(gulp.dest(DIST))
  }
  gulp.task('wxs', f_wxs)
2.sass编译成wxss,解决@import导致文件体积过大的问题

css不支持import语法,sass在处理@import时会直接把对应文件添加过来,从而导致wxss文件体积过大。

而wxss支持import语法,同时限制了单包代码不超过2M,所以需要采用方法避免sass编译时直接导入样式,而是沿用@import。简单来说,就是让sass编译时不处理import语句。

可以改sass的源码,让它跳过import,也可以在交给sass编译前将文件中的import语句注释掉,编译结束后再取消注释。

但是不处理import语句也会带来一个问题:文件中使用了引入文件中的变量和mixin时,会由于没有引入而找不到变量和mixin。我们需要再给不处理import语句加一个判断条件。

一般项目都会将全局的(需要被引用的)变量和mixin放在单独的文件里,而且会适当分成多个,以免单个文件过大。将这些文件放在指定的目录里,将目录路径作为判断条件来过滤掉需要import的变量和mixin的sass文件。

const SRC = './src/**/'
const SASS = [`${SRC}*.{scss,wxss,scss}`]
const DIRECTIMPORT = [`styles`, `font`]

const f_sass = done => {
    return gulp.src([...SASS,...DIRECTIMPORT.map(item => `!${SRC}${item}/**/*`)],
                    { since: gulp.lastRun(f_sass) ,allowEmpty:true})
        .pipe(plumber({ errorHandler: onError }))
        .pipe(tap((file) => {
            const filePath = path.dirname(file.path);
            file.contents = new Buffer(
                String(file.contents)
                .replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => {
                    const imPath = path.resolve(filePath + '/' + $2)
                    return DIRECTIMPORT.some( item => { return imPath.indexOf(item) > -1} ) ? $1 : `/** ${$1} **/`
            })
            )
        }))
        .pipe(sass())
        .pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => $3.replace(/\.scss/g, '.wxss')))
        .pipe(rename({ extname: '.wxss' }))
        .pipe(gulp.dest(DIST))
}
gulp.task('sass', f_sass)
3.微信小程序使用npm

小程序基础库2.2.1以上的版本开始支持npm安装第三方包。官方文档

仔细读了文档,和它的示例代码,不过还是被坑了一会。

node_modules必须放在小程序根目录或其子目录下,npm的package.json也是,否则在微信web开发者工具对dist进行npm构建时会提示找不到npm。

它的npm构建会在代码同级目录生成source map文件,方便做逆向调试。

不过npm的命令是需要在dist目录的上一级使用的,如果直接放在dist里,上一级就用不了,本来理想的方案是放在dist、修改npm寻找node_modules文件的地点,或者放在上一级、修改开发者工具构建时寻找node_modules文件的地点。

但是我实在没查到如何修改,也许看源码可以,所以采用了比较麻烦的方案。就是node_modules放在上一级,写一个gulp task将它整体复制到dist。node_modules毕竟挺大的,复制一份要用去10几秒,开销挺大,不过也只有node_modules更新了需要同步一下,总的来说也还好。

4.使用gulp-tap获取处理的文件名时并计算一个相对路径

原有项目使用了webpack来管理文件依赖,改用gulp的话,原有的一些依赖路径就是错误的,(比如引用config和utils目录下的文件时),如果直接修改代码,会和项目原有的编程习惯冲突,所以决定直接在gulp构建时来把错误的路径改为正确的相对路径。

5.微信小程序中使用lodash报错
Uncaught TypeError: Cannot read property 'prototype' of undefined

找到一篇解释的很好的文章

按照文章中给出的方案,在开发者工具中构建Npm后,可使用gulp lodash自动修改相应文件来修复这个问题。

6.微信小程序不支持async / await 语法

因为小程序支持ES6转ES5,我就没有在gulp中使用babel,没考虑到小程序对ES6以上的特性不支持。

小程序报了上诉错误,我首先查了一下regeneratorRuntime is not defined的错误,大致得知是异步的错误,找到报错的代码,发现使用了async await,猜测是微信小程序不支持,需要引入相应的包,然后google到了比较好的答案。

facebook代码仓库下载到了相应源码(只需要runtime.js就可以了),放入utils中,在使用了async的地方引入。不过我又遇到了下面的问题:

源码中报错部位在catch中,文件中既没有引入也没有定义这个Function,在网上也找不到答案,考虑在catch中,应该是处理报错之类的,注释掉也影响不大,我就把它注释掉了。

更多改进

改进一定会有的,如果觉得还行或者不行,劳烦关注一下我的博客和github。

项目地址:https://github.com/bluehat999/weapp-gulp

文章地址:https://www.cnblogs.com/mthz/p/weapp-gulp.html

原文地址:https://www.cnblogs.com/mthz/p/weapp-gulp.html

时间: 2024-11-06 18:09:51

使用gulp构建微信小程序工作流的相关文章

Python Flask构建微信小程序订餐系统

call--->q-2304636824-q 第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆https://food.54php.cn(使用微信扫码二维码体验下哦横须)一起来演示一下项目.本次课程是严格按照商业系统进行架构开发的,从PC管理员端到小程序会员端,从项目搭建到部署上线,通俗易懂.... 1-1 导学--Python Flask 构建微信小程

用mpvue构建微信小程序

背景 由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的.更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢? 1.现在微信小程序比较好,用户也比较多:利用微信小程序做推广,效果好: 2.小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除: 3.开发周期与开发难度小于原生app. 技术栈 采用前后端分离 1.Vue全家桶 2.mpvue 3.koa2+mysql 构建过程 1.安装工作 a)安装好node b)安装vue-cl

PythonFlask构建微信小程序订餐系统

第1章 课程介绍课程介绍 第2章 netty介绍与相关基础知识初识netty,学习阻塞与非阻塞,同步与异步,理解BIO.NIO.AIO以及netty的线程模型 第3章 使用netty编写第一个hello netty 服务器从零开始使用netty编写服务器,在网页访问后返回hello netty,主要对服务器启动类,channel初始化器以及助手类讲解,最后会对channel的生命周期进行讲解 第4章 使用netty构建websocket服务器理解实时通信,使用netty的websocket编写服

Python Flask构建微信小程序订餐系统 学习 资源

一.Flask MVC框架结构 1.1实际项目结构 1.2application.py  项目配置文件 Flask之flask-script模块使用 static.py 文件(部署到生成环境不需要这个文件,只是解决本地静态文件无法加载问题)   1.3.manager.py 启动文件   1.4.login.py    1.5.requirements.txt 项目依赖库文件管理 二.链接统一与版本管理 建立统一的URL管理函数,让URL可以方便修改.重构与扩展    三.账号功能模块示意图  

如何一键式搭建微信小程序

有了微信小程序,对你到底意味着什么? 对于用户来说,再也不用担心手机的内存不够用了!一个小程序只有1M,随便卸载一个App,就能安装很多小程序! 对于老板来说,你不再需要花费数十万来去请外包公司帮你去开发一个App来,而且还不能做多机型的适配! 对于开发者来说,你有了一个新的做私活的机会!微信小程序的模式让你轻轻松松一个人完成所有任务! 接入微信小程序,我们究竟有哪些问题? 微信小程序,是一个新生事物,和我们的传统的Web业务并不相同,而其基于JS的语法,也让很多前端开发工程师涌入其中.那么微信

微信小程序商城构建全栈应用 Thinkphp5

课程——微信小程序商城构建全栈应用[目录]第1章 前言:不同的时代,不同的Web第2章 环境,工具与准备工作第3章 模块,路由与获取请求参数第4章 构建验证层第5章 REST与RESTFul第6章 AOP与全局异常处理第7章 数据库访问与ORM第8章 专题.分类.商品详情接口编写第9章微信登陆与令牌第10章 微信支付第11章前端部分:前端框架构建与令牌管理第12章 购物车第13章 实现微信支付.购买商品流程与用户历史订单+第14章 CMS与CORS跨域第15章 小程序部署流程与TP5在生产环境中

微信小程序前端源码逻辑和工作流

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()

微信小程序商城构建全栈应用☆

┃ 小程序申请及认证 1.微信小程序申请: 进入微信公众平台,点击右上角的“立即注册”,账号类型选择“小程序”.按照官方引导,逐步完成小程序注册.由于小程序商城开发必须用到微信支付功能,所以在填写到“主体信息登记”时,注册方式选择“微信认证”通过微信认证验证主体身份,需支付300元认证费.这样将小程序申请和小程序认证同时操作,节省审核时间. 如之前有同一主体已认证的服务号,可以登录认证服务号,开通小程序,按照步骤填写信息提交即可.通过认证服务号开通的小程序无需再次进行小程序认证. 2.小程序信息

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链