gulp速度上手

•这个工具时候目前前端开发最火爆的工具之一。我们暂时不用去理解它全部功能，跟着我们的实战列子来学习即可。
1，安装
•1、npm install -g gulp
•2、npm install gulp —save-dev（在当前项目也要装一次,因为过会我们要require(“gulp”)
•然后在终端执行gulp -v 如果一切正常则OK了。
•我们进行接下来的学习
•(—save-dev是你开发时候依赖的库，—save是你发布之后还依赖的库）

2，Gulp配置文件
•要正确运行需要首先建立一个配置文件。
•在当前项目目录下创建gulpfile.js
•注意，这个所谓的配置文件是可以写代码的。不是像文本配置文件那样
gulpfile.js文件名是固定的

3，学习第一个方法
•var gulp=require(“gulp”); //这个在哪？再想想
•gulp.task(‘任务名’,function(){
• //这里执行一些事
•});
•然后打开终端，执行gulp 任务名.它会自动读取你的 配置文件，执行你的任务。
代码块：

var gp=require("gulp");
gp.task("task1",function(){  
    console.log("i am gulp");
})

gulp task1 运行

发现报错

[10:54:46] The following tasks did not complete:task1
[10:54:46] Did you forget to signal async completion?

出错原因
因为任务可能包含异步代码，所以必须在任务完成执行时发出信号（“异步完成”）。
在“Gulp3.x”中，你可以不做这个就离开。如果您没有显式地发出异步完成的信号，那么Gulp只会假定您的任务是同步的，并且一旦您的任务函数返回，它就完成了。Gulp4.x在这方面更严格。你必须明确地发出任务完成的信号。

解决方法
调用回调函数
对于我的用例来说，这是最简单的方法：gulp自动将回调函数作为第一个参数传递给我的任务。完成后调用该函数 done()

代码

var gp=require("gulp");
gp.task('task1',done=>{  
    console.log("i am gulp");
    done()
})

通过gulp收集和管道函数来整理前端代码
先来理解下src和pipe函数
•gulp.src([文件1,文件2,文件3])，用来”收集”源文件形成“虚拟文件对象流”（术语听不懂请飘过，没必要立刻懂)
•
•然后通过“管道”函数pipe传给它另外一个写文件的函数dest

Gulp里面管道的用法

•gulp.src([“1.js”,”2.js”].pipe(gulp.dest(“文件夹名”))
•请大家试一下•
•还能用通配符
• gulp.src([“*.js”,”!2.js”].pipe(gulp.dest(“文件夹名”))
•!时候排除的意思

通配符

•“”：匹配所有文件 例：shenyi/.js(包含shenyi下的所有js文件)
•
•“”：匹配0个或多个子文件夹 例：shenyi//.js(包含shenyi的0个或多个子文件夹下的js文件)
•
•“{}”：匹配多个属性 例：{a,b}.js(包含a.js和b.js文件) src/.{jpg,png,gif}(src下的所有jpg/png/gif文件)
•
•“!”：排除文件 例：!a.js(不包含a.js文件)
实践代码：

var gp=require("gulp");
gp.task('task1',done=>{
    gp.src(['*.js','!gulpfile.js']).pipe(gp.dest('./build/js'));    // 
    gp.src(['*.css']).pipe(gp.dest('./build/css'));
    done()
})

将除了gulpfile以外的所有js文件通过dest管道函数放到build/js里， 将所有css文件放到build/css里，会自动创建build/js css文件夹，如我的生成后的目录