WeApp Workflow Download - WeApp Workflow Source code download

WeApp Workflow

AI Source Code

1.0.0

Download

WeApp-Workflow: WeChat applet front-end development workflow based on Gulp

introduce

WeApp-Workflow is a front-end development workflow specially created for the development of WeChat mini programs. It is developed based on Gulp 4 and aims to solve the pain points of writing front-end code in the development process of WeChat mini programs through workflow.

Project homepage: https://github.com/Jeff2Ma/WeApp-Workflow

Article introduction: https://devework.com/weapp-workflow.html

Function

SCSS real-time compilation to WXSS

Use the Sass preprocessor to make writing CSS smoother. The .scss file will be compiled in real time into a .wxss file supported by the WeChat applet.

Convert px unit to rpx in mini program in WXSS(CSS)

Using the officially recommended iPhone 6 as the standard design format, you can automatically convert it to rpx by writing px directly during development.

// Input: src/pages/index/index.scss
. index__header {
	font-size : 14 px ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

// Output: dist/pages/index/index.wxss
. index__header {
	font-size : 28 rpx ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

Image compression

Compress images in real time and use incremental methods to prevent repeated compression.

Automatically upload images to CDN and update the path to https absolute path

The applet does not support image references with relative paths, but only absolute paths with https protocol headers. This workflow can upload the relative path images referenced in WXML and WXSS files to cloud storage CDN or upload them to personal server space through FTP/SFTP protocol. Currently supports Tencent Cloud and Qiniu Cloud.

// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >

// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >

Font files converted to base64 encoding

The applet does not support font files with relative paths. This workflow can transcode the Font files referenced in CSS into base64 and replace the original paths.

 // Input: src/pages/index/index.scss
@font-face {
  font-family: 'fontello';
  src: url("assets/fonts/fontello.ttf") format('truetype');
}

// Output: dist/pages/index/index.wxss
@font-face {
  font-family: 'fontello';
  src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}

Fully automatically build sprite images and generate corresponding CSS

This feature is driven by the postcss-lazysprite plug-in. After preparing the image during development, just write a code like @lazysprite "xxxx" to automatically build the sprite image and generate the corresponding CSS.

// Input: src/app.scss
@lazysprite "filetype" ;

/ / Output : d is t / app. wxss
. icon-filetype-doc {
    background-image : url(.. / sprites/filetype.png);
    background-position : 0 0 ;
    width : 80 px ;
    height : 80 px ;
}

. icon-filetype-pdf {
    background-image : url(.. / sprites/filetype.png);
    background-position : -90 px 0 ;
    width : 80 px ;
    height : 80 px ;
}

@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
    . icon-filetype-doc {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : 0 0 ;
        background-size : 170 px 170 px ;
    }

    . icon-filetype-pdf {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : -90 px 0 ;
        background-size : 170 px 170 px ;
    }
}

Highlights

Gulp4

Use the new features of the latest Gulp 4 version to make your workflow run faster.

Concise but not simple

The core has only one default task. The reasonable task matching mechanism reduces cumbersome processes and back-and-forth running of the terminal, making development more convenient.

Incremental update mechanism, runs faster

Introducing the incremental compilation of Sass and the incremental update mechanism of image-related tasks to make the workflow run faster.

Project structure

 .
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 开发相关的静态文件原始资源
│   │   ├── fonts //字体文件
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源（如tabbar icon）目录
│   ├── pages
│   └── utils
├── tmp //  通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录

Get started

The Node version is recommended to be v4 or above. Because this workflow involves third-party dependencies, it is recommended to operate in a scientific Internet environment.

Install

0. Please follow Gulp-cli globally first.

 npm install gulp-cli -g

1. Download the project file through git clone .

 git clone https://github.com/Jeff2Ma/WeApp-Workflow

2. It is recommended to delete the .git directory (Windows users please delete it manually)

 cd WeApp-Workflow
rm -rf .git

3. Install necessary modules

 npm i

4. Start development

It is recommended to copy config.js and rename it to config.custom.js , and then rewrite the relevant configuration information according to your actual needs (each configuration item has a comment). Next, run the following command in the terminal to enable it:

 gulp

iterm

Remaining tasks: gulp clean : clear dist , tmp folders.

Configuration

After completing the above operations, you need to make relevant settings in the "WeChat Web Developer Tools" (based on v1.x, and is no longer compatible with v0.x).

1. Create a new project and directly select the entire project directory, that is, the directory where project.config.json is located, as the project directory.

WeApp-Workflow configuration

develop

Next, you can enter regular development. During the development process, use a third-party editor (WebStorm, Sublime Text, etc.) to edit the files in the src directory . After saving the modifications, the gulp process will compile them in real time to the corresponding location dist directory. The WeChat web developer tool will automatically compile and refresh, and only serves as a preview function at this time .

Development key points:

SCSS development : Edit page-name.scss directly under src/pages/page-name , it will be automatically converted into page-name.wxss and placed in the corresponding location of dist directory. During the development process, where numerical values are involved, directly write px units (according to iPhone6 as the standard design draft), and it will be automatically calculated and converted into rpx units. If you do not want to convert under special circumstances, please write PX in uppercase letters.
WXML development : There are no special requirements except that the CDN image function requires a special image path to be written.
WebFont : First make a sprite image on a website like fontell.com and then get the ttf format file to src/assets/fonts . Then it can be automatically base64 transcoded by quoting it in the normal way.
CDN images : (This function is turned off by default and needs to be turned on in the settings.) wxss or wxml in the WeChat applet does not support images with relative paths and requires an absolute path starting with https. This workflow allows you to write relative paths directly during development, and the workflow will help upload to CDN and replace the original path. Such images must be placed under src/assets/images , and then write the path in wxml or CSS using %ASSETS_IMG%/filename.png . %ASSETS_IMG% is a customized directory for subsequent string replacement.
Sprite pictures : First of all, it is not recommended to use sprite pictures in small programs. It is better to use single pictures or WebFont directly. If you must use it, follow the small program example in the code to place the small picture directory under src/assets/sprites and then call it through @lazysprite "xxxx" in SCSS (it is recommended to put the calling code under app.scss ). For advanced usage of sprite images, please click here.

Q&A

Q: Why is there no AutoPrefixer function in the workflow?
A: Because the "Style Completion" option in the "Project" of WeChat Developer Tools already provides this function;
Q: Why is there no ES6 to ES5 conversion function of babel configured in the workflow?
A: As above, WeChat developer tools have been provided.
Q: What are the advantages compared with small program development frameworks such as WePY?
A: WePY developed by the WeChat payment team is indeed a good tool. If compared with WePY on the same level, WeApp-Workflow has no advantage at all. WeApp-Workflow is a workflow tool, not a development framework. It focuses on the development of CSS in small programs. For some developers, his/her small programs do not need a development framework as heavy as WePY.
Q: WeApp-Workflow does not have corresponding special compilation tasks (similar to gulp build , npm run build )?
A: Yes, because WeApp-Workflow is suitable for developing "small" small programs rather than complex small programs. Therefore, considering the development speed, code amount, etc., there is no special development stage and one task (dev). Development An additional compilation task (buid) is added during the completion phase. Just one task.