FIS3 构建工程化

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 构建工程化