FIS3 構建工程化

時間 2019-12-09

標籤 fis3 fis 構建工程简体版

原文原文鏈接

一、安裝javascript

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

二、fis-conf.js配置文件（可根據須要配置）css

經常使用插件地址：http://fis.baidu.com/fis3/docs/common-plugin.htmlhtml

// 啓用 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 });

三、示例文件java

<!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>

注意：共用文件引入的方式：jquery

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


四、構建

fis3 release -d ./dist

五、構建輸出npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

FIS3 構建 工程化

FIS3 構建工程化