сохранить файл инжект SVG при изменении HTML-документа - PullRequest
Новая
       26

сохранить файл инжект SVG при изменении HTML-документа

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

У меня есть некоторый интерфейсный проект с рабочим процессом в gulp.

Плагины:

gulpfile.js: 

var 
    gulp         = require('gulp'),
    ...

var path = {
    app : {          // src
        html   : 'app/*.html',
        js     : 'app/js/*.js',
        svg    : 'app/**/*.svg',
    },
    dist : {         // dist
        html   : 'dist/',
        js     : 'dist/js/',
    },
    watch : {        // watcher
        html   : 'app/**/*.html',
        svg    : 'app/**/*.svg',
        js     : 'app/js/**/*.js',
    }
};

// server
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;
});



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

// start server
gulp.task('webserver', function(){
    browserSync(config);
});

// Cleaning
gulp.task('clean', function(cb){
    clean(path.clean, cb);
});

// Default task
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
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 и сохраняется 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 файла, но не записывает в dist/index.html.И после генерации должно быть: 

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

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

1 Ответ

0 голосов
/ 11 марта 2019

Плагин Gulp для встраивания / встраивания изображений SVG в HTML-файлы

введите описание ссылки здесь 

 npm i --save-dev gulp-embed-svg
...