fis3前端工程构建配置 ..............正在学习记录

1.安装fis3环境
  1.1 安装nodejs环境
  1.2 安装fis3使用命令 npm install -g fis3
  1.3 检测fis3是否安装成功 fis3 -v

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

3.在fis-config.js所在目录执行 fis3 release -d <path> 生成的版本文件就在目录下了；  <path>任意目录

4.运行: fis3 server start
  4.1 默认端口 8080
  4.2 设置新的端口 fis server start -p 8081

5.停止: fis3 server stop

fis-config.js

// 配置配置文件
//让所有的静态资源构建后到 static 目录
fis.match('*.{png,js,css}', {
    release: '/static/$0'
});

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

// //压缩文件
// fis.match('*.js', {
//     // fis-optimizer-uglify-js 插件进行压缩，已内置
//     optimizer: fis.plugin('uglify-js')
// });

// // fis.match('*.css', {
// //     // fis-optimizer-clean-css 插件进行压缩，已内置
// //     optimizer: fis.plugin('clean-css')
// // });

// fis.match('*.png', {
//     // fis-optimizer-png-compressor 插件进行压缩，已内置
//     optimizer: fis.plugin('png-compressor')
// });


// 启用 fis-spriter-csssprites 插件 需自己用 npm install -g fis-spriter-csssprites 安装配置
fis.match('::package', {
    spriter: fis.plugin('csssprites')
})

// 对 CSS 进行图片合并
fis.match('*.css', {
    // 给匹配到的文件分配属性 `useSprite`
    useSprite: true
})

// 合并页面内的多个js, css
fis.match('::package', {
    postpackager: fis.plugin('loader', {
        allInOne: true
    })
});

fis3-postpackager-loader:

此插件会收集所有的资源，如果希望某个资源不被收集，请在资源结尾处如 </script> 后面加上 <!--ignore--> 注释.

<script src="lib.js"></script><!--ignore-->

注意：被 ignore 的资源，不会被修改位置，同时也不会参与 allInOne 合并。