минимизировать и объединить все файлы js из файла html - PullRequest
Новая
       36

минимизировать и объединить все файлы js из файла html

0 голосов
/ 17 ноября 2018

Допустим, у меня

ЦСИ / index.html 

<head>
<script type="text/javascript" src="js/file1.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
<script type="text/javascript" src="js/file3.js"></script>
</head>

сборка / index.html 

<head>
<script type="text/javascript" src="js/script.min.js"></script>
</head>

Есть ли способ, чтобы какая-то утилита могла автоматически читать мой html-файл, минимизировать и объединять все записи js-скрипта и копировать в каталог сборки. Также удалить все эти записи JS и заменить выходным файлом?

То же самое с CSS. Пожалуйста, сообщите.

1 Ответ

0 голосов
/ 04 декабря 2018

Структура вашей папки: 

gulpfile.js
/src
    index.html
    /css
    /js
       /file1.js
       /file2.js
       /file3.js

/build
    index.html
    /css
    /js

в src / index.html используйте эти комментарии: 

<head>
  <!--build:js js/scripts.min.js -->
  <script type="text/javascript" src="js/file1.js"></script>
  <script type="text/javascript" src="js/file2.js"></script>
  <script type="text/javascript" src="js/file3.js"></script>
  <!-- endbuild -->

  <!--build:css css/styles.min.css-->
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="css/mdb.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <!--endbuild-->
</head>

in gulpfile.js написать этот код: 

var gulp = require('gulp');
// This plugin concatenates any number of CSS and JavaScript files into a single file
var useref = require('gulp-useref');
// Requires the gulp-uglify plugin for minifying js files
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
// Requires the gulp-cssnano plugin for minifying css files
var cssnano = require('gulp-cssnano')


gulp.task('build', function () {
    return gulp.src('app/*.html')
      .pipe(useref())
      // Minifies only if it's a JavaScript file
      .pipe(gulpIf('*.js', uglify()))
      // Minifies only if it's a CSS file
      .pipe(gulpIf('*.css', cssnano()))
      .pipe(gulp.dest('dist'))
});

После запуска задачи сборки в командной строке автоматически создаются папки сборки и внутренние файлы.

...