gulp安装&less插件教程

gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤


gulp的安装步骤:
首先安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可.


安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务


npm介绍:
npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]；
1, <name>：node插件名称。例：npm install gulp-less --save-dev
2, -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
3, --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
4, -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

大致步骤如下：

1.首先安装node.js文件。因为gulp与要在其环境下运行，所以我们得先装它。下载地址如图所示：

在命令栏里输入node -v运行，npm -v运行，如果能读出版本号说明已安装成功。

                                                                                               【如果你已经安装过了就直接跳过此步骤】

2.选装cnpm

打开cmd命令，将下面的代码复制粘贴到命令栏中。

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完后最好查看其版本号 ： 输入cnpm -v

如果结果如上图所示，表明你的cnpm安装成功。

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）
npm install: 去下载东西-->https://www.npmjs.com/
cnpm install gulp -g   全局安装gulp

gulp -v  查看gulp版本

3.安装全局gulp

在命令栏中输入   cnpm install gulp -g ，然后执行；

输入gulp -v查看版本号显示结果如下图：

4.在项目文件夹里安装本地gulp文件

首先用命令栏切换到项目文件夹（切换磁盘直接输入   （磁盘代号+：）   然后回车即可。然后一步一步切换文件夹 （cd+空格+文件夹名）直到切到项目文件夹为止

在项目文件夹下新建package.json文件 或者 输入命令cnpm init生成package.json文件（一直回车，最后yes选项时输入y回车即可）

自己新建的需要填写下图代码，如果是自动生成的，json文件内容需要小小修改，如图：

注：name里的随意填，main里需要写对，description里随意填即可。

在项目目录下新建一个css文件夹，然后在里面新建一个index.less文件（文件名根据你要生成的css文件而取，只要跟下面的配置里的一致就行），将你需要的样式写在less文件里。

然后在命令栏里输入cnpm install --save-dev 运行（本地安装gulp）

最后输入  cnpm install gulp-less --save-dev  运行 (安装less插件)

成功如图所示：

5.新建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')); //将会在css下生成index.css
});


gulp.task('default',['testLess']); //定义默认任务

然后保存。

6.运行gulp

在命令栏里输入cnpm init 执行；

会出现如下图结果

出来结果后查看自己的package.json文件，

将自己json文件里的设置输入到对应的后方（不需要引号，直接输完回车即可），输入前四项即可，如果没有“main”项则只需输出前三项，

其他项直接回车。当出现如下图判断时，输出y回车。

最后编译less：命令提示符执行gulp testLess；

如果结果跟上图类似就表明执行成功。

如果出现下图内容不要慌：

它提示你没有找到本地gulp，让我们试着运行npm install gulp,我们只要照做即可解决。

然后再重新输入gulp运行：

回去查看项目目录下的css文件，你会找到新增的index.css文件。

当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

好了，教程到此就结束了，希望能帮到你。