Shulou(Shulou.com)06/01 Report--

This article mainly explains the "example Analysis of WeChat Mini Programs Development Workflow based on Gulp". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "WeChat Mini Programs Development Workflow example Analysis based on Gulp".

Applicable scenario

At present, when developing WeChat Mini Programs, there are about four technical options to choose from, which are:

WeChat Mini Programs's original development

Use the wepy framework

Use the mpvue framework

Use the taro framework

Several development schemes have their own advantages and disadvantages. Using third-party framework development, you can enjoy the development convenience brought by the framework, but many new features and functions of Mini Program, such as WXS modules, custom components and plug-ins, are limited by the framework implementation and cannot be used.

On the other hand, the development mode of native Mini Program is too simple. As far as style is concerned, students who are used to writing less,stylus and sass must not be able to stand the writing of wxss. Based on this, they decided to use gulp automation tools to build a set of basic templates developed by WeChat Mini Programs. On the basis of completely retaining WeChat Mini Programs's functions and features, it is possible to use less to write styles, while adding image compression. Command line quickly create templates and other features, such as development, fast!

Characteristics

WeChat Mini Programs Project based on gulp+less

Automatic compression of project pictures

ESLint code check

Quickly create page, template, and component using the command line

Support production environment packaging

Getting Started

0. Before you begin, make sure that node and npm are installed, and that gulp-cli is installed globally

$npm install-global gulp-cli

1. Download the code

$git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

two。 Enter the directory and install dependencies

$cd wx-miniprogram-boilerplate & & npm install

3. Compile the code, generate the dist directory, and open the dist directory using developer tools

$npm run dev (development environment packaging) $npm run test (test environment packaging)

4. Create a new page, template or component

Gulp auto-p mypage create a page file named mypage gulp auto-t mytpl create a template file named mytpl gulp auto-c mycomponent create a component file named mycomponent gulp auto-s index-p mypage copy the file in pages/index create a page named mypage

5. Compile before uploading code

$npm run build (production environment package)

6. Upload code, audit, release version

Engineering structure wx-miniprogram-boilerplate ├── dist / / compiled directory ├── node_modules / / the project depends on ├── src │ ├── components / / WeChat Mini Programs custom component │ ├── env / / request domain name configuration │ ├── images / / picture and icon │ ├── pages / / Mini Program page text │ ├── styles / / ui framework Public style │ ├── template / / template │ ├── utils / / Public js file │ ├── app.js │ ├── app.json │ ├── app.less │ ├── project.config.json / / Project profile │ └── api.config.js / / Project api Interface configuration ├── .gitignore ├── .eslintrc.js ├── package-lock.json ├── package.json └── README.mdGulp description Tasks: dev development and compilation At the same time, listen for file changes, test overall compilation, request to test environment build overall compilation clean empty output directory wxml compilation wxml file (copy only) js compile js file At the same time, ESLint syntax check json compiling json file (copy only) wxss compiling less file compiling compressed picture file for wxss img compiling compressed picture file watch listening for development file change devEnv/testEnv/prodEnv generating request domain name configuration of corresponding environment auto automatically creates page according to template Template or component (custom component of Mini Program) gulp auto option:-s,-- template [string] of src copy [default: "_ template"]-p,-- page name generated by page [string]-t -- template name generated by template [string]-c -- component name generated by component [string]-- msg displays help information [Boolean] example: gulp auto-p mypage creates a page file named mypage gulp auto-t mytpl creates a template file named mytpl Gulp auto-c mycomponent creates a component file named mycomponent gulp auto-s index-p mypage copies files in pages/index to create a page named mypage

Q: why are there no js transformations, style completion, and code compression in the workflow?

A: Wechat developer tools come with functions such as converting ES6 to ES5, style completion and js code compression in Wechat developer tools. No additional additions are made in this workflow.

What is the use of the files in the Q: _ template directory?

A: use the gulp auto command to generate files automatically. The-s parameter can specify the object of copy. By default, the file in the folder _ template in the corresponding directory is the copy object. Developers can customize the files under _ template according to their business needs.

Will the files in the Q: _ template directory be compiled to the dist directory?

A: no.

Thank you for your reading, the above is the content of "example Analysis of WeChat Mini Programs Development Workflow based on Gulp". After the study of this article, I believe you have a deeper understanding of the example analysis of WeChat Mini Programs development workflow based on Gulp, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.