客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：OverZealous/gulp-cdnizer开源软件地址(OpenSource Url)：https://github.com/OverZealous/gulp-cdnizer开源编程语言(OpenSource Language)：JavaScript 55.1%开源软件介绍(OpenSource Introduction)：gulp-cdnizer
This plugin will replace local file references in HTML and other files with CDN locations. This allows you to work with local copies of libraries during development, and then automate switching to your CDN version when you deploy your application.
For example, if you have a development file that looks like this: <html>
<head>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
…You can use cdnizer to automatically convert it to this during your build process (every change here can be customized): <html>
<head>
<script>
function cdnizerLoad(u) {
document.write('<scr'+'ipt src="'+encodeURIComponent(u)+'"></scr'+'ipt>';
}
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>if(!(angular)) cdnizerLoad("bower_components/angular/angular.js");</script>
…Features:
New & Breaking in version 2.0
New in version 1.0cdnizer now can load CDN data from existing Possible breaking change in 1.0 The You can still access the full version string via IndexUsageFirst, install npm install --save-dev gulp-cdnizerThen, add it to your var cdnizer = require("gulp-cdnizer");
gulp.src("./src/index.html")
.pipe(cdnizer({
defaultCDNBase: "//my.cdn.host/base",
allowRev: true,
allowMin: true,
files: [
// This file is on the default CDN, and will replaced with //my.cdn.host/base/js/app.js
'js/app.js',
// On Google's public CDN
{
file: 'vendor/angular/angular.js',
package: 'angular',
test: 'window.angular',
cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ version }/angular.min.js'
},
// On Firebase's public CDN
{
file: 'vendor/firebase/firebase.js',
test: 'window.Firebase',
cdn: '//cdn.firebase.com/v0/firebase.js'
}
]
}))
.pipe(gulp.dest("./dist"));Alternatively, you can just pass in the files array if you don't need to provide any options, and only have custom files: gulp.src("./src/index.html")
.pipe(cdnizer([
{
file: 'vendor/angular/angular.js',
package: 'angular',
test: 'window.angular',
// use alternate providers easily
cdn: '//cdnjs.cloudflare.com/ajax/libs/angularjs/${ version }/angular.min.js'
},
{
file: 'vendor/firebase/firebase.js',
test: 'window.Firebase',
cdn: '//cdn.firebase.com/v0/firebase.js'
}
]))
.pipe(gulp.dest("./dist"));You can also use globs to define groups of file, and dynamic filename properties: gulp.src("./src/index.html")
.pipe(cdnizer([{
file: 'vendor/angular/*.js',
package: 'angular',
test: 'window.angular',
cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ version }/${ filenameMin }'
}]))
.pipe(gulp.dest("./dist"));Works great on gulp.src("./src/css/style.css")
.pipe(cdnizer({
defaultCDNBase: '//my.cdn.url/',
relativeRoot: 'css',
files: ['**/*.{gif,png,jpg,jpeg}']
}))
.pipe(gulp.dest("./dist/css/"));New in v1.0, you can use simplified strings for common public CDNs, like so: gulp.src("./src/index.html")
.pipe(cdnizer([
'google:angular', // for most libraries, that's all you'll need to do!
'cdnjs:jquery',
{
cdn: 'jsdelivr:yui', // You can also use a known CDN, while…
package: 'yui3', // overriding the package name for Bower, and…
test: 'window.YUI' // providing a custom fallback test
},
// you can also specify alternate files within a package:
'jsdelivr:yui:anim-base/[email protected]'
]))
.pipe(gulp.dest("./dist"));Need multiple files from the one package on a common CDN? Here's two solutions: // Manually list every file…
gulp.src("./src/index.html")
.pipe(cdnizer([
'cdnjs:angular.js:angular.min.js',
'cdnjs:angular.js:angular-touch.min.js',
'cdnjs:angular.js:i18n/angular-locale_fr-fr.js'
]))
.pipe(gulp.dest("./dist"));
// Or wire up a pattern:
gulp.src("./src/index.html")
.pipe(cdnizer([
// matches all root angular files
{
file: '**/angular/*.js',
cdn: 'cdnjs:angular.js:${ filenameMin }' // Yes, you can apply patterns to the filename!
},
// matches all i18n angular files
{
file: '**/angular/i18n/*.js',
cdn: 'cdnjs:angular.js:i18n/${ filename }' // These i18n files are not minified
}
]))
.pipe(gulp.dest("./dist"));API
cdnizer( options | files )Creates a new cdnizer function that can be used to process file contents. You can either pass in a configuration object, or you can pass in an array of files if you don't need to change the default shared options. See Usage above for examples. Optionsoptions.defaultCDNBaseType: Used for a default, custom CDN, usually for your own files. This will be used in the defaultCDN property to define the default path for a CDN unless overridden. options.defaultCDNType: This is the default pattern used for generating CDN links when one isn't provided by a specific file. options.relativeRootType: If you are processing a file that references relative files, or is not rooted to the CDN, you must set For example, if you have a CSS file at If you do not set options.allowRevType: Allow for file names with You can always manually configure your globs to include an optional rev string by using the form options.allowMinType: Allow for file names that optionally have options.fallbackScriptType: <script>
function cdnizerLoad(u) {
document.write('<scr'+'ipt src="'+encodeURIComponent(u)+'"></scr'+'ipt>';
}
</script>Overwrite the default fallback script. If any of the inputs has a fallback, this script is injected before the first occurrence of If you already have a script loader (such as yepnope or Modernizr), you can set this to an empty string and override the options.fallbackTestType: Overwrite the default fallback test. Note that all options availble to options.nodeModulesType: If provided, this is the directory to look for node modules in. If not provided, and there's no existing If this is set to Once the directory is determined, the script will look for files in options.bowerComponentsType: If provided, this is the directory to look for Bower components in. If not provided, cdnizer will attempt to look for the Once the directory is determined, the script will look for files in options.matchersType: Array of custom matchers. Use this to add extra patterns within which you would like to cdn-ize URLs, for example if you have such URLs in data-attributes. The matchers should include regular expressions with three matching groups:
Example (matches the matchers: [
{
pattern: /(<img\s.*?data-src=["'])(.+?)(["'].*?>)/gi,
//groups: ( leading )(url)(trailing)
fallback: false
}
]You can also specify just a regular expression. In that case, fallback will default to false. Equivalent example: matchers: [
/(<img\s.*?data-src=["'])(.+?)(["'].*?>)/gi
]options.cdnDataLibrariesType: Future-proof option to add additional options.excludeAbsoluteType: In some cases you may have third party of vendor libraries already loaded off a CDN or remote URL that you don't want re-written. For example given a config like this cdnizer({
files: ['**/*.js', '**/*.css'],
defaultCDNBase: '//examplecdn/',
excludeAbsolute: true
});And an index.html like this <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
<script src="js/app/app.js"></script>
</body>
</html>With this flag enabled <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!-- path has not changed -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
<script src="//examplecdn/js/app/app.js"></script> <!-- has the expected CDN base path -->
</body>
</html>options.filesType: Array of sources or objects defining sources to cdnize. Each item in the array can be one of three types, a simple glob, a public CDN string, or object hashmap. options.files.«glob»When using a glob, if it matches a source, the Examples: '**/*.js' // matches any .js file anywhere
'js/**/*.js' // matches any *.js file under the js folder
'styles/main.css' // only matches styles/main.css, possibly rev'd or min'd based on options
'img/icon/foo??.{png,gif,jpg}' // img/icon/foo10.png, img/icon/fooAA.gif, etcoptions.files.«common-cdn»Public CDN strings make it easy to add known libraries from common public CDN repositories. They always take the form of Examples: 'google:jquery' // Note that it's all lowercase
'google:[email protected]' // provide a version if you are not using Bower OR to override it
'google:angular'
// this loads the angular-touch file from angular on cdnjs
'cdnjs:angular.js:angular-touch.min.js' // you need `.js` for angular on cdnjs, but not on Google!
'jsdelivr:angularjs' // jsdelivr has it different stillThe result of these patterns follows the following process:
You can also use a common cdn while customizing the result by using a common CDN with the
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论