【笔记】fis3配置笔记

// 构建
// fis 中的文件路径都是以 / 开头的，所以编写规则时，请尽量严格的以 / 开头。
// 当设置规则时，没有严格的以 / 开头，比如 'a.js', 它匹配的是所有目录下面的 a.js, 包括：/a.js、/a/a.js、/a/b/a.js。如果要严格只命中根目录下面的 /a.js, 请使用 fis.match('/a.js')。
// '*' 匹配0或多个除了 '/' 以外的字符; '/foo/*.js',只会命中 /foo 目录下面的所有js文件。
// '**' 匹配多个字符包括 '/' ; '/foo/**/*.js' 是命中 /foo 目录下面所有子目录的 js 文件，不包含当前目录下面的 js 文件。 如果需要命中 foo 目录下面以及所有其子目录下面的 js 文件，请使用 /foo/**.js。
// '{}' 可以让多个规则用 ',' 逗号分隔，起到或者的作用。
// '/a/(**.js)'; $1 代表 (**.js) 匹配的内容; // $0 代表 /a/(**.js) 匹配的内容
// release 设置文件的产出路径。默认是文件相对项目根目录的路径，以 / 开头。该值可以设置为 false ，表示为不产出（unreleasable）文件。
// useHash 文件分配到此属性后，其 url 及其产出带 md5 戳；监听到内容有变化就会自动更新这个戳。本地开发的时候没必要开启
// query 指定文件的资源定位路径之后的query，比如'?t=123124132'，有引用了这些文件的路径都会加了这个参数上去,但是只是用了编译那一刻的值，不会监听文件的变化继续更新的。
// domain 给文件 URL 设置 domain 信息
// rExt 设置最终文件产出后的后缀
// parser 启用 parser 插件对文件进行处理
// preprocessor 标准化前处理；如添加css的兼容前缀
// postprocessor 标准化后处理
// optimizer 启用优化处理插件，并配置其属性；比如对折行或者空格做压缩，用这个属性的就是内置的插件
// packTo 分配到这个属性的文件将会合并到这个属性配置的文件中
// url 指定文件的资源定位路径，以 / 开头。默认是 release 的值，url可以与发布路径 release 不一致。貌似就只是把引用的路径换了一下，那在release写的还有什么意义呢？
// useMap 文件信息是否添加到 map.json；分配到此属性的资源出现在静态资源表中，现在对 js、css 等文件默认加入了静态资源表中；还不知道有什么用
// isMod 标示文件是否为组件化文件。被标记成组件化的文件会入map.json表。并且会对js文件进行组件化包装。还不知道有什么用
// media 接口提供多种状态功能，dev 已经被占用，默认情况下不加 <media> 参数时默认为 dev

// 调试
// 前面构建完成之后的url都是绝对路径的，所以直接打开output文件的html是不能正常访问资源的，fis内置了个Web Server可以把文件发布到该目录下就能访问到构建完之后的资源了
// 打开Web Server根目录：fis3 server open；启动Web Server：fis3 server start；可以通过fis3 server -h 查看更多帮助
// fis3 release -d ../output 是构建并发布到output文件夹。如果不写-d 参数则是构建发布到内置 Web Server的根目录下；
// 当某文件包含字符 __RESOURCE_MAP__ 时，最终静态资源表（资源之间的依赖、合并信息）会替换这个字符。可以建一个map.json文件在里面加入这句话

fis.match('::package', {//打包阶段插件设置时必须分配给所有文件，设置时必须 match ::package，不然不做处理。
    packager: fis.plugin('map',{//启用 fis3-packager-map插件。
        useTrack : true,// 是否输出路径信息,默认为 true
        useSourceMap : false, // 合并后开启 SourceMap 功能,默认为 false。还不知道有什么用
    }),
    // spriter: fis.plugin('csssprites'),// 启用 fis-spriter-csssprites 插件,实践过nodejs的6.x、8.x、10.x版本都不支持
    postpackager: fis.plugin('loader'),//启用 fis3-postpackager-loader插件；静态资源前端加载器，用来分析页面中使用的和依赖的资源（js或css）, 并将这些资源做一定的优化后插入页面中。如把零散的文件合并,所以是需要下面有做了packTo合并才会起到作用。
});

fis.match('*.less', {
    parser: fis.plugin('less'), //启用fis-parser-less插件;把less格式转成浏览器能理解的css格式
    rExt: '.css',
});
fis.match('*.{less,css}', {
    preprocessor: fis.plugin('autoprefixer', {//启用 fis3-preprocessor-autoprefixer插件，给css加前缀实现多浏览器的兼容
                        "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
                        "cascade": true
                    }),
    optimizer: fis.plugin('clean-css'),//对折行或者空格做压缩
    packTo: '/packCss/all.css',//会导致本来只引用其中一个文件，最终引用了打包后的整个文件，也不一定是好事
    // useSprite: true,//实践过nodejs的6.x、8.x、10.x版本都不支持
});

// fis.set('new date', Date.now());
fis.match('*.{jpg,jpeg,png,svg,gif,js,css,less}', {
    release: '/static/$0' ,
    // url:'/static/test$0',
    // useMap: true,
    // query: '?t=' + fis.get('new date'),
    // domain: ".",
});

//转换为png8格式，文件大小会减少很多，但是会有一定程度的颜色、alpha丢失,不用时就注释掉。
fis.match('*.png', {
    optimizer: fis.plugin('png-compressor', { type: "pngquant" })// 启用 fis-optimizer-png-compressor 插件进行压缩
  });

// 分配到这个属性的文件将会合并到这个属性配置的文件中
// fis.match('/js/*.js', {
fis.match(/\/js\/\w+.js/, {
    parser: fis.plugin('babel-5.x'),//启用 fis-parser-babel-5.x， es6、es7 或者 jsx 编译成 es5，多余的空格会去掉等，也可以理解为严格模式
    packTo: '/packJs/all.js',//打包合并到all.js里面。会导致本来只引用其中一个文件，最终引用了打包后的整个文件，也不一定是好事
    // optimizer: fis.plugin('uglify-js'),//对折行或者空格做压缩,注释符号后面的东西清除掉，false改成0之类的。发现一个问题，就是如果里面有es6语法的js就会导致压缩等功能失效，可以通过去掉前面的es6转义来验证
    // isMod:true,
    // postprocessor: fis.plugin('require-async'),//启用 fis-postprocessor-require-async插件
    postprocessor: _postprocessorLocalAreaTrue,
})
function _postprocessorLocalAreaTrue(content, file, settings) {
    return content.replace(/is_local_area\s*=\s*false/g,"is_local_area = true").replace(/is_test_area\s*=\s*false/g,"is_test_area = true");
}

fis.media('cdn').match('*.{png,js,css,less}', {//通过fis3 release cdn -d ../output 能设置当前情况的额外语句
    useHash: true,//本地开发的时候没必要开启
    domain: "https://assets-cdn.xiangrikui.com/frontend-m/bxr_events/2016/app_invited",
});

//排除某些文件，默认值：['node_modules/**', 'output/**', 'fis-conf.js']，这里的set是覆盖默认的，不是追加，。注：module文件夹不能禁掉
fis.set('project.ignore', [
    'gulpfile.js',
    '.git/**',
    '*.bat',
    '*.sh',
    '现有的fis.js',
    'fis-conf.js',,
    'package.json',
    'package-lock.json'
  ]);