Front-end workflows for mobile

In the development of mobile projects, we will encounter such as mobile technology selection, mobile adaptation, pre-processor Language usage specification and compilation, a variety of tedious work (compression, merging, inline, Sprite, CSS prefix ...). And so on, over and over again, we need a project starter file that combines best practices, and this workflow is built for this purpose to improve the efficiency of mobile project development.

I prefer to call this workflow a base library, rather than a name that is so big on the workflow. Like its name, it is used as the basis of the project, on a good basis to develop projects, just like standing on the shoulders of giants, to ensure the quality and efficiency of the project.

In addition, because it is a basic library developed for mobile (especially for activity-based projects), the technology selection is simple, especially for the first-entry mobile and the front-end people who have just made the mobile end, even after a period of mobile, understand the basic library architecture and function implementation, perhaps also have gain.

Let's take a look at all aspects of the base library.

Basic Library Technology Selection

Before formally getting to know the base library, first introduce its technology selection, let you have a general understanding.

• Zepto.js + deferred.js + callbacks.js + touch.js (library)
• Flexible.js (mobile REM adaptation scheme)
• Handlebars (template engine)
• Gulp (automated build tool)
• Sass (pre-processor language)

Features of the base library implementation

After reading the technology selection, see what it can achieve and whether it meets your needs.

1. Sass Compiling
2. CSS Js Image Compression
3. Css Js Merge
4. Css Js Inline
5. The Include feature of HTML
6. Autoprefixer
7. Auto Refresh
8. Go to cache
9. Provides pre-compilation of handlebars template files
10. Provides common function functions
11. Sprite Chart
12. ESLint
13. REM Mobile End Adaptation Solution
14. Loading, dialog components with the same built-in style as the Weui style

Environment installation for the base library

OK, if you decide to try this base library, first make sure you have the appropriate environment, here are the steps:

1. Download Nodejs, install

2. Install CNPM, in fact you only use the terminal to execute the following command.

    npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Install the gulp, also you need to execute the following sentence command.

    cnpm install --global gulp

Base Library Code Acquisition

After installing the environment, we need to get the code and get the code in two ways:

1.github

    clone [email protected]:mqyqingfeng/lnv-mobile-base.git

2.yeoman

    cnpm install -g yo    cnpm install -g generator-lnv-mobile    yo lnv-mobile

Effect

Yeoman.png

Enter the project name to create a folder with the project name you entered, and the code for the underlying library is created automatically.

Base Library Run

After getting the file, go to the root of the file, remember, in all use, the two commands:

1. Use during development:

    gulp

When you open the gulp command, do not close the terminal, Gulp will monitor the src directory changes, according to the different files to do the corresponding operation.

2. Final Build:

    gulp build

When you execute the gulp build command, it is automatically compressed, merged, inline, and cached, which is the final on-line version.

Base Library directory Structure

Before you introduce the various features of the underlying library, first look at the directory structure.

srcUnder

├── src/                        # 源文件    └── font                      # 字体文件    └── img                       # 图片    └── include                    # include文件 └── js # js └── scss # scss └── static # 静态资源 └── tpl # handlebars模板 └── widget # 组件 └── index.html # index.html

gulpafter the command is executed, the directory is generated dev

├── dev/                        # dev目录    └── font                       # 字体文件目录    └── img                       # 图片目录    └── js                        # js    └── css                        # css目录 └── static # 静态资源目录 └── tpl # handlebars模板目录 └── widget # 组件目录 └── index.html # index.html

gulp buildafter the command is executed, the directory is generated build

├── build/                      # 构建目录    └── combined                   # 合并后的文件目录    └── img                       # 图片目录    └── js                        # js    └── css                        # css目录 └── static # 静态资源目录 └── widget # 组件目录 └── index.html # index.html

Note that the directory dev is generated through the src directory, do not change the dev contents of the directory directly at any time!!!

And the build catalog is the final frame of the directory, is the final version to be used online.

Note that node_modules folders are not submitted!!!

This article goes to the brief app

Front-end workflows for mobile