LESS-Middleware:Node.js 和 LESS 的完美搭配
最近我一直在研究 Node.js ,并想用 less-middleware 中间件,这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后,LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。
如果您指定一个不同的 "src" 和 "dest" 的目录,您还必须提供 "prefix" 选项,它必须匹配跟在您的目标目录中后面的目录。下面是这个例子可以更好的让你理解:
- var lessMiddleware = require("less-middleware");
-
-
-
- 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 参数里的,如下:
- lessMiddleware({
-
- src: path.join(__dirname, '/public')
-
- })
因为源目录是必备参数,所以升级之后作为中间件的第一个参数,如下:
- lessMiddleware(path.join(__dirname, '/public'))
第二个变化是中间件参数和 LESS 参数分离,这样参数结构更清晰明了,如下:
- 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 实现的功能可以用下面的方式达到同样的效果:
- preprocess: {
-
- path: function(pathname, req) {
-
- return pathname.replace(/^\/less\//, '/css');
-
- }
-
- }
更详细的信息,可以参考 less-middleware 官方文档。

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

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 !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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.

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.

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.

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.

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

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.

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.

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.
