How can I directly inject css into my index.html?

Question

I'm trying to concatenate external css and js files (that are referenced from my index.html file) and then putting them directly into my html file. I know how to concatenate and then put them into one single file. but haven't managed to write them directly into my index.html. If I use inject then it doesn't get the references from the index.html. I need to have as little files as possible for my project so i need to paste all of the code inside one html file. Anyone have an answer for me?

gulp code:

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'));
});

index.html before running gulp

<!-- 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 -->

index.html after running gulp

<!-- css -->
<link rel="stylesheet" href="main.css">

<script src="main.min.js"></script>

So I want it to actually paste the css into my html file like this:

<!-- 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>

How can I directly inject css into my index.html?

0 Answers0