gulp常用插件之gulp-notify使用

更多gulp常用插件使用请访问：gulp常用插件汇总


gulp-notify这是一款gulp通知插件。

更多使用文档请点击访问gulp-notify工具官网。

安装

一键安装不多解释

npm install --save-dev gulp-notify

使用

例1：

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Hello Gulp!"));

例2：

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Found file: <%= file.relative %>!"));

有关更多输入，请参见示例，或参见API部分。

注释/提示
即使出错，gulp-notify也会传递vinyl files 。因此，如果您使用的是gulp-plumber，如果通知程序返回错误，则运行不会中断。
如果你想通知错误，可以使用gulp-plumber不中断运行，迫使你不得不重新启动gulp。
您可以使用notify.onError()作为gulp-plumber的errorHandler，如下所示：

gulp.src("../test/fixtures/*")
      .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }));

API

  • notify(String)
    用于通知流中每个数据的消息。字符串可以是lodash模板，因为它通过gulp-util.template传递。
  • notify(Function)
    类型： function(VinylFile)
    来自gulp流的Vinyl File作为参数传入。
    该函数的结果可以是用作消息的字符串或选项对象（请参见下文）。如果返回值是一个字符串，则它可以是lodash模板，因为它是通过gulp-util.template传递的。
    如果false从函数返回，则通知将不会运行。
  • notify(options)

    选项传递到报告程序上，因此在Windows上，您可以定义Growl主机，在Mac上，您可以传递contentImage，依此类推。
    有关 所有选项，请参阅节点通知程序

    默认通知值：

    • 定期通知的Gulp徽标
    • 错误时倒置了Gulp徽标
    • 在Mac上，青蛙声音错误。

    另请参见高级示例。

    • options.onLast
      类型：Boolean
      默认值：false
      如果通知仅应在流的最后一个文件上发生。默认情况下，每个文件都会触发通知。
  • options.emitError
    类型：Boolean
    默认值：false
    返回的流是否应该发出错误。如果emitError为true，则必须.on(‘error‘) 手动处理，以防通知程序（gulp-notify）失败。如果false设置了默认值，则不会发出错误，而只是将其打印到控制台。
    这意味着您可以在CI系统上运行通知程序，而无需选择退出，而只是让其正常地失败。
  • options.message
    类型：String
    默认：流中的文件路径
    您希望附加到文件的消息。字符串可以是lodash模板，因为它通过gulp-util.template传递。
    范例：Created <%= file.relative %>。
  • 作为功能函数
    类型： Function(vinylFile)
    请参阅notify(Function)。
  • options.title
    类型：String
    默认：“ Gulp通知”
    通知的标题。字符串可以是lodash模板，因为它通过gulp-util.template传递。
    范例：Created <%= file.relative %>。
  • 作为功能函数
    类型： Function(vinylFile)
    请参阅notify(Function)。
  • options.templateOptions
    类型：Object
    默认值：{}
    传递给lodash模板的对象，用于传递给模板的其他属性。
gulp.src("../test/fixtures/*")
    .pipe(notify({
      message: "Generated file: <%= file.relative %> @ <%= options.date %>",
      templateOptions: {
        date: new Date()
      }
    }))
  • options.notifier
    类型：Function(options, callback)
    默认：node-notifier模块
    通过传入函数来交换通知程序。该函数需要两个参数：options和callback。
    通知完成后必须调用回调。选项将同时包含标题和消息。
    请参阅notify.withReporter语法糖。

notify.on(event, function (notificationOptions)) - Events
如果该wait选项设置为true，则通知者将触发事件click或timeout，无论用户单击通知还是超时。您在主通知对象（而不是产生流）上侦听这些事件。

var notify = require('gulp-notify');

notify.on('click', function (options) {
  console.log('I clicked something!', options);
});

notify.on('timeout', function (options) {
  console.log('The notification timed out', options);
});

gulp.task("click", function () {
  return gulp.src("some/glob/**")
    .pipe(notify({ message: 'Click or wait', wait: true }));
});

notify.withReporter(Function)
类型： Reporter
包装options.notifier仅使用传入的报告程序返回新的通知功能。

例：

var custom = notify.withReporter(function (options, callback) {
  console.log("Title:", options.title);
  console.log("Message:", options.message);
  callback();
});

gulp.src("../test/fixtures/1.txt")
    .pipe(custom("This is a message."));

这将与

gulp.src("../test/fixtures/1.txt")
    .pipe(notify({
      message: "This is a message."
      notifier: function (options, callback) {
        console.log("Title:", options.title);
        console.log("Message:", options.message);
        callback();
      }
    }));

但是，很多漂亮。

notify.onError（）

与using完全相同的API notify()，但是在vinyl File 传递a的地方，传递错误对象。

例：

gulp.src("../test/fixtures/*")
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }))
      .on("error", notify.onError(function (error) {
        return "Message to the notifier: " + error.message;
      }));

或者简单地：

gulp.src("../test/fixtures/*")
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }))
      .on("error", notify.onError("Error: <%= error.message %>"));
gulp.src("../test/fixtures/*")
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }))
      .on("error", notify.onError({
        message: "Error: <%= error.message %>",
        title: "Error running something"
      }));

在onError()终点不支持lodash.template。
onError()会自动为您结束视频流。使观看更加轻松。

notify.logLevel(level)
类型：Integer
默认值：2
设置是否使用记录器。如果日志级别设置为0，将不使用任何日志记录。如果未传递新的日志级别，则返回当前日志级别。

  • 0：无日志记录
  • 1：登录错误
  • 2：记录错误和常规通知。
    如果将logging设置为> 0，则将记录标题和传递给的消息，gulp-notify如下所示：
?  gulp-notify git:(master) ? gulp --gulpfile examples/gulpfile.js one
[gulp] Using file /Users/example/gulp-notify/examples/gulpfile.js
[gulp] Working directory changed to /Users/example/repos/gulp-notify/examples
[gulp] Running 'one'...
[gulp] Finished 'one' in 4.08 ms
[gulp] gulp-notify: [Gulp notification] /Users/example/gulp-notify/test/fixtures/1.txt

禁用 gulp-notify
如果您运行的系统处理通知的能力很差，或者只是不想使用，gulp-notify而您的项目可以呢？您可以gulp-notify使用环境变量禁用它DISABLE_NOTIFIER。

export DISABLE_NOTIFIER=true;

这将禁用所有方法。notify()，notify.onError和notify.withReporter。

例子：
要查看从根目录运行的所有示例：

$ gulp --gulpfile examples/gulpfile.js --tasks
[gulp] Using file /Users/example/gulp-notify/examples/gulpfile.js
[gulp] Working directory changed to /Users/example/gulp-notify/examples
[gulp] Tasks for /Users/example/gulp-notify/examples/gulpfile.js
[gulp] ├── multiple
[gulp] ├── one
[gulp] ├── message
[gulp] ├── customReporter
[gulp] ├── template
[gulp] ├── templateadv
[gulp] ├── function
[gulp] ├── onlast
[gulp] ├── advanceMac
[gulp] ├── error
[gulp] ├── forceGrowl
[gulp] └── customError

运行示例：

$ gulp --gulpfile examples/gulpfile.js multiple
[gulp] Using file /Users/example/gulp-notify/examples/gulpfile.js
[gulp] Working directory changed to /Users/example/gulp-notify/examples
[gulp] Running 'multiple'...
[gulp] Finished 'multiple' in 3.75 ms

作为jshint报告员

gulp-notify可以轻松用作jshint报告程序。当jshint在乙烯基文件上公开结果时，我们可以在如下函数中使用它们：

gulp.task('lint', function() {
  gulp.src('/src/**/*.js')
    .pipe(jshint())
    // 使用gulp-notify作为jshint报告器
    .pipe(notify(function (file) {
      if (file.jshint.success) {
        // 不显示的东西，如果成功
        return false;
      }

      var errors = file.jshint.results.map(function (data) {
        if (data.error) {
          return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason;
        }
      }).join("\n");
      return file.relative + " (" + file.jshint.results.length + " errors)\n" + errors;
    }));
});

如果您在中使用消息功能gulp-notify，则不会显示该消息。直接使用function和都是如此{ message: function () {}}。

原文地址：https://www.cnblogs.com/jiaoshou/p/12185392.html

时间： 2024-10-11 20:57:13

gulp常用插件之gulp-notify使用的相关文章

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问:gulp常用插件汇总 wiredep这是一款gulp插件,能够将js.css文件自动插入到html中. 更多使用文档请点击访问wiredep工具官网. Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源. 详细信息请参考bower官网. 原文地址:https://www.cnblogs.com/jiaoshou/p/12021159.html

gulp常用插件之gulp-plumber使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-plumber这是一款防止因gulp插件的错误而导致管道中断,plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志. 更多使用文档请点击访问gulp-plumber工具官网. 安装 npm install --save-dev gulp-plumber 使用 var plumber = require('gulp-plumber'); var coffee = require('gulp-coffee'); gu

gulp常用插件之gulp-sourcemaps使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-sourcemaps这是一款用来生成映射文件的一个插件,SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件.我们在调试时都是没办法像调试源码般轻松,这就需要 SourceMap 帮助我们在控制台中转换成源码,从而进行 debug. gulp-sourcemaps在前端的工作中主要是用来解决以下三个方面出现的 debug 问题: 代码压缩混淆后 利用 sass .typeScript 等其他语言编译成 css

gulp常用插件之gulp-useref使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数.gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并.注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if插件使用. 更多使用文档请点击访问gulp-useref工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-

gulp常用插件之gulp-rev-collector使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. 更多使用文档请点击访问gulp-rev-collector工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-rev-collector 使用 我们可以使用gulp-rev来缓存破坏多个资产并为其生成清单文件.然后,使用gulp-rev-collector,

gulp常用插件之gulp-filter使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-filter这是一款可以把stream里的文件根据一定的规则进行筛选过滤. 更多使用文档请点击访问gulp-filter工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-filter 使用 gulp.src中传入匹配符匹配了很多文件,可以把这些文件pipe给gulp-filter做二次筛选.如:gulp.src('**/*.js').pipe($.filter(**/a/*.js)),本来选

gulp常用插件之gulp-inject使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件流,将每个文件转换为字符串,并将每个转换后的字符串注入目标流文件中的占位符. 更多使用文档请点击访问gulp-inject工具官网. 同样是利用注释来寻找插入的位置,它识别的默认注释为,但更加智能: 支持各种模板语言:可以根据gulp.src指定的源文件自动识别注释和插入内容,除了支持HTML外,还

gulp常用插件之gulp-rev-rewrite使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-rewrite这是一款重写对由gulp-rev修订的资产的引用. 更多使用文档请点击访问gulp-rev-rewrite工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-rev-rewrite 使用 最常见的使用模式包括两个步骤: 修改资产并创建资产清单. 从清单中收集修订的路径并重写对它们的引用 const { src, dest, series } = require('gulp

gulp常用插件之rev-del使用

更多gulp常用插件使用请访问:gulp常用插件汇总 rev-del这是一款从模块(如gulp-rev)生成的修订清单中删除旧的.未使用的指纹文件. 更多使用文档请点击访问rev-del工具官网. 安装 一键安装不多解释 npm install --save-dev rev-del 使用 revDel({ oldManifest: 'rev-manifest.json', newManifest: { /* 清单 */ }, suppress: true, deleteMapExtensions