Gulp 如何将css直接注入index.html?
我正在尝试连接外部css和js文件(从index.html文件引用),然后将它们直接放入html文件中。我知道如何连接它们,然后将它们放入一个文件中。但是还没有把它们直接写进我的index.html。如果我使用inject,那么它不会从index.html获取引用。我需要有尽可能少的文件为我的项目,所以我需要粘贴在一个html文件中的所有代码。有人能回答我吗 吞咽代码:Gulp 如何将css直接注入index.html?,gulp,gulp-useref,Gulp,Gulp Useref,我正在尝试连接外部css和js文件(从index.html文件引用),然后将它们直接放入html文件中。我知道如何连接它们,然后将它们放入一个文件中。但是还没有把它们直接写进我的index.html。如果我使用inject,那么它不会从index.html获取引用。我需要有尽可能少的文件为我的项目,所以我需要粘贴在一个html文件中的所有代码。有人能回答我吗 吞咽代码: gulp.task('useref', function(){ gulp.src(src/index.html)
gulp.task('useref', function(){
gulp.src(src/index.html)
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', modifyCssUrls({
modify: function (url, filePath) {
var splitted = url.split('/');
return splitted[splitted.length - 1];
},
prepend: '',
append: ''
})))
.pipe(gulp.dest('./tmp'));
});
运行gulp之前index.html
<!-- css -->
<!--build:css main.css -->
<link rel="stylesheet" type="text/css" href="../../../assets/css/shared.css">
<link rel="stylesheet" type="text/css" href="../assets/css/main.css">
<!-- endbuild -->
<!--build:js main.min.js -->
<script type="text/javascript" src="../../../assets/js/fontfaceobserver.js"></script>
<script type="text/javascript" src="../../../assets/js/SplitText.js"></script>
<!-- endbuild -->
<!-- css -->
<link rel="stylesheet" href="main.css">
<script src="main.min.js"></script>
运行gulp后返回index.html
<!-- css -->
<!--build:css main.css -->
<link rel="stylesheet" type="text/css" href="../../../assets/css/shared.css">
<link rel="stylesheet" type="text/css" href="../assets/css/main.css">
<!-- endbuild -->
<!--build:js main.min.js -->
<script type="text/javascript" src="../../../assets/js/fontfaceobserver.js"></script>
<script type="text/javascript" src="../../../assets/js/SplitText.js"></script>
<!-- endbuild -->
<!-- css -->
<link rel="stylesheet" href="main.css">
<script src="main.min.js"></script>
所以我希望它能像这样将css粘贴到我的html文件中:
<!-- css -->
<style>
@font-face {
font-family: 'circular-pro-black';
src: url("circular-pro-black.woff2") format('woff2'),
url("circular-pro-black.woff") format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'circular-pro-bold';
src: url("circular-pro-bold.woff2") format('woff2'),
url("circular-pro-bold.woff") format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'anchor-bold';
src: url("anchor-bold.woff2") format('woff2'),
url("anchor-bold.woff") format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'anchor-semibold';
src: url("anchor-semibold.woff2") format('woff2'),
url("anchor-semibold.woff") format('woff');
font-weight: normal;
font-style: normal;
}
</style>
<script>
and the js content here
</script>
@字体{
字体系列:“圆形专业黑色”;
src:url(“circular pro black.woff2”)格式(“woff2”),
url(“circular pro black.woff”)格式(“woff”);
字体大小:正常;
字体风格:普通;
}
@字体{
字体系列:“圆形专业粗体”;
src:url(“circular pro bold.woff2”)格式(“woff2”),
url(“circular pro bold.woff”)格式(“woff”);
字体大小:正常;
字体风格:普通;
}
@字体{
字体系列:“锚定粗体”;
src:url(“锚定粗体.woff2”)格式(“woff2”),
url(“锚定粗体.woff”)格式(“woff”);
字体大小:正常;
字体风格:普通;
}
@字体{
字体系列:“锚定半黑体”;
src:url(“锚定semibold.woff2”)格式(“woff2”),
url(“锚定semibold.woff”)格式(“woff”);
字体大小:正常;
字体风格:普通;
}
还有这里的js内容