简介
gulp-penthouse 是一个能够提取关键CSS的NPM包，它能够以网页的DOM树结构为基础，通过分析CSS中哪些是输出关键CSS来生成关键CSS样式表，以减少网站的加载时间。本文将详细介绍如何使用 gulp-penthouse 优化前端网页。
安装
首先需要确保你已经安装好了 Node.js 环境和 gulp，如果没有请先安装以下两个工具。接下来在命令行里输入以下命令来安装 gulp-penthouse：
npm install -D gulp-penthouse
使用
- 创建 gulpfile.js
在开始之前，先创建一个 gulpfile.js 文件。如果没有创建过，可以在项目根目录下新建一个文件，然后添加以下代码：
var gulp = require('gulp');
var penthouse = require('gulp-penthouse');- 编写任务
添加一个 css-critical 任务，它将会提取关键CSS的样式表。语法如下：
-- -------------------- ---- -------
------------------------- ---------- -
------ ----------------------
-----------------
---- -------------
---- --------------------------
------ -----
------- ---
---
---------------------------------------------
---- 参数说明
out：提取的关键 CSS 样式表名称。url：需要进行关键 CSS 提取的页面 URL。width：提取关键 CSS 时设置的页面宽度（px）。height：提取关键 CSS 时设置的页面高度（px）。
其中，out 参数可以为空，即引擎会自动生成一个唯一的名称用于存放提取出来的关键 CSS。
- 运行任务
在终端中，输入以下代码运行刚刚添加的任务：
gulp css-critical
这样就可以得到一个包含关键 CSS 的 CSS 样式表。
示例代码
为了让读者更好的理解如何使用 gulp-penthouse 包，以下是一个示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - --------------------------
------------------------- ---------- -
------ ----------------------
-----------------
---- -----------
---- ----------------------
------ -----
------- ----
---
-----------------------------
---
-------------------- -----------------------------结语
gulp-penthouse 是一个非常好用的 NPM 包，它可以帮助我们更好地实现前端页面优化。建议大家多去探究这个包的细节，尝试运用到实践中，以此来提升自身的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728581e8991b448e8bc3