FIS常用功能之资源合并

这节讲资源合并,实战目录如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fis test</title>
    <script src="/js/a.js"></script>
    <script src="/js/b.js"></script>
    <script src="/js/other1.js"></script>
    <script src="/js/other2.js"></script>
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/home.css">
</head>
<body>
    <h1>Hello FIS</h1>
</body>
</html>

1.纯合并

创建文件 fis-config.js ,内容:

fis.config.set('pack', {
    //设置js打包规则
    '/pkg/lib.js': [
        'js/a.js',
        'js/b.js'
    ],
    //设置CSS打包规则
    '/pkg/aio.css': '**.css'
});

运行:

fis release -pd ./

然后就会出现一个新的文件夹pkg,包含合并后的文件lib.js和aio.css

 

 

 

2.:合并并替换原资源

需要利用:fis-postpackager-simple插件

首先安装

npm install -g fis-postpackager-simple

修改fis-config.js 

//开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
fis.config.set('modules.postpackager', 'simple');

//设置合并打包规则
fis.config.set('pack', {
    '/pkg/lib.js': [
        'js/a.js',
        'js/b.js'
    ],
    '/pkg/aio.css': '**.css'
});

打包合并:

fis release --pack

合并前后页面引用情况

 

 

 

3.:对零散资源打包

在fis-conf.js加入

//将零散资源进行自动打包
 fis.config.set('settings.postpackager.simple.autoCombine', true);

再次运行FIS构建项目

fis release -omp

 

posted @ 2015-11-13 22:49  tinyphp  Views(551)  Comments(0)    收藏  举报