require-css, 允许CSS需要和优化的RequireJS加载插件插件

分享于 

8分钟阅读

GitHub

  繁體 雙語
A RequireJS CSS loader plugin to allow CSS requires and optimization
  • 源代码名称:require-css
  • 源代码网址:http://www.github.com/guybedford/require-css
  • require-css源代码文档
  • require-css源代码下载
  • Git URL:
    git://www.github.com/guybedford/require-css.git
    Git Clone代码到本地:
    git clone http://www.github.com/guybedford/require-css
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/guybedford/require-css
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    需要 css

    需要和优化的RequireJS CSS,支持杏仁。

    在脚本中编写模块化CSS依赖。

    对于 LESS 包含,除了预处理步骤之外,使用需要更少的插件,这与这里模块完全一样,并且构建。

    概述

    使用简单的RequireJS语法,允许构建需要CSS的脚本:

    define(['css!styles/main'], function() {
     //code that requires the stylesheet: styles/main.css});

    完全兼容 IE 6 +,Chrome 3 +,Firefox 3.5 +,Opera 10 +,iOS。

    • 在使用RequireJS优化器作为构建的一部分运行时,CSS构建css 依赖项自动内联到JavaScript内部,完全兼容分层。! 加载图层后,就会执行CSS注入。
    • 为构建单独的层CSS文件 separateCSS 构建参数允许构建层单独输出它的CSS文件,而不是使用 JavaScript,以手动包含。
    • 通过外部库 csso 支持 CSS压缩压缩压缩。

    安装和安装

    手动下载要求css文件夹或者使用 Bower:

    bower install require-css

    要允许直接使用 css,请在RequireJS中添加以下映射配置插件:!

    map: {
     '*': {
     'css':'require-css/css'// or whatever the path to require-css is }
    }

    用例和好处

    动机

    RequireCSS的用例来自于管理模板及其CSS的需求。 一个想法是,CSS需要的是动态呈现模板的代码的依赖关系。 在客户端编写大型动态应用程序时,需要将CSS作为模板注入,而不是将所有CSS分开。 此外,还可以使用RequireJS优化器自然构建 CSS,这也支持独立构建层,如需要的那样。

    脚本内联CSS好处

    默认情况下,在生成CSS期间,在运行时在层内作为字符串内联并内联为一个字符串。

    如果该层作为 <script> 标记包含,则只需要一个浏览器请求,而不需要使用 <link> 标记的多个单独的CSS请求。

    甚至比将层包含为 <script> 标记更好的是,将层动态包含为非阻塞要求。 然后在 background 中异步加载层时,可以显示页面。 在本例中,使用动态呈现模板的CSS被异步加载到同一个脚本中。 不再需要坐在 <link> 标记中,以阻止页面显示不必要地出现。

    模块化 CSS

    RequireCSS表示一个 CSS modularisation,其中样式可以直接作用于它们与之绑定的呈现代码。

    就像JS需要的那样,不能保证CSS注入的顺序。 这里的思想是,每当有样式替代时,它们应该基于使用基本,或者类的更具体的选择器。 重置和全局样式是构建在它们之上的所有模块样式的重复依赖。

    命令行优化器配置

    基本用法

    优化器配置:

    {
     modules: [
     {
     name:'mymodule',
     exclude: ['css/normalize']
     }
     ]
    }

    如果'维基'的内容为:

    define(['css!style', 'css!page'], function(css) {
     //... });

    那么优化器的输出将是:

    包含要动态注入的style.css 和 page.css的-mymodule.js

    由于 r.js 问题 #289,需要 css/normalize 排除。

    单独的文件输出

    要将CSS输出到单独的文件,请使用配置:

    {
     separateCSS:true,
     modules: [
     {
     name:'mymodule' }
     ]
    }

    然后将所有的css输出到文件 mymodule.css。 这里配置也可以放置在模块对象本身上,用于层特定设置。

    优化与排除和包含完全兼容。

    和 9选择器限制

    在IE9和 below 中,每个样式表有 4095个选择器的最大限制。

    为了避免这个限制,可以使用 IESelectorLimit 选项完全禁用CSS连接。

    {
     IESelectorLimit:true,
     modules: [
     {
     name:'mymodule' }
     ]
    }

    理想的构建层会完全避免这个限制,因为它完全被设计为不能达到它。 这个选项实际上只是一个修复,当没有它的他可以能,因为它会降低注入性能。

    这里选项也与 separateCSS 选项不兼容。

    不包括生产中的CSS模块

    当不需要在生产中进行动态CSS时,可以为生成设置一个杂注来编写最小版本的RequireCSS:

    {
     pragmasOnSave: {
     excludeRequireCss:true }
    }

    siteRoot配置

    当构建CSS时,所有的uri都重新整理 relative 到站点 root。

    它假定siteRoot与构建目录匹配,在本例中。

    如果这是不同的,那么将 siteRoot relative的服务器路径指定给配置中的in。

    例如如果站点 root 是 www 并且我们构建目录 www/lib,我们将使用以下配置:

    {
     appDir:'lib',
     dir:'lib-built',
     siteRoot:'../',
     modules: [
     {
     name:'mymodule' }
     ]
    }

    Almond

    Almond不支持 packages 配置选项。 当使用:,而不是配置 RequireCSS,而是在生产应用程序中包含以下配置时,

    requirejs.config({
     map: {
     '*': {
     css:'require-css/css' }
     }
     });

    禁用生成

    要完全禁用任何CSS构建,请使用配置选项 buildCSS:

    {
     buildCSS:false,
     modules: [
     {
     name:'mymodule' }
     ]
    }

    CSS需要将它的保留在源"是"中。 这不应该与 stubModules 一起使用。

    CSS压缩

    CSS压缩是支持 csso的。

    要启用CSS压缩,请使用npm安装 csso:

    
     npm install csso -g
    
    
    
    

    生成日志将显示压缩结果。

    当通过NodeJS运行 r.js 优化器时,有时没有找到全局模块。 在本例中,将csso安装为本地 node 模块,以便可以。

    注入方法

    加载CSS文件或者外部CSS文件时,使用 <link> 标记。 跨浏览器 支持通过许多浏览器条件来实现。

    如果像图片这样的CSS资源非常重要,那么可以通过加载器插件( 如图像或者字体) 将这些内容添加到需要的加载程序中。 然后,可以编写表单的要求:

    require(['css!my-css', 'image!preload-background-image.jpg', 'font!google,families:[Tangerine]']);

    许可证

    MIT


    相关文章