gulp是干嘛的？

先来看官网的介绍：

对我这种初学者来讲，看完之后并没有什么卵用，然而，在平时的使用中，似乎可以大概了解gulp做的事情，比如帮助我们在本地起一个服务器，帮助我们编译less、sass文件，压缩代码，合并、打包文件，图片压缩等等。

说白了，当我们使用gulp的时候，无非就是为了让它帮我们对代码做一些事情，然后放到服务器上跑起来。当然这个说法可能不准确，但是我感觉可以先这样去理解。

如何开始？

首先，我们可以试着用gulp起一个静态的服务器。

npm install gulp -g     //全局安装gulp
npm install gulp --save-dev //接着在你的项目文件夹下面安装gulp
//--save-dev 是为了将gulp信息添加到你的package.json中，如果你是在一个空的项目中开始的，那你可能需要先执行npm init，按照提示，生成一个新的package.json文件。

上述步骤完成之后，我们就可以开始使用gulp了。

如何使用？

如果你想让gulp帮你去做一些事情，也就是完成一些特定的任务，我们就要创建一系列任务让gulp帮我们去完成。

在你的项目文件夹（根）下，创建一个gulpfile.js的文件，我们将会在这里创建任务，首先需要引入gulp：

var gulp = require('gulp'),  

要完成某些特殊的任务，我们需要载入不同的依赖文件，例如，我们需要编译我们的less文件，就需要安装gulp-less这个包。使用如下命令安装并并将包信息保存到package.json中：

npm install gulp-less --save //如需其他的依赖包，安装的方式也是一样的

现在我们来创建一个任务来编译我们的less文件：

//用gulp.task()来创建一个任务。
gulp.task(‘less’, function () {
//用gulp.src()来定义一个或者多个文件来源，下面的写法就是选择所有的less文件
return gulp.src(‘styles/*.less’)
//pipe()是对文件做的操作，我们可以把pipe()处理的过程理解为一个车间的流水线，原料由src()提供，经过不同的加工步骤(pipe)的处理后再放回流水线上。
.pipe(less())
//gulp.dest()用来设定目的地的路径，我们这里就是指的css文件输出的路径。
.pipe(gulp.dest(‘/styles’));
});

写完了上述方法，我们的任务文件应该是这样的：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
  return gulp.src(config.app+'/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest(config.app+'/style'));
});

首先在项目内新建一个文件夹styles,之后再文件夹中创建一个main.less文件，并添加一些代码：

body{
  padding: 0;
  margin: 0;
}

之后我们执行gulp命令，启动任务：

gulp less

你会发现，你的styles文件夹下多出了一个main.css的文件，正式main.less编译之后的结果。

有没有感觉gulp并没有那么高大上了呢？其他的任务也都是一样的原理。分享一个比较有用的文章：

gulp使用指南