Fis-plus Study Notes

Learn some fls-plus front-end integration of things, learning very fur, many are on the official website of the interpretation of hope to share with you, and can get everyone's correction.

Reference Document: http://oak.baidu.com/fis-plus/document.html;

Http://fex.baidu.com/fis-site/docs/beginning/getting-started.html

First explain what Fis-plus is--Fis-plus is based on FIS(fis Front-end Integrated Solution（前端集成解决方案） is designed to address automation tools in front-end development, performance optimization, modular framework, development specifications, code deployment, Development process and other issues of the front-end engineering building tools. ), applied to the backend is PHP, the template is Smarty scene. It is now used by most Baidu products.

　　STEP1: Why use FIS??

• front-End framework : Provides support for component loading and management framework, and provides front-end base libraries and component libraries.
• Template Framework : Provide the component development mode support, with the front end framework to collect the minimum static resource requirements of the page, leaving sufficient performance optimization space, performance optimization for the engineer transparent.
• Automation Tools : Provides basic optimization capabilities, and provides support for front-end frameworks and template frameworks.
• Auxiliary Development Tools : Improve the engineer's development experience, reduce commissioning, deployment costs.

STEP2: Installation Environment : Specific steps refer to official website http://oak.baidu.com/fis-plus/document.html; One thing to note is the version of node, install fis-sass-plugin/ Fisp-sass-plugin plug-in requires a lower version of node, it is recommended to use NVM as node's version management tool;

STEP3: Sub-module development;

--to release iterations for convenience, split into different subsystems.

--The structure of the module: dependent on the same name (page name and Css,js name are the same)

  module name ├──fis-conf.js Automation related commands, similar to Gulp,grunt; specify 
      
        namespace   
      ├──page page template ├──server.conf it can be configured URL forwarding, you can easily simulate  Ajax  requests locally, and so on ├──static put some common libraries that do not need to be ├──test and  page  under the corresponding template, indicating which template with which number According to the file rendering └──widget components, template components, JS components, CSS components, will be component 
 
 STEP4: Static resource ID (change of Load path for CSS,JS, etc.) 
  --when to use: A:      widgets ,  require ,  HTML , and more  Smarty  the ID of the resource must be specified when the plug-in; B:  require ,  Require.async , and other  JavaScript  functions, you can use the ID  

 - -Definition mode:      namespace:< The path of the resource relative to the module root directory >; such as     
     

 
 
 S  Tep5:page page writing process; 
--Introduce js,css <%    --page >require name= "home:widget/a.css" %     > 　　　　
//home: module name, 
//widget: The path to the module directory 
//page. CSS: Depending on the principle of the same name, according to the page folder under the file name, the corresponding CSS and JS; 
 --Introducing a component widget:    {%widget name="home:widget/header/header.tpl"%}
　　　　——引入组件中的css,js不需要使用{%require%}或link,href;根据同名依赖会自动加载文件名相同的css，js如header.css/header.js：

　　Step6:资源压缩（fis release --optimize/fis release -o）

STEP7: Add File Version (FIS release--optimize--md5 # fis Release-om FIS can automatically generate file versions based on the content of static resources, automatically update resource reference paths, resolve cache update issues, and bid farewell to manual update timestamps. ）
 　  
STEP8: Resource Consolidation (FIS Release-omp through Pack for resource file merging, configured in Fis-config.js)
?
--image merging, display each small graph through background-position, detail use document;
 　　 

STEP9: Installing plug-ins; npm install-g fis-parser-less;
--Configure in Fis-config.js
 　　　 
 　　 

STEP10:Common Commands
--fisp Install: Some public components, jquery,echarts, as well as the official website to provide demo;
--FISP release [options]:
-R [Module name]//deployment module;
--WATCH/-W//module change monitoring;
--live/-l//through the Livereload plug-in, after compiling automatic refresh (occasionally page loading will be stuck on this livereload);
--DEST/-D//Specifies the deployment location, either a local or remote path;
--The Deploy node configuration of the configuration file is published, and the code can be uploaded to the remote
 　　　　　　　　 

--MD5/-M//At the time of compiling the file can be automatically md5 stamp, and then say goodbye to the static resource URL after the write. (*md stamp, is for modified to facilitate the optimization of the release process);
--LINK/-L//automatic code monitoring;
--PACK/-P//packaging according to the fis-config.js configuration;
--optimize/-o//compression of the js,css,html;
--domains/-d//Adding domain domain name for resources;

--fisp server [options]: Invoke debug server; Java-dependent JRE and PHP php-cgi environment;
--open//Open the published file;
--start//Call server, via 8080 port;
--stop//Shut down the server;


Here, basically even the introduction of FIS, thank you for reading and correcting, next. Share some small details;

One, configuration:
Module Name:fis.config.set(‘namespace‘, ‘common‘);
　　 编码格式：fis.config.set(‘project.charset‘, ‘gbk‘);//默认是utf-8;
　　 md5戳长度：fis.config.set(‘project.md5Length‘, 8);//默认是7为数；
　　 smarty定界符：fis.config.set(‘settings.smarty‘, {‘left_delimiter‘ : ‘<{‘,‘right_delimiter‘ : ‘}>‘})；


 学习总结：
　　
　　一：明确fisp能做什么事情；
　　二：精通fisp的命令，fisp install ;fisp release [options](最重要);fisp server [options];
　　三：fisp的目录结构；以及生成目录结构；
　　四：遇到配置问题，打包问题，发布问题，及时参考文档！

Thank you!

?

Fis-plus Study Notes