gulp作为一个自动化构建工具，在前端开发中大大的提高了开发效率，前端开发者们可以利用他减少许多繁复无脑的操作。
这里简单构建一个小环境，就可以在以后的学习中，直接新建各种test.html测试我们新学习的知识点啦~
【看不明白的，有疏漏的，欢迎指出，我更改措辞或者bug】

入门安装

入门就不讲了，会用npm的同学应该都清楚，这里贴一个既有的官方指南。gulp入门指南

一些小基础

详细的配置我就不讲了，api文档戳进去看。简单做点通俗的讲解。

gulp.task(name[, deps], fn)

gulp是由每个小task组成的，我们可以类似函数一样，把我们需要的一个个小功能以各种task分开写，然后可以在cmd里使用gulp <task> <othertask> 方式来执行。

当然任务多了，我们就需要一键执行所有操作，所以一般情况下，我们只运行 gulp 命令，则会执行所注册的名为 default 的 task，然后在default这个任务后面，添加我们写好的其它task名的数组，则会挨个执行我们写好的各种task。不然只执行function。
如果没有default这个 task，那么gulp命令会报错。

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，嗯，戳文档api文档。

gulp.src(globs[, options])

其实说白了就是匹配我们要处理的文件，src就是路径。

gulp.src('client/templates/*.jade')

*自然是表示任意，全部。
glob 请参考 node-glob 语法 或者，你也可以直接写文件的路径。

gulp.pipe

其实就是把src匹配到的文件传递到后面来执行。括号里就是我们要进行的各种操作。

有点类似js语法，不难理解，用.接起来，一步步执行。
一般我们会一行行写，可读性好点，写一行不友好。

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

gulp.dest(path[, options])

生成处理好的文件。
你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.watch(glob[, opts], tasks)

监视文件，并且可以在文件发生改动时候做一些事情。

gulp.watch(glob [, opts], tasks) 
或
gulp.watch(glob [, opts, cb])

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

也可以直接执行function，一样的。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp的很多操作都是用插件执行的，当然，详细操作自然是每个插件看作者文档了！而且同一个功能的插件也层出不穷，大家可以根据需要自行选择。好了，开始我们的构建，注意，提到的每一个插件都要npm安装

注意：每一个插件都存在可配置的空间，所以关于最大化利用好每个插件，也是参照文档来的，这里我们取一些通用配置，具体视项目情况而定。

开服务，自动刷新

无可厚非，代码实时保存，浏览器实时刷新，是前端最想要的功能，手动刷新浏览器相信是每一个前端新手要吐的操作。

开服务

采用gulp-connect插件。
根目录下开启服务，端口号为2323，开启实时刷新，局域网内可用。

var connect = require('gulp-connect');
var serverConfig = {
root: "./",
port: 2323,
livereload: true,
host: '::'
}
gulp.task('server',function(){
    connect.server(serverConfig);
});

配置自动刷新

采用gulp-livereload。
开启刷新，监听html变化，并实时刷新。

var livereload = require('gulp-livereload')
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['*.html'],function(event){
        livereload.changed(event.path);
    })
});

其实到这里，一个微型的服务就搭建起来了，最后别忘了最根本的一句

var gulp = require('gulp');

不然是起不来的。
为了简便，可以在gulpfiles.js里添加一行,

gulp.task('default',['server','watch']);

直接运行gulp就好,让他们依次执行。

到这里，其实就是一个小规模的调试环境，接下来，让我们升级一下，开始构造简单的发布环境

压缩html

采用的是gulp-htmlmin插件。
抽取src目录下的所有html文件，导入到htmlmin插件进行处理，并将结果输出到public目录，最后重新刷新已开启的服务。

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
    gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest('public'))
        .pipe(connect.reload());
});

压缩js

采用的是gulp-uglify插件，但同时，我们也用到了另一个插件gulp-concat，这个是用来连接各个文件组成一个文件。
抽取src/js下的所有js文件，将其合并，然后压缩，输出到public/js目录，最后服务重载。

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('script',function(){
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest('public/js'))
    .pipe(connect.reload());
});

压缩css

采用的是gulp-cssnano插件。类似js，不解释了。

var cssnano = require('gulp-cssnano');
gulp.task('css',function(){
gulp.src('src/css/*.css')
    .pipe(concat('animate.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('public/css'))
    .pipe(connect.reload());
})

压缩图片

采取的是gulp-smushit插件，类似js，不解释。

var smushit = require('gulp-smushit');
gulp.task('imagemin',function(){
    gulp.src(['src/images/*.png','src/images/*.jpg'])
        .pipe(smushit({
            verbose:true
        }))
        .pipe(gulp.dest('public/images'))
        .pipe(connect.reload());
});

gulp-watch监听文件变动，自动重载

这个gulp-watch在前面有讲到，其实就是开启监听，并重新执行各个html
，js，css，imagemin压缩任务。
相信大家对比前面的gulp-livereload能够看的出来，这里两者是有冲突的，一个只是调试下刷新页面，一个却每次都要压缩。
所以其实实际项目中是不会把压缩任务配置到watch里，会造成资源浪费，你每保存一次，就会压缩。只会在最后调试完成，执行压缩一次。

gulp.task('watch', function () {
  gulp.watch(['src/*.html'], ['html']);
  gulp.watch(['src/js/*.js'], ['script']);
  gulp.watch(['src/css/*.css'], ['css']);
  gulp.watch(['src/images/*.*'], ['imagemin']);
});

做一个min的task就好，只需要gulp min。

gulp.task('min',['html','script','css','imagemin']);