Home > Article > WeChat Applet > WeChat applet development: workflow built on Gulp
Currently, when developing WeChat mini programs, there are roughly four available technical solutions, namely: native development of WeChat mini programs, using the wepy framework, using the mpvue framework, and using the taro framework
will be continuously updated. thank you for your support.
WeChat applet development workflow based on Gulp
Three development options, each with its own advantages and disadvantages. Using third-party framework development, you can enjoy the development convenience brought by the framework, but for the many new features and functions of the mini program, such as WXS module, custom components and Plug-ins , etc. are restricted by third-party frameworks and cannot be used.
The development model of native small programs is too simple. In terms of style, students who are used to writing less, stylus and sass will not be able to tolerate the writing method of wxss. Based on this, I decided to use gulp is an automated tool to build a set of basic templates for WeChat applet development. On the basis of fully retaining the functions and characteristics of WeChat applet, you can also use less
to write styles and add image compression. , command line to quickly create templates and other features, so developed, happy, happy!
github行
WeChat applet project built based on gulp less
Automatic compression of project images
ESLint code inspection
Use the command line to quickly createpage
, template
and 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: Why are js conversion, style completion and code compression not added to the workflow?
A: WeChat developer tools come with functions such as babel converting ES6 to ES5, style completion, and js code compression. No additional additions are required in this workflow.
Q: What are the uses of the files in the _template
directory?
A: Use the gulp auto
command to automatically generate files. The -s
parameter can specify the copy object. By default, it is the folder in the corresponding directory. The files in _template
are copy objects. Developers can customize files under _template
based on business needs.
Q: Will the files in the _template
directory be compiled into the dist
directory?
A: No.
[x] Code comments
Practical Tutorial on WeChat Mini Program Development: Developing Running WeChat Mini Program
WeChat Mini Program Development
Video: Video tutorial on developing WeChat mini programs
The above is the detailed content of WeChat applet development: workflow built on Gulp. For more information, please follow other related articles on the PHP Chinese website!