当前位置: 首页 > 工具软件 > fis-pure > 使用案例 >

【fis3学习】中大型项目构建发布实例

席乐童
2023-12-01

FIS3 , 为你定制的前端工程构建工具 解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。fis内置不少的功能和插件,比gulp.js体积更大功能也更丰富,主打前端构建开发的和发布等流程一体化处理。

最早接触fis是在14年,那时还是fis,功能和新能还有比较多的问题,但是和fis3的改动不大。fis扩展有不少独立的运行版本如yog的php项目版面,pure的纯前端版本等。

本文针对中大型cms项目(项目文件超过1.2G,静态资源类大小800MB)进行测试fis3的相关能力,结果如下:fis3配置简单功能强大,单作为构建项目耗时比较久,debug能力有限,release 开始花费1分钟(59678ms),编译花费六分钟(303.50s),觉gulp.js还是有点差距的,见上一篇文章结果

二、配置文件解析
这里没有做文件指纹,因为fis3在无法处理html中出现的绝对路径和编译文件的对应问题。github上有对源文件就是绝对路径处理没有多少说明的地方。所以处理不是特别的方便。

'use strict';

fis.set('project.ignore', ['node_modules/**','.*','*.json','fis-conf.js','*.md']);

fis.match('*', {//默认不添加hash
        useHash:false
    })
    .match("src/**",{
        useHash:false,
        release:true
    })
    .match('::package',{
      spriter: fis.plugin('csssprites'),
      postpackager: fis.plugin('loader')
    })
    .match("static/admin/**", {
        useHash:false,
        release:true
    })
    .match('static/js/**.js', {
        useHash:false,
        optimizer: fis.plugin('uglify-js'),
        release:'$0',
        domain:"//js.360shouji.com",
        url:'/static/js/$0'
    })
    //css
    .match('www/static/{css,font}/**.{css,less}',{
        useHash:false,
        useSprite: true,
        optimizer: fis.plugin('clean-css'),
        release:'$0',
        domain:"//css.360shouji.com",
        url:'/static/css/$0'
    })
    //文件中的域名引用其实没有替换
    .match('view/**/*.html',{
        isHtmlLike:true,
        //optimizer:fis.plugin('htmlmin'),
        release:"$0"
    })
    //加载前缀域名
    .match('static/{upload,img,video}/**.{png,jpg,gif,jpeg,mp4,webm,ogv}',{
        useHash:false,
        domain:'//res.360shouji.com',
        release:'$0',
        url:'/static/$0'
    })
    //发布到本地
    .match('*', {
        deploy: fis.plugin('local-deliver', {
            to: '/output2'
        })
    })

查看 上一篇文章 gulp.js构建发布性能:

gulp.js 花费的时间如下,总共花费 36s 编译完成,copy 800多MB文件花费2分47秒

[18:29:51] Starting 'copy'...
[18:29:51] Starting 'img'...
[18:29:51] Starting 'video'...
[18:29:51] Starting 'js'...
[18:29:51] Starting 'css'...
[18:29:51] Finished 'default' after 23 ms
[18:30:12] Finished 'video' after 20 s
[18:30:12] Finished 'css' after 20 s
[18:30:12] Finished 'js' after 20 s
[18:30:23] Finished 'img' after 32 s
[18:30:23] Starting 'html'...
[18:30:26] Finished 'html' after 3.4 s
[18:30:26] Starting 'col-css'...
[18:30:27] Finished 'col-css' after 1.05 s
[18:32:38] Finished 'copy' after 2.77 min
 类似资料: