npm 包 gulp-path 使用教程

阅读时长 4 分钟读完

前言

前端开发中,我们总会遇到需要对多个文件进行处理的情况,比如合并、压缩、重命名等操作。而 gulpgulp 相关的插件,就是专门用来解决这类问题的工具集。

本文介绍的 gulp-pathgulp 相关插件之一,主要用于获取文件路径以及路径相关的处理。

安装

使用 npm 进行安装:

使用

获取文件路径

gulp 中,我们经常需要获取文件的路径以进行后续操作。使用 gulp-path,可以简单地获取文件的相对路径、项目根目录、文件名以及扩展名等信息。

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

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

过滤文件

gulp-path 还可以根据文件路径进行文件过滤。

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

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

上面的代码中,通过正则表达式 /\.js$/ 匹配到文件扩展名为 .js 的文件。

修改路径

有时,我们需要修改文件的路径。使用 gulp-path,可以通过设置 rename 属性来修改文件路径。rename 属性可以是一个函数或对象,对象可以包含 dirnamebasenameextname等属性。

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

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

上面的代码将 src/main.js 文件修改为 dist/app.min.js

总结

gulp-path 是一个方便实用的工具,可以帮助我们更方便地获取文件路径以及进行文件过滤与重命名等操作。同时,它也是 gulp 插件体系的一部分,相信对于 gulp 用户来说,学习 gulp-path 的使用方法也是有些参考意义的。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedcac8b5cbfe1ea06124b8

纠错
反馈