如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

继续fis3前端构建的学习旅程,苏南大叔在本文中继续实践的参数是media参数。这个参数不知道是哪位大神命名的。在传统的node程序里面,这个名字明显应该是env嘛,这里叫做media,苏南大神觉得还是蛮有歧义的了。

本着先学习学习这分环境构建的中心思想的目的,所以这里,就暂时接受使用官方提供的media这个名字好了。

media的作用

fis3官方的描述上看,苏南大叔觉得这个media就是就是用于区分环境变量使用的。不同的env/media环境下,使用不同的配置。比如:发布出去的.js文件,都必须要经过uglify-js混淆加密处理。这种场景,都是很常见的应用场景,对吧?

那么苏南大叔继续配置fis-config.js这个配置文件。新增配置如下:

fis.media('dev').match('*.js', {
  useHash: true
});

fis.media('test').match('*.js', {
  useHash: false,
  optimizer: fis.plugin('uglify-js')
});

fis.media('prod').match('*.js', {
  useHash: true,
  optimizer: fis.plugin('uglify-js')
});

这里定义了三个media

  • testprod都对.js文件都使用了uglifyjs进行处理,区别在于,是否使用hash重命名。
  • dev模式下,就仅仅重命名,不uglifyjs

那么我们看一下效果。

另外,注意:为了看到uglifyjs的效果,请把默认的app.js里面的内容,换成稍稍复杂的js代码。默认的app.js看不出来效果。

命令行及效果展示

相关命令如下:

fis3 release <media> -d <path>
fis3 release -d ../dist
fis3 release aaa -d ../dist_aaa
fis3 release test -d ../dist_test
fis3 release prod -d ../dist_prod
  • media使用了aaa这个未定义环境的时候,提示如下:
[WARNI] You don't have any configurations under the media aaa, are you sure?

fis3配置之分环境(media)构建 - media1

  • media位置没有传递任何值的时候,默认使用的值是dev

推荐的debug配置

fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})

对于debug模式,推荐的设置就是:啥都不做,所以关闭了所有目前提及的各种设置...

小结

本文中,苏南大叔利用fis3media参数,在不同的构建环境下,执行了不同的fis3动作。这个参数,还是可以继续配置其它的fis3项目的。相关的使用场景,请参见苏南大叔的后续文章。

读者朋友,您可以点击下面的链接,查看更多苏南大叔带来的经常经验文章内容:

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。