NPM 包 gulp-newer 使用教程

在前端开发中,自动化构建是提高工作效率、减少出错率的重要手段之一。而 Gulp 作为前端自动化构建工具的代表之一,具有易学易用、插件丰富等优点,被越来越多的前端开发者所采用。gulp-newer 就是其中一个 Gulp 插件,它可以让我们只编译修改过的文件,从而加快构建速度,节省时间。

安装

在使用 gulp-newer 之前,需要确保已经安装了 Node.js 和 Gulp,并在项目目录下初始化了 package.json 文件。接下来,在命令行中运行以下命令进行安装:

--- ------- ---------- ----------

使用方法

基本使用

首先,在 Gulpfile.js 中引入 gulp-newer:

----- ----- - ----------------------

然后,通过 gulp.src() 方法获取需要编译的文件,再将其传入 newer() 方法中:

-------------------- -------- -- -
  ------ -----------------------
    --------------------
    -------------------------
---

上述代码中,newer() 方法会根据指定的文件夹路径('dist')查找该文件夹中已存在的文件,然后将 gulp.src() 获取到的文件与其进行比对,只编译修改过的文件。最后,使用 gulp.dest() 方法将编译完成的文件输出到指定文件夹('dist')。

高级使用

指定比对时间

有时候我们需要比对的不是文件是否存在,而是文件的修改时间。在这种情况下,可以通过传递一个对象作为参数来实现:

-------------------- -------- -- -
  ------ -----------------------
    -------------
      ----- -------
      ---- -------- -------------- -
        ------ ------ - -------------
      -
    ---
    -------------------------
---

其中,dest 参数依然指定了比对的文件夹路径,map 参数则指定了如何把 gulp.src() 获取到的文件路径转换成比对的文件路径。上述代码中,map 函数会将所有文件的路径前面添加 'src/' 前缀,然后再与 dest 参数组合起来形成目标路径。

指定比对方式

除了默认的 "modification time" 模式外,gulp-newer 还支持 "content hash" 模式和 "stat" 模式。在 "content hash" 模式下,gulp-newer 会通过计算文件内容的哈希值来判断是否需要编译。在 "stat" 模式下,则会比对文件的 stat 对象,以确保文件内容没有变化。可以通过 options.mode 属性来指定比对模式:

-------------------- -------- -- -
  ------ -----------------------
    -------------
      ----- -------
      ----- -------------
    ---
    -------------------------
---

示例代码

以下是一个简单的 Gulpfile.js 文件,演示了如何使用 gulp-newer 来只编译修改过的文件:

----- ---- - ----------------
----- ----- - ----------------------

-------------------- -------- -- -
  ------ -----------------------
    --------------------
    -------------------------
---

------------------ -------- -- -
  ------------------------- -------------
---

-------------------- -----------

在命令行中运行 gulp 命令即可启动监听模式,每当源文件发生修改时,gulp-newer 会自动进行比对,只编译修改过的文件。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/51943


猜你喜欢

  • npm 包 babylon 使用教程

    简介 babylon 是一个 JavaScript 解析器,它可以将 JavaScript 代码解析为抽象语法树(Abstract Syntax Tree,AST)。

    6 年前
  • npm包to-fast-properties使用教程

    简介 to-fast-properties是一个npm包,它能够帮助JavaScript开发人员在性能方面进行优化。该包可以强制一个对象转换为“快速属性”模式,这样可以加快对象的访问速度。

    6 年前
  • npm 包 babel-types 使用教程

    简介 babel-types 是 Babel 编译器的一个 npm 包,用于处理和生成 AST(抽象语法树)节点。AST 是一种描述代码结构的数据结构,它将源代码转换为 JavaScript 对象,从...

    6 年前
  • npm 包 babel-code-frame 使用教程

    什么是 babel-code-frame? babel-code-frame 是一个 npm 包,它可以为 Babel 编译器生成的错误消息提供更好的上下文。当编译器发现错误时,它通常只会提供一个模糊...

    6 年前
  • npm 包 trim-right 使用教程

    在前端开发中,我们经常需要对字符串进行处理。其中一个常见的处理方式是去除字符串末尾的空格和换行符。而 trim-right 就是一个方便实用的 NPM 包,可以轻松地完成这个任务。

    6 年前
  • npm 包 babel-generator 使用教程

    在前端开发中,我们经常需要将 ES6+ 代码转换为 ES5 以兼容旧版本浏览器。Babel 是一个广泛使用的 JavaScript 编译器,它将新版本的 JavaScript 代码转换为可以在旧版浏览...

    6 年前
  • npm 包 invariant 使用教程

    在前端开发中,有时我们需要进行断言(assertion)来确保代码的正确性。通常情况下,我们可以使用 JavaScript 的原生断言函数 console.assert 来实现。

    6 年前
  • npm 包 enhance-visitors 使用教程

    简介 enhance-visitors 是一个用于增强访客体验的 npm 包,它支持在网页中添加动态效果、交互功能等,以提升用户的使用感受。本文将介绍如何安装和使用 enhance-visitors。

    6 年前
  • npm 包 js-combinatorics 使用教程

    简介 js-combinatorics 是一个用于生成排列和组合的 JavaScript 库,它提供了多种方法来生成不同类型的排列和组合,包括重复元素、有序元素和无序元素。

    6 年前
  • npm 包 eslint-plugin-ava 使用教程

    介绍 eslint-plugin-ava 是一个 ESLint 插件,用于检查 AVA 测试框架中的代码规范。该插件可以帮助开发者在编写测试代码时保持一致的风格和可读性。

    6 年前
  • npm 包 eslint-formatter-pretty 使用教程

    简介 eslint-formatter-pretty 是一个开源的 npm 包,它可以美化 ESLint 的输出结果,让 ESLint 报告更加易读且清晰。本文将介绍如何使用 eslint-forma...

    6 年前
  • 使用 ESLint-config-xo 包来更好地管理您的代码风格

    在编写高质量 JavaScript 代码时,保持一致的编码风格是非常重要的。ESLint 是一个流行的 JavaScript 代码检查工具,可以帮助开发者规范自己的代码风格并避免潜在的错误。

    6 年前
  • npm 包 eslint-config-prettier 使用教程

    在前端开发过程中,代码质量和风格的统一是非常重要的,而 ESLint 和 Prettier 是最常用的代码检测工具。但是,它们的配置可能会有些麻烦,这时候就需要引入 eslint-config-pre...

    6 年前
  • 使用lodash.mergewith npm包的教程

    当我们需要把两个或多个JavaScript对象合并成一个时,Lodash是非常有用的工具库之一。其中,lodash.mergewith这个npm包提供了更为高级的对象合并方式,可以让我们精确地控制合并...

    6 年前
  • npm 包 lodash.isequal 使用教程

    介绍 lodash.isequal 是一款 JavaScript 工具库 Lodash 的一个子模块,用于比较两个值是否相等。相比于 JavaScript 原生的 === 操作符,在深度比较对象和数组...

    6 年前
  • npm包 has-flag 使用教程

    简介 在编写Node.js命令行脚本时,我们通常会使用process.argv获取命令行参数。但这种方法有一个缺陷:它无法检测是否存在某个标志(flag)。例如,你的脚本可能需要某个布尔值的标志,而不...

    6 年前
  • npm 包 dir-glob 使用教程

    dir-glob 是一个非常方便的 Node.js 模块,可以用于匹配一组文件或目录。本篇文章将介绍如何使用 dir-glob 包来进行文件匹配。 安装 你可以通过 npm 在你的项目中安装 dir-...

    6 年前
  • npm 包 globby 使用教程

    介绍 globby 是一个用于 Node.js 环境下的文件和目录匹配工具,它可以帮助开发者快速、方便地搜索指定的文件和文件夹。globby 的特点是支持多种匹配模式,比如使用通配符 *、? 等等,而...

    6 年前
  • npm 包 get-stdin 使用教程

    get-stdin 是一个 npm 包,用于从标准输入流中读取数据。在前端开发中,有时需要从用户的输入中读取数据并进行处理,这时 get-stdin 可以帮助我们轻松地实现这一功能。

    6 年前
  • npm 包 clean-regexp 使用教程

    clean-regexp 是一款能够帮助前端工程师快速生成正则表达式的 npm 包,它能够自动将常见的字符串转换为相应的正则表达式。本篇文章将详细介绍 clean-regexp 的使用方法,以及如何在...

    6 年前

相关推荐

    暂无文章