一、gulp插件的使用

    |--插件的实质：gulp插件的实质是Node转换流，它封装了-通过管道（pipeline）转换文件的常见功能。
    |--使用方法：使用.pipe()方法，放在.src()和dest()之间，他们可以更改经过流的每一个文件的文件名、
    元数据或文件内容。
    |--gulp的插件有很多，可在npm进行查找，每一个插件只完成指定的工作，可以把很多插件组合一起使用。
    |--安装插件：npm install --save-dev 插件名
    |--示例1：
        |--安装插件：压缩文件（gulp-uglify）和文件重命名（gulp-rename）插件

安装压缩文件插件

安装重命名插件

package.json

        |--压缩指定js文件，并将压缩和修改扩展名后的js文件存放在指定文件夹下：

压缩一个自己封装的ajax.js文件

报错！！！！！！why

        |--看看我要压缩的文件ajax.js，为什么要弄一个错误案例，因为涉及到另一个插件，就顺便解决一下。

ajax.js

        |--因为在es5环境中用到了es6或es7语法，就会报错，安装插件babel模块，进行解决。

安装babel模块

修改后的gulpfile.js

        |--执行gulp命令，结果：

压缩、重命扩展名成功！

    |--示例2：条件插件gulp-if，作用是因为插件的操作不应该针对特定文件类型，因此你可能需要使用像
    gulp-if插件来完成转换某些文件的操作。
        |--安装gulp-if插件：

安装gulp-if

        |--在同一个管道下，处理js和css文件，通过条件判断只压缩css文件
            |--安装压缩css插件

压缩css插件

            |--引入压缩css插件

引入

            |--使用gulp-if和gulp-clean-css组合处理，判断只处理css文件，对css文件进行压缩

判断并压缩css

            |--结果：

压缩成功

没有都js操作，但是生成到了新目录

二、文件监控

    |--定义：gulp的api提供了watch()方法，利用文件系统的监测程序（file system watcher）将globs和任务task
    进行关联。对匹配glob的文件进行监控，如果有文件被修改了就会执行关联的任务。如果被执行的task没有
    触发异步完成信号，它将永远不会再运行了。
    |--用法：

可以只关联一个任务，或任务组合

    |--注意：
        |--1.不能监控同步任务，因为你将同步任务关联到监控程序，则无法确定任务的完成情况，任务将不会再
           次运行（假定当前正在运行）。
        |--2.调用watch()之后，关联的任务不会立即执行，而是等到第一次文件修改后才执行，如果需要第一次
           修改文件之前执行，也就是调用watch立即执行，设置watch('src/*.js',{ignoreInitial:false},task)
        |--3.watch() 方法能够保证当前执行的任务不会再次并发执行。当文件监控程序关联的任务正在运行时又有
           文件被修改了，那么所关联任务的这次新的执行将被放到执行队列中等待，直到上一次关联任务执行完
           之后才能运行。每一次文件修改只产生一次关联任务的执行并放入队列中。如果想要禁用队列，设置：
           watch('src/*.js',{queue:false},task)
        |--文件更改之后，只有经过 200 毫秒的延迟之后，文件监控程序所关联的任务才会被执行。这是为了避
           免在同使更改许多文件时（例如查找和替换操作）过早启动任务（taks）的执行。如果需要修改延迟
            时间，设置： watch('src/*.js',{delay:2000},task),单位毫秒。
    |--可监控的事件：
        |--1.默认只要创建、更改、删除文件，文件监控程序就会执行关联任务。
        |--2.如果需要使用不同事件，可以再watch方法中传递events参数：
            |--add
            |--addDir
            |--change
            |--unlink
            |--unlinkDir
            |--ready
            |--error
            |--all：除ready和error意外的所有事件。

三、gulp Api及常用插件使用

    |--Task1：将less文件转为css文件。
        |--安装插件：gulp-less

安装gulp-less

        |--使用：

gulpfile.js

        |--效果：

处理前

处理后

    |--Task2：复制文件

复制文件

文件目录

    |--Task3：压缩js文件
        |--安装插件gulp-uglify：压缩js插件

安装gulp-uglify插件

        |--安装插件gulp-rename：安装重命名文件，常用于修改压缩后文件的扩展名（.min.js）

安装gulp-rename插件

        |--安装插件gulp-babel模块：用于支持es6,7,8语法：

安装gulp-babel模块

        |--插件安装完毕：

准备就绪

        |--创建压缩js的task：

gulpfile.js中引入用到的插件

压缩js任务

        |--输出结果：

js压缩成功！

    |--Task4：压缩css文件
        |--安装压缩css插件：gulp-clean-css

安装压缩css插件

        |--创建任务：

引入插件

创建压缩css任务

        |--输出结果：

压缩成功！！

    |--添加监听：添加监听，针对src/index.less进行一个监听，当有修改的时候，执行less转css操作。

监听index.less

        |--修改index.less文件内容：

添加h2代码块

        |--自动指定了task1，对less进行了转换为css：

转换成功

    |--Task5：图片压缩
        |--安装图片压缩插件：下面都可以
            |--gulp-tinypng-nokey
            |--gulp-imagemin
            |--gulp-tony-imgmin：以这个举例

安装

        |--创建任务：

引入插件

压缩图片任务

        |--输出结果：

压缩后

    |--Task6：压缩html文件
        |--安装插件：gulp-htmlmin

安装插件

        |--创建任务：去除空白

压缩html任务

        |--执行结果：

文件内容

压缩前大小

压缩后大小

    |--Task7：压缩处理后的文件，生成zip
        |--安装插件：gulp-zip

安装gulp-zip插件

        |--创建任务：压缩整个文件夹，生成zip文件

生成zip文件

        |--输出结果：

zip文件

解压缩后-common下所有文件

    |--这里罗列的就是一些简单的插件，和常用的几个任务，主要是让大家对gulp有个简单的熟知，内容都比较简单，只写个初学者，当然我也是初学者，希望可以一起交流。