gulp学习笔记

概念

要学习gulp，首先是了解what is gulp。

gulp是前端开发过程当中对代码进行构建的工具，是自动化项目的构建利器；它不只能对网站资源进行优化，并且在开发过程当中不少重复的任务可以使用正确的工具自动完成；使用它，咱们不只能够很愉快的编写代码，并且大大提升咱们的工做效率。它是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操做上很是简单。

做用及与grunt对比

我尝试翻译一下这个幻灯片中的内容。

首先，咱们要把咱们的项目想象成许多水管，里面流动着文件。而不是想象成一个装满货物的货车。同时，想要成为一名编程开发人员，了解流控制是一个必要条件，而理解新式流控制技术可以让你更加高效。

接下来，让咱们想象一个画面：从某个文件系统中读取文件，通过一系列的修改后再提交到文件系统。
若是你的脑海中浮现的画面是：

那你多是一个grunt使用者。
事实上，理想的流程应该是下面这样：

也就是说，咱们并不须要修改一次就提交一次。应该在屡次修改后一次性提交到文件系统。

在gulp以前，人们使用着grunt，它有不少强大的插件，但熟悉它的朋友可能会遇到以下的问题：

1. 插件会作过多的事件，好比我想要一个banner却去使用一个js压缩插件来实现；
2. 插件会作不少不须要的事情，好比我想要为本身的代码添加一个单元测试，这也须要使用一个插件来实现；
3. grunt的配置文件试图去实现全部事情却搞得一团糟；
4. 糟糕的流控制致使产生不少临时文件

gulp的理念与grunt相反，它试图让咱们的项目构建系统更加自由，约束更少。也就是说，这个构建系统应该只控制文件，其余的事交给别的工具来处理。

下面是gulp和grunt的区别：

1. 使用gulp，你的构建文件仅仅是代码，而不是一系列配置；
2. 使用gulp插件时，只须要理解插件自己依赖的那个库的原始配置就能够了，而不是像grunt那样，常常都是将配置包装一层后再暴露给使用者；
3. 插件每每不超过20行代码，由于它们只专一于解决一个问题；
4. 并发执行任务；
5. 理想状态的文件输入输出流。

所以，gulp提供了文件流和一个基础的任务系统，而你要学习gulp，只须要理解5个方法：

1. gulp.task(name, fn)：定义一个名为name的任务，你也能够自定义该任务的前置任务；
2. gulp.run(tasks...)：以最大的并发数开始执行任务；
3. gulp.watch(glob, fn)：监听文件变化，并在变化事件触发时执行相应的回调函数；
4. gulp.src(glob)：这个方法会返回一个可读文件流；
5. gulp.dest(path[, options])：向目标地址输出文件，若文件不存在则先新建该文件。

好了，你已是一个gulp专家了（滑稽脸）。

实战

了解了gulp的基本概念，以及能够用gulp解决的问题后，让咱们来实际体验一次gulp。

新建一个demo文件夹，并执行

npm init

初始化项目，而后安装gulp

npm install gulp -g

最后，新建gulpfile.js。

在gulpfile.js中，输入以下代码：

var gulp = require("gulp");
//压缩js、css文件
var uglify = require("gulp-uglify");
var cleanCss = require('gulp-clean-css');
//自定义script任务，处理js文件压缩
//pipe()是node.js的stream中的方法
//参数是一个function，这个function做用是接受上一个流（stream）的结果，并返回一个处理后流的结果
gulp.task('script', function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
//自定义css任务，处理css文件压缩
gulp.task('css', function () {
    gulp.src('css/*.css')
        .pipe(cleanCss())
        .pipe(gulp.dest('dist/css'));
});

以后，咱们要新建两个文件夹：js和css，其中分别新建index.js和index.css两个文件。最后，在命令行中输入

gulp css
gulp script

gulp就会执行任务，自动新建dist文件夹，将压缩后的文件放入该文件夹。
若是要在修改代码后自动更新，使用gulp.watch方法：

gulp.task('modify', function () {
    gulp.watch('js/*.js', ['script']);
    gulp.watch('css/*.css', ['css']);
})

命令行输入

gulp modify

以后修改css文件，命令行会显示

[13:44:41] Starting 'modify'...
[13:44:41] Finished 'modify' after 14 ms
[13:44:48] Starting 'css'...
[13:44:48] Finished 'css' after 15 ms

最后文件目录以下：

相关插件

gulp功能强大彷佛都是由于其丰富的插件生态，因此最后打算介绍一下主流使用的插件：

插件名	做用
gulp-sass	编译sass成css文件
gulp-imagemin	压缩 png/jpg/git/svg 格式图片文件
gulp-gzip	gzip插件
gulp-util	集合了许多 Gulp 中经常使用的小工具，例如 log() 、 colors 等等
gulp-spriter	自动合并雪碧图
gulp-watch	这个插件能够自定义触发事件，并且经过插件提供回调机制配合你们熟悉的 console 能够很方便的观察到构建流程。
gulp-colors	设置 CLI 输出文字的颜色
gulp-rev	将 MD5 指纹写入文件名
gulp-sourcemaps	生成 Source Map
gulp-uglify	压缩js文件
gulp-clean-css	压缩css文件
gulp-concat	合并 JS 或 CSS 文件

参考

gulp经常使用插件
gulp 使用指南