FIS3 构建 工程化

时间:2023-02-12 08:56:48

1、安装

npm install -g fis3 //插件
npm install -g fis3-hook-relative npm install -g fis3-preprocessor-autoprefixer

 

2、fis-conf.js配置文件(可根据需要配置)

常用插件地址:http://fis.baidu.com/fis3/docs/common-plugin.html

// 启用 fis-spriter-csssprites 插件
fis.match('::package', { spriter: fis.plugin('csssprites') }) //雪碧图和压缩
fis.match('*.css', { useSprite: true
// optimizer: fis.plugin('clean-css')
}); // fis-optimizer-uglify-js 插件进行压缩,已内置
fis.match('*.js', { // optimizer: fis.plugin('uglify-js')
}); // fis-optimizer-png-compressor 插件进行压缩,已内置
fis.match('*.png', { optimizer: fis.plugin('png-compressor') }); //补全前缀
fis.match('*.css', { preprocessor: fis.plugin('autoprefixer', { "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"], "cascade": true }) }) //启用插件 
fis.hook('relative'); //让所有文件,都使用相对路径。 
fis.match('**', { relative: true });

 

3、示例文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>移动端网站</title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="utf-8"> mui.init(); </script>
        <style type="text/css">
            
        </style>
    </head>

    <body>
        <link rel="import" href="common/header.html?__inline">
        <div class=""> 主页 </div>
        
        <!--jquery-->
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <!--移动端适配-->
        <script src="js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //业务逻辑
 $(document).ready(function() { }); </script>
    </body>

</html>

 

注意:共用文件引入的方式:

<link rel="import" href="common/header.html?__inline">


4、构建
fis3 release -d ./dist

 

5、构建输出

FIS3 构建 工程化

 

FIS3 构建 工程化