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

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

内容简介:目前开发微信小程序时,可选的技术方案大概有四种,分别是:三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如而原生小程序的开发模式,又过于简陋,就样式来说,写惯了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构建的微信小程序开发工作流》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Programming in Haskell

Programming in Haskell

Graham Hutton / Cambridge University Press / 2007-1-18 / GBP 34.99

Haskell is one of the leading languages for teaching functional programming, enabling students to write simpler and cleaner code, and to learn how to structure and reason about programs. This introduc......一起来看看 《Programming in Haskell》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具