实战篇:NodeJS实时编译LESS

写在前面的废话

今天想在RequireJS项目中引入Less,原先是用CSS插件加载css文件,就打算找找有没有加载less文件的插件。

果然有人开发了一个less加载插件,Github地址:https://github.com/guybedford/require-less

使用方法也和css插件一样,具体我就不多说了,因为最终我并没有采用这个方案。

这里需要说明一下的是这个包里并没有包含一个叫lessc.js的文件,查了一下,原来就是less提供的核心文件less.js,换了一个名字而已,需要的童鞋可以通过安装less,然后执行scripts/build.js复制出来就可以了。

之所以不打算用这个,我的考虑是能少引入一些js文件就少引入一些吧,于是我采用了一个外挂式的解决方案,就是通过watch目录下的less文件,实时编译生成css文件,而原来的工程就不需要做任何修改。

实战

需要的插件是lessnode-watch,可以直接用npm安装即可。

修改app.js文件,加入监控和编译命令

const watch = require('node-watch');
const path = require('path');
const exec = require('child_process').exec;

watch('src/less', { recursive: true }, function(evt, name) {
  var newFilePath = path.resolve("src/styles", path.basename(name, '.less') + ".css");
  exec("lessc " + name + " > " + newFilePath, function(error, stdout, stderr){
     error && console.log(error);
  });
});

监控src/less目录下的less文件,如果发现有改动,立即调用lessc命令进行编译,生成的文件存放到src/styles目录下,这样就可以实现css文件的实时变动了。

这里使用派生新进程来编译less文件,因此需要设置一个回调函数来显示出错信息。

好了,现在可以愉快地修改less文件,同时原来的RequireJS项目也不需要做任何变动!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,498评论 1 32
  • 虽然从没有认为自己是一个前端开发者,但不知不觉中也积累下了一些前端开发的经验。正巧之前碰到一道面试题,于是就顺便梳...
    AlloVince阅读 7,121评论 1 49
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45