Getting started with front-end build tools-fis3

FIS3 is a front-end-oriented engineering building tool. Solve the problems of performance optimization, resource loading (asynchronous, synchronous, on-demand, preload, dependency management, merging, embedding), modular development, automation tools, development specification, code deployment, etc. in front-end engineering.

The official website address is: https://fex-team.github.io/fis3/index.html

We have to do the front and back separation, the static resources deployed to the CDN. After investigating several front-end construction tools, we chose the FIS3, because we can meet our needs, and lightweight, simple configuration, easy to use, installation is not easy to error. Download Installation installation Nodejs
Download Address: http://nodejs.cn/download/
Recommended to download the latest version of the Nodejs, such as v8.1.3+.
Install to default directory and view version number after completion: node-v NPM installation Fis3
Executing in cmd: NPM install-g fis3
After installing FIS3, perform fis3-v in cmd to determine if the installation is successful

The relevant shell commands are as follows:

Node-v
npm install-g fis3
fis3-v

Simple to use

Description: fis3, such as front-end building tools, rely on the relative path, such as./xxx/xxx.js; Identification: , <link href= ">, <script src=" "> URL (") and other resource configurations.

If your project does not meet this requirement, you need to make some changes.

First, in the root directory of the front-end code, create the file fis-conf.js. FIS3 will look for this file as a configuration.

To modify the contents of the Fis-conf.js file:

Configure the CDN resource prefix
fis.media (' prod ') for different environments. Match (' *.{ Js,css,png} ', {
  domain: ' http://cdn.cncounter.com/cncounter-web '
});

Fis.media (' beta '). Match (' *.{ Js,css,png} ', {
  domain: ' http://beta.cdn.cncounter.com/cncounter-web '
});

Fis.media (' Dev '). Match (' *.{ Js,css,png} ', {
  domain: ' http://dev.cdn.cncounter.com/cncounter-web '
});


All JS, CSS plus hash
fis.match (' *.{ Js,css,png} ', {
  usehash:true
});

Production environment for JS compression
fis.media (' prod '). Match (' *.js ', {
  optimizer:fis.plugin (' Uglify-js ')
});

Dev environment does not add hash, do not compress and optimize
fis.media (' Dev '). Match (' *.{ Js,css,png} ', {
  usehash:false,
  optimizer:null
});

To explain briefly, Fis.media (' prod ') means the configuration of the production environment.

When using FIS3, you can specify a packaged version, such as:

FIS3 Release prod-d Cdn_release

If not specified, the DEV environment is the default (media in Fis3)

Specifies that the output directory is the-D option, you can specify an absolute path, a relative path;

In addition, the Fis.match is a very simple configuration that will cover the front.

Where Usehash specifies whether to generate a hash based on the content, such as Common-utils.js in the generated directory: Common-utils_331734d.js;

Optimizer specify optimized configuration, such as file compression, merging, inline, etc.

Additional NPM components/plug-ins may need to be installed by other plug-ins; Sample

Windows Usage Example (CMD environment):

E:
cd E:\cncounter-web\src\main\webapp
dir fis-conf.js
fis3 release prod-d cdn_release

Linux or MAC is similar, please configure yourself according to need, or refer to the official website.

Then, enter the Cdn_release directory, to see the corresponding HTML,CSS,JS and other documents change it.

If the project is not split and used in combination with MAVEN, execute the FIS3 build (you can specify the output directory of files such as HTML), and then assemble them through plug-ins such as copy-resources.

If more complex features are required, refer to the official configuration document: Https://fex-team.github.io/fis3/docs/beginning/release.html

Original Author: Anchor Http://blog.csdn.net/renfufei

Original date: July 10, 2017