• 技术文章 >web前端 >H5教程

    LESS-Middleware:Node.js 和 LESS 的完美搭配

    2016-05-17 09:07:57原创711
    LESS 是一个编写 CSS 的很好的方式 ,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码。


      最近我一直在研究 Node.js ,并想用 less-middleware 中间件,这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后,LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。


    如果你把 LESS 和 CSS 文件存储在同一个目录,配置很简单,但我想用不同的路径为我的源目录和目标目录,这个地方就有点问题了,所以在这里,我想我把发现的问题记录下来。


      如果您指定一个不同的 "src" 和 "dest" 的目录,您还必须提供 "prefix" 选项,它必须匹配跟在您的目标目录中后面的目录。下面是这个例子可以更好的让你理解:


    1. var lessMiddleware = require("less-middleware");



    2. app.use(lessMiddleware({

    3. src: __dirname + "/less",

    4. dest: __dirname + "/public/css",

    5. prefix: "/css",

    6. force: true

    7. }));

    8. app.use(express.static(__dirname + "/public"));
    复制代码


    在这个例子中,我把源目录配置为我的应用程序的根目录下的 "/less" 目录,并让 CSS 输出到 "/public/css 目录。此外,你还需要指定 "prefix" 属性,以匹配跟在 "/public" 后面的目录,即 "/css" 目录。


      你还可以指定其它参数,上面指定了 force 参数,让每次请求的时候重新编译 LESS 文件,再结合自动刷新功能,这样在开发的时候修改样式代码都可以有即时的效果。


      最后在页面上引用 CSS 文件就和正常的一样了:


    复制代码

    这边文章发布的时候,less-middleware 已更新到到 1.0.3 版本,上面的配置是针对 0.1.x 的,下面给大家介绍如果从 0.1.x 迁移到 1.0.x。


      首先,也是重要的变化——源目录参数的变化,之前是放在 options 参数里的,如下:


    1. lessMiddleware({

    2. src: path.join(__dirname, '/public')

    3. })
    复制代码


    因为源目录是必备参数,所以升级之后作为中间件的第一个参数,如下:


    1. lessMiddleware(path.join(__dirname, '/public'))
    复制代码


      第二个变化是中间件参数和 LESS 参数分离,这样参数结构更清晰明了,如下:


    1. lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])
    复制代码


    options 参数是提供给中间件使用的,而后面两个参数对象不会影响中间件,是传递给 LESS 解析和编译器的。


      在这个调整之后,对应参数定义方式也要相应的调整,下面是一些对应的修改:


    compress: 从 options 移除,需要在 compilerOptions 中定义;
    dumpLineNumbers: 从 options 移除,需要再 parserOptions 中定义;
    optimization: 从 options 移除,需要再 parserOptions 中定义;
    paths: 从 options 移除,需要再 parserOptions 中定义;
    preprocessor: 已经被移动到 preprocessor.less 中进行定义;
    relativeUrls: 从 options 移除,需要再 parserOptions 中定义;
    sourceMap: 从 options 移除,需要在 compilerOptions 中定义;
    yuicompress: 从 options 移除,需要在 compilerOptions 中定义;


      第三个变化是新增加了参数,同时移除了 prefix 和 treeFunctions 参数,让你可以更灵活的进行配置,如下:


    postprocess.css: 在被保存之前,修改 CSS 编译输出;
    preprocess.less: 在 LESS 被解析和编译前进行修改;
    preprocess.path: 在被文件系统加载前,修改 LESS 路径;


      有了这几个参数,我们之前使用 prefix 实现的功能可以用下面的方式达到同样的效果:


    1. preprocess: {

    2. path: function(pathname, req) {

    3. return pathname.replace(/^\/less\//, '/css');

    4. }

    5. }
    复制代码


    更详细的信息,可以参考 less-middleware 官方文档。


    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:HTML5仿苹果手机的面板合拢折叠效果 下一篇:HTML教程:如何设置Iframe自适应高度
    PHP编程就业班

    相关文章推荐

    • html5离线存储有哪些• 深入解析asp.net中mvc4自定义404页面(分享)• h5新增标签audio与video的使用• 你值得了解的HTTP缓存机制(代码详解)• 使用HTML5 SVG绘制各种雪花图案

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网