A preliminary study on F.I.S (front-end engineering)_html/css_WEB-ITnose

1. First introduction to FIS

I encountered the problem of static resource browser cache update during the project, so I looked for a solution on the Internet. Although this problem has not been solved before, the method is nothing more than setting a new URI for it to force the browser to update. The process still sounds fairly simple.

I also accidentally searched for a post on Zhihu: How do you develop and deploy front-end code in a large company?

I saw the mention of FIS in this article, and started learning from it. I was a little excited, but I soon discovered that there were more problems.

2. Try

Originally I just wanted to have a tool that can mark the front-end resources, so that I can easily solve the problem of browser Static cache update problem. The description of FIS is indeed true, so let’s start working on it.

Installation

FIS is developed based on Nodejs, so nodejs is a must. Install. .

Then install it through the npm command, npm install -g fis. The result was stuck.

Since this was my first contact, I searched on Baidu for a long time and couldn’t find a solution. give up. . .

I discovered the official video tutorial, so I took the time to watch a few episodes and roughly understood that FIS is a very simple tool. And it solves the problems of front-end development:

1. Resource compression

2. md5 stamp

3. Resource merging

These are the few functions that seem to be more useful. What I am most concerned about is the md5 stamp. .

md5 stamp

The so-called Md5 stamp is like this:

cce9803be197548ebfa2aac9d64882642cacc6d41bbb37262a98f745aa00fbf0

After stamping, it looks like this:

df71d4bf8dee57c8098810fba115044a2cacc6d41bbb37262a98f745aa00fbf0

Of course the name of the file itself has also changed: script/placeholder_88025f0.js

This solves two problems:

1. If the URI that refers to the static resource changes, then the browser will naturally fetch the new resource, which solves the problem of updating the cache

2. md5 is calculated from the file, so it will only work if the file changes. Generate a new URI, otherwise there is no need to change it. This solves the problem of incremental updates and takes into account the traffic impact

Of course, for a small project like mine, the second Points are almost useless.

Try to install again

Now that you know the benefits, continue the installation and open the fis official website: http://fis.baidu .com, which has introductory tutorials. After all, the public help provided by Baidu team is quite good. And it’s in Chinese, so it feels very close. . The reason may be that the npm website is frequently blocked. . Well, the official also has a plan to use mirroring:

npm install some-npm-module -g --registry=国内镜像 --disturl=https://npm.taobao.org/dist

These things are mentioned on the official website, so I won’t go into details. Go out and turn left to go here: https://github.com/fex-team/fis/issues/65

This time it’s fine, it’s installed, fis -v

3. Encounter problems

After installing it, start using it in the project. Only then did I realize that I was too young. . . . . .

1. Configuration

Directly use fis release -md ../output, and start generating and publishing. The result was ruined. All js/css/imgs, including cats and dogs, had md5 stamps added to them. This is troublesome and not what I want at all. In other words, it would be ideal to directly solve the problem of adding MD5 stamps with one click through a tool.

Then you have to study the official documents to understand the specific configuration method. In FIS, configuration is done through the fis-conf.js file. Official example:

// Set the minimum interval for image merging

fis.config.set('settings.spriter.csssprites.margin', 20);

// Uncomment the following to enable the simple plug-in. Note that the plug-in needs to be installed first. npm install -g fis-postpackager-simple

fis.config.set('modules.postpackager', 'simple');

// Uncomment the following Set packaging rules

fis.config.set('pack', {

'/pkg/lib.js': [

'js/lib/jquery.js ',

'js/lib/underscore.js',

'js/lib/backbone.js',

'js/lib/backbone.localStorage.js ',

],

// Cancel the comment below to set the CSS packaging rules. Image merging will be performed during CSS packaging

'/pkg/aio.css': '**.css'

});

// Uncomment the following to enable simple automatic merging of scattered resources

fis. config.set('settings.postpackager.simple.autoCombine', true);

fis.config.merge({

roadmap : {

path : [

                                                                                                                      //It is modular js files (files marked with this value will be wrapped by amd or closure)

                                                                                                                                                                                                                                                                           [ 'lib.js' ],

                                                                                                                                                                                                                                          ​ //After compilation, output to the /static/widget/xxx directory

                                                                                                                                                         //All js files

                                                                                                                                                           /js$&'

                                                                                                     **.ico',

                                                                                                                                                                                                                                       🎜>

                                                                                                                                                              . png, .gif files

        reg: /^/images/(.*.(?:png|gif))/i,

                                                                                                                                                                                                                                                     🎜>

url: '/m/$1?log_id=123',

//Publish to /static/pic/xxx directory

release: '/static/pic/ $1'

                                                                                                                                        : /^/template/(.*. php)/i,

                                                                                                                                                                to

                                                                                                                                         //Publish to the /php/template/xxx directory

                                                                                                                    Other files not matched

                                                                                                                                                   🎜>

]

}

});

What I currently use most is roadmap, which I feel is a core setting.

2. Resource positioning

The so-called resource positioning is to locate resource references in html/js/css and compile FIS ( Replace it with the new resources generated). Well, it’s actually quite simple, just like the example mentioned at the beginning of this article:

a7a2a7c217aa105a117a233b2d154fe52cacc6d41bbb37262a98f745aa00fbf0

After stamping, it looks like this:

df71d4bf8dee57c8098810fba115044a2cacc6d41bbb37262a98f745aa00fbf0

In this way, resource updates are automatically completed every time you publish , a little bit cool. . But here comes the problem. . . The current replaced URI of FIS is an absolute path. What does this sentence mean?

For example, a css code:

.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat; height:406px; }

which references the image img/lgoin_image.png. But what it looks like after being compiled by FIS:

.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat; height:406px;}

FIS directly replaces the absolute path, which brings about a problem. It was originally a relative directory, but after changing to an absolute directory, it becomes the root directory. What could be the problem?

Problems will occur if a secondary directory is used. For example, the system is deployed in the myweb directory under tomcat's webapps. When accessed: http://localhost:8080/myweb. Then when the above css locates the resource, it is http://localhost:8080/myweb/css/img/lgon_image.png.

But after FIS is compiled, it will look like this: http://localhost:8080/css/img/lgon_image_369f159.png. This will make it inaccessible. So I consulted about this issue in the FIS discussion forum, and the reply was:

Now all are absolute paths, mainly to consider the function implementation of resource merging and CDN deployment

This can only be solved in other ways. For example, you can configure the roadmap to add domain when generating the URL of the resource. This method was originally used for CDN deployment. But it can also solve the above problems.

3. Files that you don’t want to process

Many third-party resources are used in the system, such as jquery, jqueryUi and other libraries, but these libraries We basically won't modify the code, so there won't be problems with static resource compression and adding md5. Of course, you don't want to process these files in FIS, and FIS processes all js/css/imgs by default. This also involves configuration issues.

fis.config.merge({

roadmap : {

path : [

{

) //js file of plugin

reg : /^/plugin/(.*.(?:js|css))/i,

useHash : false,

useCompile : false,

            url : '${appServer}$&',

                                                                                              >

This is a configuration fragment I intercepted, using reg to locate the specific directory

useHash:false, which means not to add md5 stamps

useCompile:false, which means not to compile resources Interpretation processing

Well, with this configuration, the js/css under the plugin will not be processed.

Fourth stage experience

In fact, I gave up in the end, because the project will use jenkins hudson for integration, and there are There are many deployment issues that we are unwilling to go into in depth due to time constraints. The original idea of ​​using a tool to add an md5 stamp or version number was shattered.

But there are still gains:

1. Front-end engineering can have such an out-of-the-box idea. In fact, there is no big progress, it just looks very awkward. Moreover, FIS feels like it is in its initial stage, and it is indeed an auxiliary tool that can be considered for the development of relatively standardized projects

2. What really interests me is the front-end modularization. This part is an advanced step in FIS, and the real front-end engineering is actually this part. I have too little experience in front-end, just a preliminary level, so this advanced content requires time to learn and practice

3. Both front-end and back-end are programmers and engineers.