npm 包 gulp-inlinerjs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

对于前端工程师来说，优化资源加载是一项很重要的工作。在 Web 开发中，我们通常会遇到如图片未压缩、未使用雪碧图、CSS/JS 资源未压缩等常见问题，而这些都会影响网站的性能和加载速度。因此，在此提供一个 NPM 包 —— gulp-inlinerjs，来优化前端资源加载，进而提高网站性能和体验。

什么是 gulp-inlinerjs？

gulp-inlinerjs 是一个使用 InlinerJS 库内联 HTML/CSS 与 JS 的 gulp 插件。通俗来说，gulp-inlinerjs 可以将 HTML/CSS 与 JS 内联进主 HTML 文件中，减少网页资源请求次数，从而提高加载速度。

如何安装 gulp-inlinerjs？

在使用 gulp-inlinerjs 之前，需要安装 gulp 和 gulp-inlinerjs：

$ npm i -D gulp gulp-inlinerjs

gulp-inlinerjs 的使用教程

1. 基本使用

在 gulpfile.js 中引入 gulp 和 gulp-inlinerjs：

const gulp = require('gulp');
const inliner = require('gulp-inlinerjs');

创建任务 task:

gulp.task('inliner', function() {
  gulp.src('index.html')
    .pipe(inliner({
      css: true, // 内联 CSS
      js: true // 内联 JS
    }))
    .pipe(gulp.dest('dist'));
});

执行任务：

$ gulp inliner

经过内联操作，index.html 文件已转换为下面的格式，并保存到 ./dist/ 目录下：

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

在 HTML 文件中，原本引入的 CSS 和 JS 代码被内联进 HTML 中，而在浏览器中打开该文件时，仅会发送一次请求，从而减少了加载时间。

2. 可选项

在 gulp-inlinerjs 的 options 中，支持以下几个可选项：

`css` (默认值：`true`)

将所有在 HTML 或标注中引用的 CSS 都内联到 HTML 头部中的 <style> 标签里。

`js` (默认值：`true`)

将 JavaScript 内容替换任何用 <script> 标签引用的 JavaScript 文件（包括内联的）。

`prescript` (默认使用空字符串)

会在任意执行的 JavaScript 之前放置赋值给 window.__inlinerJs 的代码，例如：

window.__inlinerJs = window.__inlinerJs || {};
window.__inlinerJs.noConflict = true; // 避免命名空间冲突

`postscript` (默认使用空字符串)

会在任意执行的 JavaScript 之后放置的代码，例如：

console.log(window.__inlinerJs.version());

3. 模板使用

除了内置的 opts，也支持自定义模板并使用。默认模板在 ./templates/default/index.html 下定义，可以在此修改。

模板中已包含的模板标记如下表：

标记	描述
`<% css %>`	将 CSS 条目内联为 HTML 中头部的 `<style>` 标签
`<% js %>`	将 JavaScript 内容替换任何用 `<script>` 标签引用的 JavaScript 文件（包括内联的）
`<% base64DataUrl %>`	内联所有指定的 Base64 图片
`<% META title="Your Title Here" %>`	在头部添加注释，例如：`<title>Your Title Here</title>`

将自定义模板设置从选项传递，例如：

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

通过传递 templateUrl 选项来更改缺省模板。

注意事项

若在 HTML 标签中使用了 src 属性，且想使其内联，可以使用以下方法：

<img src="./images/background.png" data-image-inline>

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

在使用 gulp-svgstore 插件时，需要使用 gulp-cheerio 重新定义生成的 html 文件中的 ID 标签，外部样式引用时会用到。

结语

通过 gulp-inlinerjs 这个 npm 包，让内联操作变得简单而快捷，不仅可用于实现图片或矢量图标的优化内联，在某些特定场景下，也可以使用插件将所需的 JS、CSS、HTML 等直接内联到页面底部，大大缩短首次页面加载时间和响应时间，提升用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/79690

npm 包 gulp-inlinerjs 使用教程

前言