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

#javascript #html #gulp #svg_спрайт

Есть небольшая 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:

...

  

...

  
  
  ...



Все  работает неплохо, до изменений в 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().

  
    
    
    ....



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



    

Ответы

Ответ 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 не нужны.