fis3前端工程构建工具使用小结

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