写在前面的废话

今天想在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文件，而原来的工程就不需要做任何修改。

实战

需要的插件是less和node-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项目也不需要做任何变动！