Maison interface Web Tutoriel H5 LESS-Middleware:Node.js 和 LESS 的完美搭配

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

May 17, 2016 am 09:07 AM

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


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

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


       如果你把 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 官方文档。


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment exécuter le projet H5 Comment exécuter le projet H5 Apr 06, 2025 pm 12:21 PM

L'exécution du projet H5 nécessite les étapes suivantes: Installation des outils nécessaires tels que le serveur Web, Node.js, les outils de développement, etc. Créez un environnement de développement, créez des dossiers de projet, initialisez les projets et écrivez du code. Démarrez le serveur de développement et exécutez la commande à l'aide de la ligne de commande. Aperçu du projet dans votre navigateur et entrez l'URL du serveur de développement. Publier des projets, optimiser le code, déployer des projets et configurer la configuration du serveur Web.

Que signifie exactement la production de pages H5? Que signifie exactement la production de pages H5? Apr 06, 2025 am 07:18 AM

La production de pages H5 fait référence à la création de pages Web compatibles compatibles multiplateformes à l'aide de technologies telles que HTML5, CSS3 et JavaScript. Son cœur réside dans le code d'analyse du navigateur, la structure de rendu, le style et les fonctions interactives. Les technologies courantes incluent les effets d'animation, la conception réactive et l'interaction des données. Pour éviter les erreurs, les développeurs doivent être débogués; L'optimisation des performances et les meilleures pratiques incluent l'optimisation du format d'image, la réduction des demandes et les spécifications du code, etc. pour améliorer la vitesse de chargement et la qualité du code.

Comment faire l'icône H5 Click Comment faire l'icône H5 Click Apr 06, 2025 pm 12:15 PM

Les étapes pour créer une icône H5 Click comprennent: la préparation d'une image source carrée dans le logiciel d'édition d'image. Ajoutez l'interactivité dans l'éditeur H5 et définissez l'événement Click. Créez un hotspot qui couvre l'icône entière. Définissez l'action des événements de clic, tels que le saut sur la page ou le déclenchement de l'animation. Exporter H5 documents sous forme de fichiers HTML, CSS et JavaScript. Déployez les fichiers exportés vers un site Web ou une autre plate-forme.

Quels scénarios d'application conviennent à la production de pages H5 Quels scénarios d'application conviennent à la production de pages H5 Apr 05, 2025 pm 11:36 PM

H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.

À quoi se réfère H5? Explorer le contexte À quoi se réfère H5? Explorer le contexte Apr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

La production de pages H5 est-elle un développement frontal? La production de pages H5 est-elle un développement frontal? Apr 05, 2025 pm 11:42 PM

Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.

Comment faire des fenêtres pop-up avec H5 Comment faire des fenêtres pop-up avec H5 Apr 06, 2025 pm 12:12 PM

H5 ÉTAPES DE CRÉATION DE LA FINES POP-UP: 1. Déterminez la méthode de déclenchement (cliquez, temps, sortie, défilement); 2. Conception du contenu (titre, texte, bouton d'action); 3. Set Style (taille, couleur, police, arrière-plan); 4. Implémentation du code (HTML, CSS, JavaScript); 5. Tester et déploiement.

Qu'est-ce que le langage de programmation H5? Qu'est-ce que le langage de programmation H5? Apr 03, 2025 am 12:16 AM

H5 n'est pas un langage de programmation autonome, mais une collection de HTML5, CSS3 et JavaScript pour la création d'applications Web modernes. 1. HTML5 définit la structure et le contenu de la page Web et fournit de nouvelles balises et API. 2. CSS3 contrôle le style et la mise en page, et introduit de nouvelles fonctionnalités telles que l'animation. 3. JavaScript implémente l'interaction dynamique et améliore les fonctions par les opérations DOM et les demandes asynchrones.

See all articles