Как я могу напрямую ввести CSS в мой index.html? - PullRequest
Новая
       10

Как я могу напрямую ввести CSS в мой index.html?

0 голосов
/ 02 января 2019

Я пытаюсь объединить внешние файлы CSS и JS (на которые есть ссылки из моего файла index.html), а затем помещаю их непосредственно в мой HTML-файл. Я знаю, как объединить и затем поместить их в один файл. но не удалось записать их прямо в мой index.html. Если я использую Inject, то он не получает ссылки из index.html. Мне нужно иметь как можно меньше файлов для моего проекта, поэтому мне нужно вставить весь код в один 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'));
});

index.html перед запуском 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 после запуска gulp 

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