分类目录归档:UI

Windows下Node.js及gulp 入门

下载并安装 node.js。

node-v6-9-4-x64

安装成功后开始菜单可以找到命令行,接下来就是用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是否成功生成。