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

栏目: 编程工具 · 发布时间: 5年前

内容简介:目前开发微信小程序时,可选的技术方案大概有四种,分别是:三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如而原生小程序的开发模式,又过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用

目前开发微信小程序时,可选的技术方案大概有四种,分别是:

  1. 微信小程序原生开发
  2. 使用wepy框架
  3. 使用mpvue框架
  4. 使用taro框架

三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如 WXS模块自定义组件插件 等,受制于第三方框架,无法使用。

而原生小程序的开发模式,又过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用 gulp 自动化 工具 来构建一套微信小程序开发的基础模板,在完全保留微信小程序功能和特性的基础上,又可以的使用 less 来写样式,同时加入图片压缩,命令行快速创建模板等特性,如此开发,快哉,快哉!

github走起

特性

  • 基于 gulp+less 构建的微信小程序工程项目
  • 项目图片自动压缩
  • ESLint代码检查
  • 使用命令行快速创建 pagetemplatecomponent

Getting Started

0. 开始之前,请确保已经安装node和npm,全局安装gulp-cli

$ npm install --global gulp-cli
复制代码

1. 下载代码

$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
复制代码

2. 进目录,安装依赖

$ cd wx-miniprogram-boilerplate && npm install
复制代码

3. 编译代码,生成dist目录,使用开发者工具打开dist目录

$ npm run dev
复制代码

4. 新建page、template或者component

gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面
复制代码

5. 上传代码前编译

$ npm run build
复制代码

6. 上传代码,审核,发版

工程结构

wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架,公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

复制代码

Gulp说明

Tasks:
  dev              开发编译,同时监听文件变化
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件(仅仅copy)
  js               编译js文件,同时进行ESLint语法检查
  json             编译json文件(仅仅copy)
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  
  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项:
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例:
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面
复制代码

Q&A

Q:为什么工作流中没有加入js转换,样式补全以及代码压缩? A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能,在此工作流中不做额外添加。

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

Q: _template 目录的文件有什么用? A: 使用 gulp auto 命令自动生成文件, -s 参数可以指定copy的对象,默认情况下是以对应目录下文件夹为 _template 中的文件为copy对象的。开发者可以根据业务需求,自定义 _template 下的文件。

Q: _template 目录的文件是否会被编译到 dist 目录? A: 不会。


以上所述就是小编给大家介绍的《基于Gulp构建的微信小程序开发工作流》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

修改代码的艺术

修改代码的艺术

Michael Feathers / 刘未鹏 / 人民邮电出版社 / 2007-09-25 / 59.00元

我们都知道,即使是最训练有素的开发团队,也不能保证始终编写出清晰高效的代码。如果不积极地修改、挽救,随着时间流逝,所有软件都会不可避免地渐渐变得复杂、难以理解,最终腐化、变质。因此,理解并修改已经编写好的代码,是每一位程序员每天都要面对的工作,也是开发程序新特性的基础。然而,与开发新代码相比,修改代码更加令人生畏,而且长期以来缺乏文献和资料可供参考。 本书是继《重构》和《重构与模式》之后探讨......一起来看看 《修改代码的艺术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具