FIS

學習官網

http://fis.baidu.com/docs/beginning/getting-started.html

 

1. fis release: 編譯併發布

    fis release -m: md5加密

    fis release -o : 內容壓縮

    fis release -p : 文件打包合併

    

    可連寫：fis release -mop

 

2.fis release -w 文件監聽

 

 

3.fis-conf.js:

 

 1 // 設置圖片合併的最小間隔
 2 fis.config.set('settings.spriter.csssprites.margin', 20);
 3 // 取消下面的註釋開啓simple插件，注意須要先進行插件安裝 npm install -g fis-postpackager-simple
 4 fis.config.set('modules.postpackager', 'simple');
 5 // 取消下面的註釋設置打包規則
 6 fis.config.set('pack', {
 7     '/pkg/lib.js': [
 8         'js/lib/jquery.js',
 9         'js/lib/underscore.js',
10         'js/lib/backbone.js',
11         'js/lib/backbone.localStorage.js',
12     ],
13     // 取消下面的註釋設置CSS打包規則，CSS打包的同時會進行圖片合併
14     '/pkg/aio.css': '**.css'
15 });
16 // 取消下面的註釋能夠開啓simple對零散資源的自動合併
17 // fis.config.set('settings.postpackager.simple.autoCombine', true);

 

 

3.MD5壓縮合併發布到src同級本地目錄

    fis release -mop -d ../output

 

4.seajs 壓縮config處理(這是我本身寫的，想config文件裏的別名追加時間戳，但願能有更好的辦法)

 

 

 

 

 

-------------------------------------升級至fis3--------------------------------------------

 

 

/****************************************************************************************
 * 1.壓縮js
 */
var jsFiles = '{/script/*,/script/*/*,/library/*,/library/*/*,/dist/template}.js';
fis.match(jsFiles, {
    // fis-optimizer-uglify-js 插件進行壓縮，已內置
    optimizer: fis.plugin('uglify-js')
});

/****************************************************************************************
 * 2.壓縮css
 */
fis.match('*.css', {
    // fis-optimizer-clean-css 插件進行壓縮，已內置
    optimizer: fis.plugin('clean-css')
});
/****************************************************************************************
 * 3.合併資源
 */
var commonJs = '/script/common/*.js';
var bundleJs = '{/library/*/*,/script/service/*,/dist/template}.js';

//合併css
fis.match('/dist/style.css', {
    packTo: '/dist/style.css'
});
fis.match('/script/library/swiper/swiper-3.3.1.min.css',{
  packTo:'/dist/swiper.css'
})

//合併js
fis.match(commonJs, {
    packTo: '/dist/common.js'
});
fis.match(bundleJs, {
    packTo: '/dist/bundle.js'
});

/****************************************************************************************
 * 4.對合並CSS進行圖片合併
 */
fis.match('::package', {// 啓用 fis-spriter-csssprites 插件
    spriter: fis.plugin('csssprites')
})

fis.config.set('settings.spriter.csssprites', {
    //圖之間的邊距
    margin: 2,
    //使用矩陣排列方式，默認爲線性`linear`
    layout: 'matrix'
});

fis.match('/dist/style.css', {
    // 給匹配到的文件分配屬性 `useSprite`
    useSprite: true
});

fis.match('::packager', {
    postpackager: fis.plugin('loader')
});

/****************************************************************************************
 * 5.合併資源加時間戳
 */

fis.match('/dist/*.css', {// css加md5
    useHash: true
});
fis.match('/dist/*.js', {// js加md5
    useHash: true
});
fis.match('*.png', {// png加md5
    useHash: true
});
fis.match('*.jpg', {// png加md5
    useHash: true
});


/****************************************************************************************
 * 6.忽略打包無用文件
 */
fis.set('project.ignore', [
  'page/**',
  'tpl/**',
  'script/**',
  'style/**',
  '/*.js',
  '/*.json',
  '/*.txt',
  'node_modules/**',
  '.git/**',
  '.svn/**'
]);

另：

　　忽略頁面js，防止沉底-->script後加(不能有空格)

<!--ignore-->