这篇文章主要讲解了“在Gulp基础上怎么构建微信小程序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“在Gulp基础上怎么构建微信小程序”吧!
三种开发方案,各有优劣。使用第三方框架开发,可以享受框架带来的开发便利,但对于小程序新增的诸多特性和功能,比如WXS模块、自定义组件和插件等,受制于第三方框架,无法使用。
而原生小程序的开发模式,又过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用gulp自动化工具来构建一套微信小程序开发的基础模板,在完全保留微信小程序功能和特性的基础上,又可以的使用less
来写样式,同时加入图片压缩,命令行快速创建模板等特性,如此开发,快哉,快哉!
基于gulp+less
构建的微信小程序工程项目
项目图片自动压缩
ESLint代码检查
使用命令行快速创建page
、template
和component
$ npm install --global gulp-cli
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
$ cd wx-miniprogram-boilerplate && npm install
$ npm run dev
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的页面
$ npm run build
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
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: 为什么工作流中没有加入js转换,样式补全以及代码压缩?
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能,在此工作流中不做额外添加。
Q: _template
目录的文件有什么用?
A: 使用gulp auto
命令自动生成文件,-s
参数可以指定copy的对象,默认情况下是以对应目录下文件夹为_template
中的文件为copy对象的。开发者可以根据业务需求,自定义_template
下的文件。
Q: _template
目录的文件是否会被编译到dist
目录?
A: 不会。
感谢各位的阅读,以上就是“在Gulp基础上怎么构建微信小程序”的内容了,经过本文的学习后,相信大家对在Gulp基础上怎么构建微信小程序这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!
当前文章:在Gulp基础上怎么构建微信小程序-创新互联
文章网址:https://www.cdcxhl.com/article16/eoedg.html
成都网站建设公司_创新互联,为您提供网站内链、定制开发、企业建站、域名注册、网站排名、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联