美文网首页
Assert Pipeline基本原理和简单使用

Assert Pipeline基本原理和简单使用

作者: eima | 来源:发表于2016-03-03 23:04 被阅读179次
    Assert Pipeline主要功能:
    1. 连接静态资源,减少渲染页面时浏览器发起的请求数。浏览器对并行的请求数量有限制,所以较少的请求数可以提升程序的加载速度。(主要是通过合并所有的js、css文件)
    2. 压缩静态资源
    3. 允许使用高级语言编写静态资源,如sass、coffee。它使用预处理器将高级语言编写的代码转换为真正的静态资源。
    Assert Pipeline的使用:

    Rails的静态文件可以放在多个位置:app/assetslib/assetsvendor/assets以及public.
    引入Assert Pipeline后,app/assert文件夹下的静态资源会被Sprockets中间件处理。
    处理过程是:生产环境中,Rails把预先编译好的文件保存在public/assert文件夹下,从此,不再直接私服app/asserts文件夹。

    清单文件和指令

    Sprockets 通过清单文件决定要引入和伺服哪些静态资源。
    清单文件中包含一些指令,告知 Sprockets 使用哪些文件生成主 CSS 或 JavaScript 文件。
    例如:app/assets/javascripts/application.js文件,其内容如下:

    // ...
    //= require jquery
    //= require jquery_ujs
    //= require_tree .
    

    该段代码要点:

    • sprocket的指令以//=开头
    • require指令告诉sprocket要加载的文件
      • require指令不会多次加载同一文件
      • 先require进来,先加载
      • 文件加载路径: Sprockets 会搜索 apps/assets文件夹中的所有子文件夹
    app/assets/javascripts/home.js
    lib/assets/javascripts/moovinator.js
    vendor/assets/javascripts/slider.js
    vendor/assets/somepackage/phonebox.js
    

    ==>

    //= require home
    //= require moovinator
    //= require slider
    //= require phonebox
    

    子文件引入清单:

    app/assets/javascripts/sub/something.js
    

    ==>

    //= require sub/something
    

    子文件夹引入清单:
    在 Sprockets 中,名为 index 的文件(扩展名各异)有特殊作用。
    例如,程序中使用了Jquery代码库和许多jquery插件,都保存在lib/asserts/javascripts/library_name文件中,那么lib/asserts/javascripts/library_name/index.js文件的作用就是这个代码库的清单,可以在这个清单里按顺序列出所需的文件,或者干脆require_tree,然后再在主清单里添加

    //= require library_name
    
    • require_tree指令告诉sprocket递归加载指定文件夹中的所有JS文件
      • require_tree引入的文件顺序不可预料

    再来看看css清单:

    /* ...
    *= require_self
    *= require_tree .
    */
    
    • require_self指令:在这个位置导入这个文件中的样式。
    • sass文件中请使用@import

    相关文章

      网友评论

          本文标题:Assert Pipeline基本原理和简单使用

          本文链接:https://www.haomeiwen.com/subject/ophokttx.html