用gulp构建一个简单常用的的环境

摘要：简单做点通俗的讲解。如果你想要创建一个序列化的队列，并以特定的顺序执行，嗯，戳文档文档。自然是表示任意，全部。到这里，其实就是一个小规模的调试环境，接下来，让我们升级一下，开始构造简单的发布环境压缩采用的是插件。做一个的就好，只需要。

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

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

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

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

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

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

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

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

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

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

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

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

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

生成处理好的文件。
你可以将它 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, 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就好,让他们依次执行。

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

采用的是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());
});

采用的是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());
});

采用的是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在前面有讲到，其实就是开启监听，并重新执行各个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"]);