热门标签 | 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++ 开发实战:实用技巧与经验分享 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 本文探讨了资源访问的学习路径与方法,旨在帮助学习者更高效地获取和利用各类资源。通过分析不同资源的特点和应用场景,提出了多种实用的学习策略和技术手段,为学习者提供了系统的指导和建议。 ... [详细]
  • 2018年9月21日,Destoon官方发布了安全更新,修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中,攻击者可以通过构造特定的HTTP请求,利用该漏洞在服务器上执行任意代码,从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本,以确保系统的安全性。 ... [详细]
  • 大家好,全新的技术专栏《从零开始掌握容器云网络实战》正式上线。该专栏将系统地介绍容器云网络的基础知识、核心技术和实际应用案例,帮助读者全面理解和掌握容器云网络的关键技术与实践方法。 ... [详细]
  • 在 Vue 项目中,为了提高页面加载速度和优化用户体验,实现图片上传前的压缩处理至关重要。本文介绍了如何通过集成第三方库和自定义组件,有效减小图片文件大小,确保在不影响图像质量的前提下,提升应用性能。 ... [详细]
  • 在 openSUSE Tumbleweed 系统上搭建 51 单片机开发环境并进行编程实践。首先,通过 `sudo zypper in emacs` 命令安装文本编辑器 Emacs。接着,使用 `sudo zypper in sdcc` 安装 SDCC 编译器。最后,利用 `wget` 下载 sdcflash Python 脚本,以便于单片机的烧录和调试。此外,还介绍了如何配置开发环境,确保各组件协同工作,提高开发效率。 ... [详细]
  • 如何在 Node.js 环境中将 CSV 数据转换为标准的 JSON 文件格式? ... [详细]
  • 深入探索Node.js新框架:Nest.js第六篇
    在本文中,我们将深入探讨Node.js的新框架Nest.js,并通过一个完整的示例来展示其强大功能。我们将使用多个装饰器创建一个基本控制器,该控制器提供了多种方法来访问和操作内部数据,涵盖了常见的CRUD操作。此外,我们还将详细介绍Nest.js的核心概念和最佳实践,帮助读者更好地理解和应用这一现代框架。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • Android中将独立SO库封装进JAR包并实现SO库的加载与调用
    在Android开发中,将独立的SO库封装进JAR包并实现其加载与调用是一个常见的需求。本文详细介绍了如何将SO库嵌入到JAR包中,并确保在外部应用调用该JAR包时能够正确加载和使用这些SO库。通过这种方式,开发者可以更方便地管理和分发包含原生代码的库文件,提高开发效率和代码复用性。文章还探讨了常见的问题及其解决方案,帮助开发者避免在实际应用中遇到的坑。 ... [详细]
  • 点互信息在自然语言处理中的应用与优化
    点互信息(Pointwise Mutual Information, PMI)是一种用于评估两个事件之间关联强度的统计量,在自然语言处理领域具有广泛应用。本文探讨了 PMI 在词共现分析、语义关系提取和情感分析等任务中的具体应用,并提出了几种优化方法,以提高其在大规模数据集上的计算效率和准确性。通过实验验证,这些优化策略显著提升了模型的性能。 ... [详细]
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社区 版权所有