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监听