我正在编写gulp任务来替换开发中使用的库的本地链接,以替换为公共CDN链接。这是我的index.html文件的一部分。
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
我写的Gulp任务正在使用gulp-cdnizer
gulp.task('cdn', function () {
return gulp.src('.tmp/serve/index.html')
.pipe(cdnizer([
'google:angular',
'cdnjs:jquery'
]))
.pipe(gulp.dest('dist'));
});
应生成以下输出
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script>if(!(window.jQuery)) cdnizerLoad("bower_components/jquery/dist/jquery.js");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script><script>if(!(window.angular)) cdnizerLoad("bower_components/angular/angular.js");</script>
但只有当我删除了领先的&#39; ../'时,它才有效。来自添加的链接 输入HTML文件
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
我需要在gulp cdn任务中进行哪些更改才能通过之前的HTML输入获得所需的结果。
修改
文件夹结构是这样的。
答案 0 :(得分:1)
您没有提供有关项目布局的详细信息,因此我假设它看起来像这样:
project/someOtherDirectory/gulpfile.js
project/someOtherDirectory/index.html
project/bower_components/jquery/dist/jquery.js
project/bower_components/angular/angular.js
当您将'cdnjs:jquery'
传递给gulp-cdnizer
时,它会尝试在index.html
中找到与此glob pattern匹配的所有路径:**/jquery?(-????????).?(min.)js
。
匹配的所有文件路径将替换为指向//cdnjs.com
的相应路径。
但**
glob模式与以.
开头的目录不匹配,因为您的路径都以../bower_components
开头,这意味着它们都不会被gulp-cdnizer
替换
您需要提供relativeRoot
option以使路径绝对。您可以通过传递__dirname
全局。
您还需要使用bowerComponents
option提供bower_components
文件夹的位置:
gulp.task('cdn', function () {
return gulp.src('/index.html')
.pipe(cdnizer({
relativeRoot: __dirname,
bowerComponents: '../bower_components',
files: [
'google:angular',
'cdnjs:jquery'
]
}))
.pipe(gulp.dest('dist'));
});