在前端开发中，为了实现网站的样式美观与功能丰富，我们经常会使用大量的 CSS 库和框架。但是，这些 CSS 文件可能会大量加载不必要的样式，导致网站加载速度变慢，影响用户体验。如果能够剔除这些不必要的 CSS 代码，就能够有效地提升网站性能。
本文将介绍 npm 包 gulp-strip-external-css，它可以自动剔除 CSS 文件中的外部链接，让我们的网站在加载 CSS 代码时更为高效。
npm 包 gulp-strip-external-css
gulp-strip-external-css 是一个 Gulp 插件，可以将 CSS 文件中外部链接的文件删除，只保留内部 CSS。它基于 Node.js 开发，支持 Mac、Windows 和 Linux 平台。
使用 gulp-strip-external-css，我们只需配置好 Gulp 任务，即可自动剔除 CSS 文件中的外部链接。这样可以大大缩短 CSS 文件的加载时间，提升网站的性能。
如何使用 gulp-strip-external-css
使用 gulp-strip-external-css，我们首先需要在项目中安装该插件。我们可以在终端中使用 npm 安装：
npm install gulp-strip-external-css --save-dev
安装好 gulp-strip-external-css 后，我们可以在 Gulp 任务中使用该插件。我们可以将以下代码添加到 gulpfile.js 文件中：
const gulp = require('gulp');
const stripCss = require('gulp-strip-external-css');
gulp.task('strip-css', function () {
return gulp.src('app/css/*.css')
.pipe(stripCss())
.pipe(gulp.dest('dist/css'));
});上述代码定义了一个名为 strip-css 的 Gulp 任务，该任务的作用是自动剔除 app/css 目录下所有 CSS 文件中的外部链接，并将处理后的 CSS 文件保存到 dist/css 目录中。
接下来，我们可以在终端中执行该 Gulp 任务：
gulp strip-css
执行该命令后，gulp-strip-external-css 就会自动加载 app/css 目录下的 CSS 文件，并将外部链接删除，最终生成新的 CSS 文件保存到 dist/css 目录中。
示例代码
下面是一个简单的示例代码，演示了如何使用 gulp-strip-external-css 剔除 CSS 文件中的外部链接。
首先，我们需要创建一个名为 app 的目录，该目录下包含一个名为 style.css 的 CSS 文件和一个名为 index.html 的 HTML 文件。其中，style.css 包含外部链接和内部 CSS 样式：
-- -------------------- ---- -------
-- --------- --
-- ---- --
------- ------------------------------------------------------
------- ----------------------------------------------------------------------------------
-- ---- --
---- -
------------ --------- ----------
-
----- -
------ -----
-index.html 内容如下：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
------------------------------ ----------
----- ---------------- ---------------------
-------
------
-- ----------- --- --------------
-------
-------接着，我们可以在项目中安装 gulp 和 gulp-strip-external-css：
npm install gulp gulp-strip-external-css --save-dev
安装好依赖后，我们可以创建一个 gulpfile.js 文件，用于定义 Gulp 任务和插件配置。下面是 gulpfile.js 的内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - -----------------------------------
---------------------- -------- -- -
------ -------------------------
-----------------
-----------------------------
---
-------------------- ---------------最后，我们可以在终端中执行 gulp 命令，自动剔除 CSS 文件中的外部链接：
gulp
执行该命令后，gulp-strip-external-css 会自动查找 app 目录下的 CSS 文件，并将外部链接剔除，最终生成新的 CSS 文件保存到 dist/css 目录中。我们可以直接打开 dist/index.html 文件，查看结果：
-- -------------------- ---- -------
---- --------------- ---
--------- -----
----- ----------
------
----- ----------------
------------------------------ ----------
----- ---------------- ---------------------
-------
------
-- ----------- --- --------------
-------
-------可以看到，原来的 style.css 文件中的外部链接被自动剔除，只剩下内部 CSS 样式。这样就可以大大缩短 CSS 文件的加载时间，提升网站性能。
总结
本文介绍了 npm 包 gulp-strip-external-css 的使用方法，可以帮助我们剔除 CSS 文件中的外部链接，提升网站性能。使用 gulp 和 gulp-strip-external-css，可以快速自动地处理 CSS 文件，节省开发时间和工作量。希望本文能够对你有所帮助，欢迎提出宝贵意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596f81e8991b448d6f41