Preliminary study on F.I.S (front-end engineering)

first, the initial knowledge of FISIn doing the project encountered a static resource browser cache update problems, and then find a solution on the network. Although this problem has not been resolved before, the method is simply to set a new URI for the browser to force the update. The process sounds quite simple. It was an inadvertent search of a thread. How to develop and deploy front-end code in a large company? See this article mentioned in the FIS, followed by the article began to learn to walk, a little excitement, but soon found more problems. Second, tryOriginally just think that there is a tool to identify the front-end resources, so that you can easily solve the browser static cache update problems. The description of FIS is also true, so start doing it. installationFIS is based on Nodejs development, so Nodejs must have. Load up. Then the NPM command is installed, NPM install-g fis. The results were jammed. Because it is the first contact, so in Baidu found a half-day also did not find a plan. Give... Found the official video tutorial, so took the time to read a few episodes, probably learned that the FIS tool is quite simple. and solved the front-end development of the problem: 1, Resource compression 2, MD5 stamp 3, resource consolidation seemingly more useful functions on these several. And my biggest concern is MD5 poke. MD5 StampThe so-called Md5 stamp is this: <script src= "/script/placeholder.js" ></script> after the stamp is like this: <script src= "/script/ Placeholder_88025f0.js "></script> of course the name of the file itself has changed: Script/placeholder_88025f0.js this solves two problems: 1, the URI referencing the static resource has changed, Then natural browser will take new resources, solve the problem of updating the cache 2, MD5 is through the file calculation, so only the file changes will produce a new URI, instead of changing, this solves the problem of incremental update, while taking into account the flow of the impact of course for my small project 2nd almost no use. Try installing againNow that you know the benefits, then continue to install it, open the FIS official website: http://fis.baidu.com, there is an introductory tutorial, this is after all, Baidu Team public help is still quite ok. And it is a Chinese drop, good and close feeling. The reason for this may be that the NPM website will be caused by the wall. Well, the official also has a plan to use the mirror:

NPM install some-npm-module-g--registry= domestic Mirror--disturl=https://npm.taobao.org/dist

The official website of these things are mentioned, not much to say. Go out and turn left to here: https://github.com/fex-team/fis/issues/65 this time, the installation is good, fis-v third, encounter problemsOnce you've installed it, start using it in the project and find yourself too young ... 1. ConfigurationDirect use of FIS RELEASE-MD. /output, okay. Start the build with the release. The result is finished, regardless of puppy all Js/css/imgs added MD5 stamp. This can be trouble, is not what you want, that is, directly through a tool to solve the problem of adding Md5 stamp is too ideal.   Then we have to study the official documentation to see how the configuration works. In FIS, this file is configured by Fis-conf.js. Official examples:

Set the minimum interval for picture merging Fis.config.set (' Settings.spriter.csssprites.margin ', 20); Remove the following comment to open the simple plugin, note the need to first plug-in installation npm install-g fis-postpackager-simple fis.config.set (' Modules.postpackager ', ' Simple ');          Uncomment the following to set the 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 following comments set the CSS packaging rules, CSS packaging will be merged with the picture '/pkg/aio.css ': ' **.css '}); Uncomment the following to turn on simple automatic merging of scattered resources fis.config.set (' Settings.postpackager.simple.autoCombine ', true);

Fis.config.merge ({Roadmap: {path: [            {//JS file in all widget directoriesreg: ' Widget/**.js ',//is a modular JS file (files marked with this value will be in AMD or closed package)Ismod:true,//default dependent lib.jsrequires: [' lib.js '],//Add some information to the output of the Map.json fileExtras: {say: ' 123 '},//post-compilation output to/static/widget/xxx directoryrelease: '/static$& '            },            {//All JS filesreg: ' **.js ',//Publish to the/static/js/xxx directoryrelease: '/static/js$& '            },            {//All ICO filesreg: ' **.ico ',//Publish the file with the MD5 stamp even if the--MD5 parameter is addedUsehash:false,//Publish to the/static/xxx directoryrelease: '/static$& '            },            {//. png,.gif file in all image directoriesreg:/^\/images\/(. *\. (?:p ng|gif)) /I,//The URL to access these images is '/m/xxxx?log_id=123 'URL: '/m/$1?log_id=123 ',//Publish to the/static/pic/xxx directoryrelease: '/static/pic/$1 '            },            {//. php files in all template directoriesreg:/^\/template\/(. *\.php)/I,//is a class HTML file that will be extensible for HTML language capabilitiesIshtmllike:true,//Publish as GBK encoded filecharset: ' GBK ',//Publish to the/php/template/xxx directoryrelease: '/php/template/$1 '            },            {//Other files not matched by the preceding rulereg:/.*/,//Compile the time not to produceRelease:false            }        ]    }});

What I'm using most now is roadmap, which I feel is a core setting. 2. Resource positioningThe so-called resource location is to locate the resource reference in the HTML/JS/CSS and replace the FIS Yi (generated) new resources. Well, it's pretty simple, like the example in the beginning of this article: <script src= "/script/placeholder.js" ></script> after stamping: <script src= "/script/ Placeholder_88025f0.js "></script>
So every release is automatically complete the resource update, a little cool. Just the problem ... The URI currently replaced by FIS is the absolute path. What's the meaning of this sentence? For example, a CSS code:. H_login-conimgbg{background:transparent url (' img/lgoin_image.png ') no-repeat; height:406px;}This image is referenced in Img/lgoin_image.png. But what after the FIS Yi:. H_login-conimgbg{background:transparent url ('/css/img/lgoin_image_369f159.png ') no-repeat; height:406px;}FIS directly replace the absolute path, which brings a problem, originally relative to the directory, replaced by the absolute directory has become the root directory. What's the problem? If you use a level two directory, problems can occur, such as when the system is deployed in the MyWeb directory under Tomcat WebApps, when accessed: Http://localhost:8080/myweb. Then the above CSS is http://localhost:8080/myweb/css/img/lgon_image.png when locating resources. But after the FIS compiled Yi will be like this: Http://localhost:8080/css/img/lgon_image_369f159.png. This will not be accessible. So I consulted this issue in the FIS discussion area and gave the following reply: now all are absolute paths, primarily considering the implementation of resource consolidation and CDN deployment capabilitiesThis can only be done in other ways, for example, roadmap can configure the URL of a resource to add domain when it was originally used for CDN deployment. But it can also solve the problem above. 3, do not want to process the fileMany third-party resources are used in the system, such as jquery, jQueryUI and so on, but these libraries we basically do not modify the code, there is no static resource compression, add MD5 problem. Of course, you do not want to process these files in the FIS, and FIS is the default processing of all Js/css/imgs. This also involves the configuration of the problem. Fis.config.merge ({roadmap: {path: [{//plugin] JS file reg:/^\/plugin\/(. *\.) (?: Js|c            SS))/I, Usehash:false, Usecompile:false, url: ' ${appserver}$& ', }]}); This is a configuration fragment I intercepted, to locate the specific directory by Reg

• Usehash:false, indicating that no MD5 stamp is added
• Usecompile:false, indicating that resources are not Yi processed

Well, with this configuration, the js/css under the plugin will not be processed. Iv. feeling of the stageIn fact, in the end I have given up, because the project will use Jenkins Hudson to do integration, there are many deployment problems, the time relationship is not willing to go further. The idea of using a tool to add a MD5 stamp or version number to the original was dashed. But the harvest is still there: 1, the front-end of the project can have so out of line of thinking, in fact, there is no special big progress, but it looks like a very diao. And the FIS feel is the initial stage, for the development of relatively more standardized projects is really an auxiliary tool to consider 2, what really makes me feel interesting is the front-end modular. This part is the advanced level of FIS, the real front-end project is actually this part. My experience in the front-end is too little, just preliminary level, so this part of the advanced content takes time to learn and practice 3, both the production front-end or the backend are programmers, are engineers.

Preliminary study on F.I.S (front-end engineering)