gulp快速入门

一、什么是gulp

简单来说，它是一种自动化构建工具，可以帮助我们省掉很多重复的工作。类似的工具还有grunt。

二、为什么使用gulp

就说gulp有什么优点吧，如下：

• less->css
• css压缩
• 文件复制
• 服务器
• …

gulp的功能当然不只上面几种，但是这几种也是比较常见的，而gulp基本上这样的功能大都是利用插件实现的。

三、怎么用gulp？

下面就gulp的使用场景做几个小例子。

注意：使用gulp的前提是已经安装好了nodejs，没有安装的童鞋请先安装好nodejs装gulp。

// 安装gulp
npm install -global gulp
// 查看gulp是否安装好
PS E:\code\web\gulp\gulp-sample> gulp -version
[10:46:09] CLI version 3.9.1
[10:46:09] Local version 3.9.1

如果是按输入 gulp -version命令有上面的显示，那么说明已经安装成功，至于版本可能不同。

OK、现在就可以利用gulp命令来下载插件进行开发了。

eg1：hello gulp

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('hello');
});

输入命令： gulp hello。即可执行成功，这里的gulp后面的那个参数即使task任务的第一个参数名。

eg2：less->css

// 输入命令，安装less插件
npm install gulp-less

// 引入less
var less = require('gulp-less');

// 将less自动化编译成less
gulp.task('style',function(){
    gulp.src('src/styles/demo.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css/'));
})

上面的文件路径自行创建即可，这里的每个pipe()就代表了一个操作，而pipe在linux中也有，名为管道。

这样就完成了将一个less文件转换成css标准的文件，当然没有压缩，如果想要压缩，引入相应的模块，再加一个pipe即可。完成了代码的输入之后，我们现在就需要来执行这个任务了。

输入命令： gulp style。即可执行成功，这里的gulp后面的那个参数即使task任务的第一个参数名。

四、总结

gulp的工作流

1. 命令行创建npm的配置文件
2. npm init
3. 添加一个gulp的依赖：npm install gulp –save-dev
4. 在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的
5. 在gulpfile中抽象我们需要做的任务

gulp总的来说帮组开发者节省了不少重复的事，让开发者更多的集中在代码的书写上，而不是在工具的调试上！

另外，若是需要源代码的童鞋请留言，因为比较简单就没上传了~~~