node.js使用gulp编译less

1. 安装gulp

node.js命令窗口输入sudo npm install -g gulp全局安装gulp

2. 配置环境变量

1. 新建环境变量：我的电脑属性-高级系统设置-环境变量-新建administrator的用户变量
2. 变量名字为：NODE_PATH
3. 变量值为：C:\Users\Administrator\AppData\Roaming\npm\node_modules

3. 创建gulpfile.js文件

新建文件名为gulpfile.js的js文件，键入以下代码保存。src路径按需修改。
第1行代码：加载gulp工具
第2行代码：加载less插件
3-7行代码：编译less
8-10行代码：监听文件变化

1. var gulp = require('gulp');  
2. var less = require('gulp-less');
3. gulp.task('less', function() {
4.     return gulp.src('./www/css/*.less')
5.     .pipe(less())
6.     .pipe(gulp.dest('./www/css'))
7. });
8. gulp.task('watch', function () {
9.   gulp.watch(['./www/*.html','./www/css/*.less'], ['less']);
10. });

4. 文件目录处理

项目根目录放入gulpfile.js文件-根目录新建www文件夹-www文件夹放入index.html文件以及css目录-css文件夹创建style.css及style.less。

5. 开始编译less

1. node.js命令窗口输入cd+空格+文件目录，本次示例为：
cd C:\Users\Administrator\Desktop\less
2. 输入gulp less开始编译
3. 输入gulp watch监听

6. 完成编译

html文件 less文件 css文件 预览效果