gulp安装&less插件

什么是gulp?

　　gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。即是说，在开发过程中，对文件的处理可以放心交给gulp。

　　　gulp与grunt非常相似，如果学过grunt，那么gulp也可以类比的去学。跟grunt一样，gulp也有很多插件，在这里我们讲一下gulp的安装及less插件的使用。

  一，安装node.js与npm

　　1，由于gulp是基于node.js的，这点跟grunt也是一样的，所以，安装gulp之前，我们先安装node.js，很简单的，下载好，安装的时候一路点next（下一步） 就可以了。安装好之后，我们打开dos窗口，输入node -v，如果出现版本号，说明安装成功。　

　　２，安装node.js时会跟着安装npm,(一个很有用的东西，后面会说)，我们输入 npm -v 检查一下npm是否也安装成功。

 

 二，npm

　　1，npm是node的包管理器，专门用来管理node的插件的。安装，卸载等等。

　　2，由于npm的服务器在国外，所以在使用过程中可能会出现下载缓慢等等状况，针对这种情况，淘宝的团队做了一件好事，用一个镜像来替代npm，那就是cnpm 使用方法跟npm一模一样，只要把npm 改成才能cnpm即可。

　　3，安装方法：

　　　　在dos窗口输入指令：npm install cnpm -g --registry=https://registry.npm.taobao.org 即可。输入cnpm -v

检查版本号，如果有版本号就是安装成功。‘

三，全局安装gulp

1，安装：dos窗口输入cnpm install gulp -v

2，输入 gulp -v 检查是否安装成功。

四，创建package.json文件

1，package文件是很重要的json文件，它里面配置了一些信息，包括项目名字，版本号，还有添加依赖的地方。

2，它大体是这样的

{  "name": "web1",  "version": "1.0.0",  "description": "this is atest",  "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"  }}

 3，这个文件可以自己在项目根路径下自己创建配置，也可以在dos窗口输入命令生成

指令为：cnpm init

之后会一步一步出现很多需要你填的信息。主要是以下这三个一定要填，具体填什么，

这个看你。

"name": "web1",  "version": "1.0.0",  "description": "this is atest"。

    四，本地安装gulp与gulp插件

1， dos窗口，选到你的项目根路径下，输入指令：cnpm install gulp --sqve-dev

2，我们以安装gulp-less插件为例子，在dos窗口下，选到你的项目根路径下，输入指令：cnpm install gulp-less --save-dev

3，为什么我们既要全局安装gulp又要在本地安装gulp呢，原因就是全局安装是为了执行gulp任务，本地安装是为了调用gulp插件的功能。

五，新建gulpfile.js文件

1，gulpfile是gulp项目的配置文件,一般我们把它放在项目根目录下。

2，它的配置大概如下：

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']); //定义默认任务

六，运行gulp

1,编译less 在dos窗口，项目根路径下 执行命令 gulp testLess 即可，返回查看是否生成了less对应的css文件。

如果生成说明成功。注意：testLess是你需要执行的的任务名。

至此，我们就完成了gulp的安装及less插件的使用。