fis3前端工程构建配置入门教程

// 过滤文件，只有数组中的目录才会被fis3编译
fis.set('project.files', ['bootstrap/**', 'commonLess/**', 'components/**', 'modules/**', 'pages/**', 'partials/**']);

//启用relative插件,所有文件使用相对路径
fis.hook('relative')
.match('**', {
relative: true
});

// commonJS规范
fis.hook('commonjs');

//将pages下所有html按原文件名发布至根目录
fis.match('/pages/**/(*.html)', {
release: '/$1',
isMod: true,
});

//为js文件启用模块化
fis.match('{modules,pages,partials,components}/(**.js)', {
isMod: true
});

//less转义css,并添加浏览器前缀
fis.match('**/*.less', {
rExt: '.css',
parser: fis.plugin('less-2.x', {

})
}).match('*.{css,less,scss}', {
preprocessor: fis.plugin('autoprefixer', {
"browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
"cascade": true
})
});

//使用postcss，并使用pxtoviewport插件
var pxtoviewport = require('postcss-px-to-viewport');
fis.match('*.{css,less,scss}', {
postprocessor: fis.plugin('postcss', {
processConfig: {},
plugins: [pxtoviewport],
sourceMap: true,
sourceMapRelative: false
})
});

fis.match('::packager', {
postpackager: fis.plugin('loader', {
resourceType: 'mod',
useInlineMap: true // 资源映射表内嵌
})
});

//生产环境配置，相比测试环境，多了代码合并压缩，添加时间戳等操作。
fis.media('prod').match("**.js", {
//压缩js
optimizer: fis.plugin('uglify-js')
}).match('**.{css,less}', {
//压缩css
optimizer: fis.plugin('clean-css')
}).match('::package', {
postpackager: fis.plugin('loader', {
//单页面合并零散资源
allInOne: true
})
}).match('*.{js,css}', {
//为js，css类型文件添加md5戳
useHash: true
})
.match('::image', {
//为所有的图片类型添加md5戳
useHash: true
});

在代码最下方有一段属于生产环境的配置，只有在生产环境下我们才需要代码合并，压缩，添加md5戳，不然合并压缩了我们也不好调试功能。

这两段配置是可以通过发布指令区分发布的，比如我在测试环境发布，指令应该是这样：

fis3 release -d D:\output

如果你要在生产环境发布，请在release后添加meaid中的字段prod(这个字段是随便写的)，比如：

fis3 release prod -d D:\output

说直白点，我们前面的配置都是fis.match()，后面有一段配置是fis.media('随便取名').match()这样写的。

在发布时，如果你在发布指令release后加了media自定义的字段，整个配置都会执行，但如果你不加media字段，那么就只执行fis.match()相关配置，这样我们就能在不同环境区分发布了。

那么针对于fis3就聊这么多了，琢磨着用这玩意的人真不多，估计也没多少人愿意看，那么本文结束。