简介
gulp-cdn-url-append 是一个用于自动给 html，css，js 文件中引用的静态资源（例如图片、字体、js 等等）加上 CDN 前缀的 gulp 插件。
安装
npm install gulp-cdn-url-append --save-dev
使用方法
基本用法
使用 gulp-cdn-url-append，你需要先声明一下你的 CDN 前缀，然后再通过 appendCdnUrl() 函数来实现引用静态资源的 CDN 替换。以下是示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ---------------------
----- --------- - -------------------------------
----------------------- -------- -- -
------ -------------------------
-------------------------------------
---------------------------
---上述代码中 cdnUrl 定义了 CDN 前缀，在 gulp.src() 中指定需要替换的文件路径，然后将之间经过 appendCdnUrl() 函数处理。
进阶用法
如果你的静态资源并不是直接在 img、link、script 等标签中的 src、href、src 等属性里引入的，而是通过代码中生成的变量的方式引用的，那么就需要在 appendCdnUrl() 函数指定文件类型，然后插件会对指定类型的文件中出现的字符串进行替换。示例代码：
gulp.task('cdn-prepend', function () {
const searchPath = ['./dist/js/*.js', './dist/css/*.css'];
return gulp.src(searchPath, {base: './'})
.pipe(cdnAppend.appendCdnUrl(cdnUrl, {type: ['png', 'jpg', 'jpeg', 'gif']}))
.pipe(gulp.dest('./'));
});上述代码中，searchPath 变量指向需要修复的路径，而在 appendCdnUrl() 函数中，通过 { type: ['png', 'jpg', 'jpeg', 'gif'] } 指定修复图片文件类型的静态资源。
总结
通过使用 gulp-cdn-url-append 插件，我们可以很方便的处理自己项目所使用的路径聚集 CSS、JavaScript、图像、字体库等类型的文件。经过脚本处理文件中的所用的资源路径实现自动加上 CDN 前缀，进而优化网站的访问速度和稳定性，减轻服务器负担，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601081e8991b448ddf7c