热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于Gulp构建的微信小顺序开辟工作流

wx-miniprogram-boilerplate基于Gulp构建的微信小顺序开辟工作流实用场景现在开辟微信小顺序时,可选的手艺计划大概有四种,分别是:微信小顺序原生开辟运用we
wx-miniprogram-boilerplate

基于Gulp构建的微信小顺序开辟工作流

实用场景

现在开辟微信小顺序时,可选的手艺计划大概有四种,分别是:

  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
├── .eslintrc.js // ESLint
├── 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: 不会。

TODO

  • [x] 代码解释
  • [x] 范例敕令行运用
  • [x] eslint
  • [ ] 引入经常使用的CSS库,比方weui之类的

末了

将延续更新,如果有新的发起,迎接建立Issue或发送PR,谢谢你的支撑和孝敬。


推荐阅读
  • C/C++ 应用程序的安装与卸载解决方案
    本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序,包括自动检测并安装所需的运行库,确保应用能够顺利安装和卸载。 ... [详细]
  • 本文将详细介绍如何配置并整合MVP架构、Retrofit网络请求库、Dagger2依赖注入框架以及RxAndroid响应式编程库,构建高效、模块化的Android应用。 ... [详细]
  • 本文详细介绍了如何在VSCode环境中配置Prettier工具以支持TypeScript项目,同时结合ESLint实现代码风格的一致性和自动化格式化。 ... [详细]
  • 本文总结了在多人协作开发环境中使用 Git 时常见的问题及其解决方案,包括错误合并分支的处理、使用 SourceTree 查找问题提交、Git 自动生成的提交信息解释、删除远程仓库文件夹而不删除本地文件的方法、合并冲突时的注意事项以及如何将多个提交合并为一个。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 汇总了2023年7月7日最新的网络安全新闻和技术更新,包括最新的漏洞披露、工具发布及安全事件。 ... [详细]
  • 本文分享了作者在使用LaTeX过程中的几点心得,涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]
  • 雨林木风 GHOST XP SP3 经典珍藏版 YN2014.04
    雨林木风 GHOST XP SP3 经典珍藏版 YN2014.04 ... [详细]
  • 本文档旨在提供C语言的基础知识概述,涵盖常量、变量、数据类型、控制结构及函数定义等内容。特别强调了常量的不同类型及其在程序中的应用,以及如何正确声明和使用函数。 ... [详细]
  • 在Linux系统中使用EncFS实现文件夹加密
    为了保护个人隐私或敏感数据不被未经授权的访问,可以通过加密技术来增强安全性。本文介绍如何在Linux系统上使用EncFS工具创建和管理加密文件夹,以确保即使在系统登录状态下,特定文件夹中的数据也保持加密状态。 ... [详细]
  • 本文旨在探讨Swift中的Closure与Objective-C中的Block之间的区别与联系,通过定义、使用方式以及外部变量捕获等方面的比较,帮助开发者更好地理解这两种机制的特点及应用场景。 ... [详细]
  • 本文介绍了如何使用 Python 的 Pyglet 库加载并显示图像。Pyglet 是一个用于开发图形用户界面应用的强大工具,特别适用于游戏和多媒体项目。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • 本文将详细介绍Fuel CMS如何基于CodeIgniter框架构建,包括其单入口模式的实现方式及关键配置文件的作用。通过分析本地环境中的index.php和.htaccess文件,我们将更好地理解Fuel CMS的核心架构。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
author-avatar
cxl
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有