gulp之插件、监控、api使用

2019-10-16 本文已影响0人 stillpeng

一、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意外的所有事件。