fis3前端工程構建工具使用小結

使用百度前端工程構建工具FIS3經驗整理
工具集介紹地址：http://fis.baidu.com/fis3/index.html

1.安裝fis3環境
  1.1 安裝nodejs環境
  1.2 安裝fis3使用命令 npm install -g fis3
  1.3 檢測fis3是否安裝成功 fis3 -v

2.在項目根目錄下新建配置文件fis-conf.js

3.在需要記錄文件映射的地方新建map.json(可選)
  map.json文件內容爲 __RESOURCE_MAP__

4.在fis-config.js所在目錄執行 fis3 release -d 目錄
  生成的版本文件就在目錄下了


/*=======================*fis-conf.js文件解析*=======================*/

//*代表目錄下一級內容
//**代表目錄下任意深度內容

//將所有的js文件壓縮
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進行壓縮，已內置
    optimizer: fis.plugin('uglify-js')
});

//將所有的css文件壓縮
fis.match('*.css', {
    useSprite: true,
// fis-optimizer-clean-css 插件進行壓縮，已內置
    optimizer: fis.plugin('clean-css')
});

////將所有png文件壓縮
//fis.match('*.png', {
//  // fis-optimizer-png-compressor 插件進行壓縮，已內置
//  optimizer: fis.plugin('png-compressor')
//});

//選中文件適用文件指紋
fis.match('*.{js,css,png,jpg}', {
    useHash: true
});

//選中文件不適用文件指紋
fis.match('jquery.min.js', {
    useHash: false
});


//將選中的文件加入到靜態映射表中
fis.match('*.{png,jpg}',{
    useMap: false
});


//選中文件標記爲模塊化文件，會自動添加或完成define
fis.match('/*.js', {
    isMod: true
});

//選中文件標記爲不適用模塊化功能
fis.match('sea.js', {
    isMod: false
});

//seajs使用命令，模塊化必須指令
fis.hook('cmd', {
  baseUrl: '',//標示模塊打包的基礎路徑
});

//忽略選中文件，標記爲不被編譯內容，防止文件中出現body或html字符導致不可預料的錯誤
fis.match('*.php',{
    isHtmlLike : false,//讓文件不會像處理html文件一樣
    isJsLicke : false,//讓文件不會像處理js文件一樣
    isCssLicke : false//讓文件不會像處理png文件一樣
});




//外聯樣式佔位符<!--RESOURCEMAP_PLACEHOLDER--> pkg配置表佔位符 暫時不用這個
//內聯樣式佔位符<!--SCRIPT_PLACEHOLDER--> 必須

fis.match('::packager', {
    postpackager: function(ret,b,c,d){

        var _src = ret.src;
        for (var i in _src) {

        }

    }
});

fis.match('::packager', {
    postpackager: fis.plugin('loader', {
        useInlineMap: true,//使用內聯模塊靜態表
//    allInOne: {
//      includeAsyncs: true,
////      ignore: ['/static/sea.js']
//    }
    },'prepend')
});

fis.match('*.php', {
    preprocessor: function (content, file, settings) {
      //content 文件內容
          return content;
    }
});



// fis.match('::packager', {
//   spriter: fis.plugin('csssprites')
// });


//全局或本地安裝插件
//npm install [-g] fis3-hook-relative
//fis-conf.js
//啓用插件
//fis.hook('relative');
//讓所有文件，都使用相對路徑。
//fis.match('**', { relative: true })


/*
 *
//加載seajs內容加載器，很重要，如果沒有可能模塊化代碼不被轉換
fis.match('::packager', {
    postpackager: fis.plugin('loader', {
//    allInOne: {
//      includeAsyncs: true,
////      ignore: ['sea.js']
//    }
    })
});*/


//另外一種加載器寫法
//fis.match('::packager', {
//  postpackager: fis.plugin('loader')
//});

//將選中的文件壓縮到一個文件中，seajs模塊化不支持此功能
// fis.match('*.js', {
  // packTo: 'js_pkg2.js'
// });