gulp API

https://www.gulpjs.com.cn/docs/api/   gulp文档网址

gulp是前端开发过程中对代码进行构建的工具，可以自动化构建项目；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp  自动刷新，自动编译

1）易于使用：通过代码由于配置的策略，Gulp让简单的任务简单，复杂的任务可管理。

2）构建快速：利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。

3）插件高质：Gulp严格的插件指南确保插件如你期望的那样简洁高质得工作。

4）易于学习：通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握：如同一系列流管道。

写gulp代码，首先打开gulpfile.js       输入var gulp= require(‘gulp’); 这里是创建一个gulp对象，根据这个gulp对象开始操作的(不理解没关系)，必须有这一步.src, .watch, .dest, CLI 参数 - 我该怎么去用这些东西呢？

gulp 常用命令：

* 代表所有文件

**0个或者多个子文件夹

{ } 匹配多个属性

！ 排出文件

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

使用task定义一个任务目标，里面有三个参数，(任务名称，类型，执行的函数)，当第二个参数为数组时，表明此任务存在依赖任务，会运行完依赖任务后，才执行该任务

gulp.('mytask', ['array', 'of', 'task', 'names'], function() { // 做一些事});

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

• 给出一个提示，来告知 task 什么时候执行完毕，
• 并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

二、gulp.src(globs[, options])

读取你所需要的文件

src/{a,b}.js     指的是src下的a.js 或者b.js

!src/a.js        指的是排除a.js

buffer  块     options.buffer

read     读     options.read            默认为true如果是false则不会读取

1. globs是一个匹配模式，如gulpfile.js中写的 gulp.src(‘./src/css/*.css’)
2. ‘./src/css/*.css’匹配同层路径下src目录下的css目录下的所有以.css结尾的文件（更多的匹配模式可以参考官方文档。）
3. globs类型：String 或者 Array。string则说明它匹配单一模式。array表示它可以传入数组多个匹配字段，举个栗子 
   1）[‘./src/css/index.css’,’./src/css/main.css’]
4. [options]是可选的。主要是两个，options.base—-匹配的根目录，options-read，举个栗子： 
   1)这个得等学会gulp.dest() 这个API后才能具体说明。

三、gulp.dest(path[, options])

用来写文件，如果能被pipe进来将会被重写文件。path为写入文件的路径；options为可选参数，通常用不到。dest   指的是输出

1、第一个参数path :  String或者Function

        string-------输出文件的目标路径（或目录）'./dist/css'

        function------将接收一个viny1文件实例化作参数

２、第二个参数options有两个属性options.cwd和options.mode

        options.cwd 用于计算输出目录，只有提供的输出目录是相对路径时此参数才有用

        options.mode 用于创建的输出目录制定权限，默认077

３、注意：想使用gulp.src的一些属性参数得先学会gulp.dest()这是因为源的参数设定（即输入端）会影响输出端。

        gulp.dest()的作用是将目的地址(gulp .dest())的基础路径（base）替换成源地址(gulp.src())的基础路径（base）输出

４、那么什么是基础路径base?

        gulp.src("./src/css/*.css/*.css")中有第二个参数base，可以指定基础路径，如果不设置，则默认基础路径为*之前的路径。

        那么输出：base:"./src/css"

        如果设置了gulp.src("./src/css/*.css/*.css",{base : ' . / '}),则base下的"./",gulp.dest('./dist/css')传入的参数就是base路径

        <  font color=red>5   >那么输出：base:'./dist/css'</font>

５、举个例子替换是什么：

        gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'));

        那么最后文件处理完的最终路线是：./dist/css/*.css

        如果是：gulp.src('./src/css/*.css',{base:' ./ '}).pipe(gulp.dest('./dist/css'));

        那么最后文件处理完的最终路径是：./dist/css/src/css/*.css

四、gulp.wartch(glob[,opts],tasks)或者gulp.watch(glob[,opts,cb])

用来监视文件的变化，监控符合变动的文件

glob为要监视的文件匹配模式；opts为一个可选的配置对象，通常不用。tasks为文件变化后要执行的任务，为一个数组

五、gulp.pipe(gulp_concat("index.min.css"))

1、pipe（）方法是把一个文件流输入，通过pipe管道输出（下一个处理程序可以把上一级输出的流文件当做输入） 
2、这样可以实现文件流的高效处理,我认为这种方法很像jquery的写法。能够进行链式调用处理 
3、那么毫无疑问，第三段的代码.pipe(gulp_concat(“index.min.css”))的意思就是： 
1）把获取到匹配gulp.src()字段的文件通过pipe管道进入插件gulp_concat()的处理程序，并且合并后的文件名为index.min.css 
2）这里插件gulp_concat是文件合并的插件，详细的使用方法请在gitbub或者npm网站中找到相关的api文档

其中有很多插件

            ***gulp-sass 用于将 Sass 文件编译为 CSS 文件

            ***gulp-autoprefixer 根据浏览器版本自动处理添加浏览器前缀

            ***browser-sync 能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面

            ***