inject svg файла при изменении html документа

112
17 июля 2019, 15:10

Есть небольшая gulp сборка для проекта.

Плагины:

  • gulp-inject
  • browsersync
  • gulp-watch
  • gulp-useref

gulpfile.js:

var 
    gulp         = require('gulp'),
    ...
var path = {
    app : {          // Исходники
        html   : 'app/*.html',
        js     : 'app/js/*.js',
        svg    : 'app/**/*.svg',
    },
    dist : {         // Релиз
        html   : 'dist/',
        js     : 'dist/js/',
    },
    watch : {        // Наблюдение
        html   : 'app/**/*.html',
        svg    : 'app/**/*.svg',
        js     : 'app/js/**/*.js',
    }
};
// Настройка сервера
var config = {
    server : {
        'baseDir' : './dist'
    },
    host : 'localhost',
    port : 9000,
    tunel : true,
};
// Работа с HTML
gulp.task('html', ['svg'], function(){
    gulp.src(path.app.html)
        .pipe(rigger())     
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))        
        .pipe(inject(svgContent, { transform: fileContents }))
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream : true}));
});
// Работа с JS
gulp.task('js', function(){
    gulp.src(path.app.js)
        .pipe(gulp.dest(path.dist.js))
        .pipe(reload({stream : true}));
});
// Работа с SVG
function fileContents (filePath, file) {
    return file.contents.toString();}
var svgContent = gulp.src(path.app.svg)
                   .pipe(svgmin())
                   .pipe(svgstore({ inlineSvg: true }))
                   .pipe(reload({stream : true}));
gulp.task('svg', function () {
    var svgs = svgContent;
});

// Наблюдение
gulp.task('watch', function () {    
    watch([path.watch.html], function(event, cb){
        gulp.start('html');
    });
    watch([path.watch.html], function(event, cb){
        gulp.start('svg');
    });
    watch([path.watch.js], function(event, cb){
        gulp.start('js');
    });
});
// Запуск вебсервера
gulp.task('webserver', function(){
    browserSync(config);
});
// Чистка
gulp.task('clean', function(cb){
    clean(path.clean, cb);
});
// Задачи по-умолчанию
gulp.task('default', [
    'html',
    'svg',
    'js',
    'webserver',
    'watch' 
]);

html:

...
<div style="height: 0; width: 0; position: absolute; visibility: hidden">
  <!-- inject:svg --><!-- endinject -->
</div>
...
<!-- build:js js/vendor.js -->  
  <script src="libs/jquery/jquery-2.1.3.min.js"></script>
  ...
<!-- endbuild -->

Все работает неплохо, до изменений в html файле. Любое изменение приводит к исчезновению скомпилированного инлайн svg файла внутри html файла (внутри inject).

Вопрос: Можно ли настроить gulpfile.js так, чтобы можно было вносить изменения в html файл без перезапуска всей сборки в консоли и без потери сформированного svg спрайта внутри html файла?

Пробую так:

В gulpfile.js:

// Таск для html
gulp.task('html', function(){
    gulp.src(path.app.html) 
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))     
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream : true}));
});
// Таск для SVG
gulp.task('svg', function () {
    var svgs = gulp.src(path.app.svg)
            .pipe(svgstore({ inlineSvg: true }));
    function fileContents (filePath, file) {
        return file.contents.toString();
    }
    return gulp.src(path.app.html)
        .pipe(inject(svgs, { transform: fileContents }))
        .pipe(gulp.dest(path.dist.other));
});

Все работает, вебсервер перезапускается очищается с внесением изменений в любой файл html, css и сохранением svg спрайта, НО перестал работать useref().

<!-- build:js js/vendor.js -->  
    <script src="libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="libs/animate/wow.min.js"></script>
    ....
<!-- endbuild -->

Собирает vendor.js, но не записывает в html. А должен после генерации быть:

<script src="js/vendor.js"></script>
Answer 1

Как альтернатива, но не решение. Пришлось отказаться от inject svg и заменить его на rigger.

В html:

//= svg-sprite.html

Соответственно создаю еще файл svg-sprite.html в который вставляю сгенерированный svg спрайт. Генерирую с помощью ресурса icomoon.io.

gulpfile.js:

// Work with HTML
gulp.task('html', function(){
    gulp.src(path.app.html)
        .pipe(rigger()) 
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))  
        //.pipe(inject(svgContent, { transform: fileContents }))  
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream : true}));
});

Все таски по svg не нужны.

READ ALSO
Почему NodeJS так долго не реализует поддержку модулей ES6?

Почему NodeJS так долго не реализует поддержку модулей ES6?

Не взирая на то, что спецификацию ES6 выпустили в 2015 году, даже в 2019 NodeJS всё ещё не реализует этот стандартПоддержка всё ещё экспериментальная...

100
Работа Reverence Type [дубликат]

Работа Reverence Type [дубликат]

На данный вопрос уже ответили:

127
Передача данных express.js

Передача данных express.js

Есть такой участок кода на сервереВыполняется скрипт к бд и получаются данные в ответ

140