• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > LESS-Middleware:Node.js 和 LESS 的完美搭配

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,LESS-Middleware:Node.js 和 LESS 的完美搭配,html5cn等相关知识,匿名希望在学习及工作中可以帮助到您
LESS 是一个编写 CSS 的很好的方式 ,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码。


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


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


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





  • app.use(lessMiddleware({

  • src: __dirname + "/less",

  • dest: __dirname + "/public/css",

  • prefix: "/css",

  • force: true

  • }));

  • 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 参数里的,如下:



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

  • })
  • 复制代码

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



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



    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 实现的功能可以用下面的方式达到同样的效果:



  • path: function(pathname, req) {

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

  • }

  • }
  • 复制代码

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


    您可能想查找下面的文章:

    • 一款利用html5和css3动画排列人物头像的实例演示
    • html5教程调用绘图api画简单的圆形代码分享
    • html5教程画矩形代码分享
    • html5教程制作简单画板代码分享
    • html5基础教程常用技巧整理
    • html5教程-Canvas入门
    • html5教程画矩形代码分享
    • HTML5晃动DeviceMotionEvent事件
    • HTML5教程之html 5 本地数据库(Web Sql Database)
    • HTML5中对contenteditable属性的解释与规定

    相关文章

    • 2018-12-03小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
    • 2018-12-03自定义html标记替换html5新增元素_html5教程技巧
    • 2018-12-03HTML5学习笔记之History API_html5教程技巧
    • 2018-12-03推荐10款常用的图片压缩上传用法,欢迎下载!
    • 2017-08-06Html5 Geolocation获取地理位置信息实例
    • 2018-12-03html5的canvas实现3d雪花飘舞效果_html5教程技巧
    • 2018-12-03H5移动端做一个不限个数的通栏按钮的示例代码详解
    • 2018-12-03element-ui如何操作table滚动效果
    • 2018-12-03详解HTML5中的进度条progress元素简介及兼容性处理的示例代码
    • 2018-12-03HTML5 在canvas中绘制矩形附效果图_html5教程技巧

    文章分类

    • html/xhtml
    • html5
    • CSS
    • XML/XSLT
    • Dreamweaver教程
    • Frontpage教程
    • 心得技巧
    • bootstrap
    • vue
    • AngularJS
    • HBuilder教程
    • css3
    • 浏览器兼容
    • div/css
    • 网页编辑器
    • axure

    最近更新的内容

      • Html5 video 上传预览图片视频,设置、预览视频某秒的海报帧
      • WebGL怎样操作json与echarts图表
      • 音频播放入门教程:10个音频播放零基础入门教程推荐
      • <acronym> 和 <abbr> 这两个标签有什么本质上的区别吗?
      • HTML5通过调用canvas对象的getContext()方法来获取绘图环境
      • 程序设计HTML5 Canvas API
      • 网页 head 标签中的 JS 和 CSS,哪种文件放在前面,哪种放在后面比较好?
      • 迄今为止用 HTML5 技术开发的最好的几款网页游戏是哪几款?
      • 大神看下,选择免费的linux培训还是自学java或者参加java培训班呢?
      • 什么是HTML文件?HTML文件的初步认识

    关于我们 - 联系我们 - 免责声明 - 网站地图

    ©2020-2025 All Rights Reserved. linkedu.com 版权所有