gulp安装&less插件

gulp是基于nodejs，所以，安装gulp前先安装node js，通过nodejs的npm全局安装和项目安装gulp。

1、nodejs安装：

打开nodejs官网，选择DOWNLOADS,根据自己的系统点击选择对应版本（.msi文件）。然后安装即可（安装路径随意）。

2、安装完成后 打开DOS窗口（打开方式：win+r --->输入cmd  --->按回车）输入命令 如下图：

node -v：查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。
npm -v：查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。

3、接下来安装npm,由于npm安装插件过程：从http://registry.npmjs.org下载对应的插件包

由于该网站服务器位于国外，所以经常下载缓慢或出现异常。所以，解决该问题的办法就是：

选装cnpm（注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm）

在命令行下切换到项目目录下执行 npm install cnpm -g --registry=https://registry.npm.taobao.org

按回车，命令行会出现一个转动的小横线，表示正在联网加载。加载完后，就会出现以下界面

4、全局安装gulp。 

1）在DOS窗口输入cnpm install gulp -g，按回车，命令行会出现一个转动的小横线，表示正在联网加载。加载完后，就会出现以下界面

2）查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

5、新建package.json文件

创建package.js文件通常有两种方式。

1） 直接在你的项目目录下新建一个package.json文件，编辑内容：

（注意：json文件内是不能写注释的，复制下列内容请删除注释）

package.json文件

{  "name": "test", //项目名称（必须）  "version": "1.0.0", //项目版本（必须）  "description": "this is a test", //项目描述（必须）  "main": "gulpfile.js", //文件入口（必须）  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",//作者  "license": "ISC",//许可协议  "devDependencies": { //项目依赖的插件    "gulp": "^3.9.1",    "gulp-less": "^3.3.0"  }}

2）当然我们可以手动新建这个配置文件，在命令行下输入cnpm init 回车 如图：

填写对应的内容 非必须填的可留白 如下图 最后 输入 y 后 回车 项目下就会生成package.json文件

6、本地安装gulp

1） 在DOS窗口 输入 cnpm install --save-dev 效果如下图表示安装成功 同时 项目目录下会出现一个node-modules文件夹

7、安装less插件 

1）在DOS窗口输入命令cnpm install gulp-less --save-dev效果如下图表示安装成功

2）为了能正常使用，我们还得本地安装gulp：cnpm install gulp --save-dev

8、新建gulpfile.js文件：

在项目目录下新建gulpfile.js文件

gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方    less = require('gulp-less');//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {    gulp.src('css/index.less') //该任务针对的文件        .pipe(less()) //该任务调用的模块        .pipe(gulp.dest('css/index')); //将会在css下生成index.css});gulp.task('default',['testLess']); //定义默认任务

9、运行gulp

根据你的gulpfile.js文件 在项目目录下新建一个名为css的文件夹 在css内新建一个index.less

在DOS窗口输入 gulp 任务名称(testLess) 回车效果如下图表示安装成功 同时 项目目录css文件夹下会生成一个index.css文件