乐鱼app成为大巴黎赞助商

凝望经典赏别样人生 创新表达树文化自信——河池市乐鱼app成为大巴黎赞助商高一年级举行课本剧展演活动             守护青春,护航成长 ——宜州区一中举行法制教育报告会             以赛促教展师风 凝心聚力踏征程 ——乐鱼app成为大巴黎赞助商开展教师教学技能大赛             辩以明思,坐而论道 ——记宜州区一中2024届高二辩论赛             巧借他山石,精雕“三新”玉 ——乐鱼app成为大巴黎赞助商教师赴湖南考察学习交流活动             2023年春季学期“世界地球日”知识讲座成功举办             乐鱼app成为大巴黎赞助商开展防溺水教育活动 全力筑牢生命安全防线             法治教育进校园 护航青春助成长             乐鱼app成为大巴黎赞助商举行辩论赛基础知识讲座暨班级小组辩论展示活动             弃旧“兔”新新学期,携手新年再出发 ——河池市乐鱼app成为大巴黎赞助商召开新学期班主任工作会议            

DoraCMS

您现在的位置是:首页>文档内容页

文档详情

乐鱼app成为大巴黎赞助商:FIS3 , 为你定制的前端工程构建工具

doramart 2023-05-28 02:22:55 技术文档228422
最近看了一下fis的相关文档,发现它对于前端开发带来很大的便利,借用官方说法:解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

    最近看了一下fis的相关文档,发现它对于前端开发带来很大的便利,根据文档的相关操作,我尝试着跟着做了下,非常方便。

    fis到底是做什么用的呢,目前我所知道的很便捷的一点,就是静态文件的压缩和文件指纹,自动化的操作只通过一句命令行就可以实现文件的压缩、打包、指纹等操作,非常方便,下面简单介绍一下使用方式。由于最新版本是fis3,所以以fis3为例。


FIS3 是什么

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。以Nodejs为底层编写。所以需要通过npm进行全局安装(当然前提是需要安装nodejs和npm,参考https://nodejs.org 这里不多说)


1、安装fis

npm install -g fis3

-g 安装到全局目录,必须使用全局安装,当全局安装后才能在命令行(cmd或者终端)找到 fis3 命令。


安装完成后执行 fis3 -v 判断是否安装成功,安装成功命令行会出现以下提示:

$ fis3 -v

 [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)

  v3.0.0

   /\\\\\\\\\\\\\\\  /\\\\\\\\\\\     /\\\\\\\\\\\
   \/\\\///////////  \/////\\\///    /\\\/////////\\\
    \/\\\                 \/\\\      \//\\\      \///
     \/\\\\\\\\\\\         \/\\\       \////\\\
      \/\\\///////          \/\\\          \////\\\
       \/\\\                 \/\\\             \////\\\
        \/\\\                 \/\\\      /\\\      \//\\\
         \/\\\              /\\\\\\\\\\\ \///\\\\\\\\\\\/
          \///              \///////////    \///////////


2、在你的静态文件根目录下添加文件 fis-config.js

fis.match('*.js', { // 所有js文件静态压缩
  useHash: false
});

fis.match('*.css', { //  所有样式文件静态压缩
  useHash: false
});

fis.match('*.png', { //  所有png图片压缩
  useHash: false
});


3、在当前根目录打开命令行,输入指令:

fis3 release -d ../output

这里的output 是压缩后输出目录,这里要注意的是,压缩操作不会改变你本来的文件,会根据你所指定的目录输出。执行完毕后等待几秒钟,查看输出结构。


当然,上面介绍的是最简单的文件压缩,你可以根据自己的需要添加文件合并、文件指纹等属性。具体可参考fis官网api,http://fis.baidu.com/fis3/docs/beginning/intro.html ,里面有详细介绍


执行后结果:


demo-uri-dir-output_d22b536.png

文章评论

取消回复
登录 参与评论

评论列表(

乐鱼app成为大巴黎赞助商