下载并安装 node.js。
安装成功后开始菜单可以找到命令行,接下来就是用npm(node.js包管理器)下载依赖包。从国外网站下载相关依赖包会比较慢,使用淘宝镜像:
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装成功后,以后可以用cnpm替代npm,用法完全一样。
全局方式安装gulp(用于执行gulp任务):
cnpm install gulp -g
创建并进入项目文件夹,新建package.json项目文件(Node.js项目配置文件)
cnpm init
输入必要信息后即可自动生成一个package.json文件。
安装依赖包:
cnpm install gulp-less --save-dev
cnpm install gulp --save-dev
检查package.json,发现已经自动把依赖包加入项目:
“devDependencies”: {
“gulp”: “^3.9.1”,
“gulp-less”: “^3.3.0”
}
接下来演示开发一个编译less的任务:
新建gulpfile.js文件(gulp的配置文件)
———————————————-
var gulp=require(‘gulp’),
less=require(‘gulp-less’);
//定义一个任务
gulp.task(‘test’,function(){
gulp.src(‘src/less/index.less’)//less源文件
.pipe(less())//调用less模块
.pipe(gulp.dest(‘src/css’));//输出目录
});
gulp.task(‘default’,[‘test’]);//定义一个默认任务
——————————————————
演示less文件放在src/less/index.less
——————————————————-
/* Mixin */
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
/* Implementation */
#somediv {
.border-radius(30px);
}
——————————————————–
运行: gulp 或者gulp default或者gulp test,然后检查src/css/index.css是否成功生成。