Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to build WeChat Mini Programs on the basis of Gulp". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to build WeChat Mini Programs on the basis of Gulp.

Applicable scenario

Each of the three development schemes has its own advantages and disadvantages. Using third-party framework development, you can enjoy the development convenience brought by the framework, but many of the new features and functions of Mini Program, such as WXS modules, custom components and plug-ins, are limited by the third-party framework 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

Getting Started0. Before you begin, make sure that you have installed node and npm, and install gulp-cli$ npm install-- global gulp-cli1. Download the code $git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git2. To enter the directory, the installation depends on $cd wx-miniprogram-boilerplate & & npm install3. Compile the code, generate the dist directory, and use developer tools to open the dist directory $npm run dev4. 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. Compile $npm run build6 before uploading the code. Upload code, review, release wx-miniprogram-boilerplate ├── dist / / compiled directory ├── node_modules / / the project depends on the pictures in the ├── src │ ├── components / / WeChat Mini Programs custom component │ ├── images / / page and the icon │ ├── pages / / Mini Program page file │ ├── 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 / / ESLint ├── package-lock.json ├── package.json └── README.mdGulp description Tasks: dev development and compilation At the same time listen for file changes build overall compilation clean clear output directory wxml compile wxml file (copy only) js compile js file At the same time, ESLint syntax check json compiles json files (copy only) wxss compiles less files compiles compressed picture files for wxss img compiles compressed picture files watch listens to development files changes auto automatically creates page,template or component (Mini Program custom components) gulp auto option:-s -- src copy template [string] [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 "how to build WeChat Mini Programs on the basis of Gulp". After the study of this article, I believe you have a deeper understanding of how to build WeChat Mini Programs on the basis of 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.