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