Gulp学习(2)使用插件、文件监控

使用插件
Gulp插件实质上是Node转换流(Transform Streams)

它封装了通过管道(pipeline)转换文件的常见功能
  通常是使用.pipe()方法并放在src()和dest() 之间

每个插件应当只完成必要的工作，获得想要的结果可能需要把一组插件组合在一起使用
  
  例如:
    var gulp = require('gulp');
    var cssnano = require('gulp-cssnano');

    gulp.task('css',async function(){
      await gulp.src(["./src/css/*.css","./src/scss/*.css"])
      .pipe(cssnano())
      .pipe(gulp.dest('./dist/css/'));
    })

注意；
  并非 gulp 中的一切都需要用插件来完成
  虽然它们是一种快速上手的方法，但许多操作都应当通过使用独立的功能模块或库来实现

插件应当总是用来转换文件的
其他操作都应该使用（非插件的） Node 模块或库来实现。

1、条件插件
因为插件的操作不应该针对特定文件类型,因此你可能需要使用像gulp-if 之类的插件来完成转换某些文件的操作
例如:
var gulp = require(‘gulp’);
var gif = require(‘gulp-if’);
var cssnano = require(‘gulp-cssnano’);

  function is_css(file){
    return file.extname === '.css'
  }

  gulp.task('css',async function(){
    await gulp.src(["./src/css/*.css","./src/scss/*.css","./src/js/*.js"])
    .pipe(gif(is_css,cssnano()))
    .pipe(gulp.dest('./dist/css/'));
  })

2、内联插件(Inline plugins)
内联插件是一次性的转换流(Transform Streams)

在两种情况下，创建内联插件很有用：
(1)避免自己创建并维护插件。
(2)避免 fork 一个已经存在的插件并添加自己所需的功能。

文件监控
gulp的api中的watch()方法利用文件系统的监控程序(file system watcher)将globs与任务(task)进行关联
它对匹配glob的文件进行监控
如果有文件被修改了就执行关联的任务(task)
如果被执行的任务(task)没有触发异步完成信号,它将永远不会再次运行了

此API的默认设置是基于通常的使用场景的,而且提供了内置的延迟和排队机制

可监控的事件:
默认情况下,要创建、更改或删除文件,文件监控程序就会执行关联的任务(task)
如果你需要使用不同的事件,你可以在调用watch()方法时通过events参数进行指定
可用的事件有’add’、‘addDir’、‘change’、‘unlink’、‘unlinkDir’、‘ready’、‘error’
此外,还有一个’all’事件,它表示除’ready’和’error’之外的所有事件

初次执行
调用watch()之后,关联的任务(task)是不会被立即执行的,而是要等到第一次文件修之后才执行

如需在第一次文件修改之前执行,也就是调用watch()之后立即执行,将ignoreInitial参数设置为false

例如:
  var gulp = require('gulp');
  var gif = require('gulp-if');
  var cssnano = require('gulp-cssnano');

  function is_css(file){
    return file.extname === '.css'
  }

  gulp.task('css',async function(){
    await gulp.src(["./src/css/*.css","./src/scss/*.css","./src/js/*.js"])
    .pipe(gif(is_css,cssnano()))
    .pipe(gulp.dest('./dist/css/'));
  })

  gulp.task('watch', function(){
    gulp.watch("./src/css/*.css", { ignoreInitial: false } ,gulp.series("css"));
  });

  gulp.task('default', gulp.parallel("watch"));

队列:
watch()方法能够保证当前执行的任务(task)不会再次并发执行
当文件监控程序关联的任务(task)正在运行时又有文件被修改了
那么所关联任务的这次新的执行将被放到执行队列中等待
直到上一次关联任务执行完之后才能运行
每一次文件修改只产生一次关联任务的执行并放入队列中

如需禁止队列，请将 queue 参数设置为 false
例如:
  var gulp = require('gulp');
  var gif = require('gulp-if');
  var cssnano = require('gulp-cssnano');

  function is_css(file){
    return file.extname === '.css'
  }

  gulp.task('css',async function(){
    await gulp.src(["./src/css/*.css","./src/scss/*.css","./src/js/*.js"])
    .pipe(gif(is_css,cssnano()))
    .pipe(gulp.dest('./dist/css/'));
  })

  gulp.task('watch', function(){
    gulp.watch("./src/css/*.css", { ignoreInitial: false, queue: false } ,gulp.series("css"));
  });

  gulp.task('default', gulp.parallel("watch"));

延迟
文件更改之后,只有经过200毫秒的延迟之后,文件监控程序所关联的任务(task)才会被执行
这是为了避免在同使更改许多文件时(例如查找和替换操作)过早启动任务(task)的执行

如需调整延迟时间，请为 delay 参数设置一个正整数
 例如:
  var gulp = require('gulp');
  var gif = require('gulp-if');
  var cssnano = require('gulp-cssnano');

  function is_css(file){
    return file.extname === '.css'
  }

  gulp.task('css',async function(){
    await gulp.src(["./src/css/*.css","./src/scss/*.css","./src/js/*.js"])
    .pipe(gif(is_css,cssnano()))
    .pipe(gulp.dest('./dist/css/'));
  })

  gulp.task('watch', function(){
    gulp.watch("./src/css/*.css", { ignoreInitial: false, queue: false,delay: 250 } ,gulp.series("css"));
  });

  gulp.task('default', gulp.parallel("watch"));