save inject svg file when changing html document

Question

I have a some front-end project with workflow in gulp.

Plugins:

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

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

Everything works well, before the changes in the html file. Any change causes the compiled inline svg file to disappear inside the html file (inside the inject).

---

I try it code:

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

Everything works, the web server is restarted & cleared with changes to any html file and save svg sprite, BUT the task useref() stopped working.

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

Build vendor.js file, but does not write to dist/index.html. And after generation should be:

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

---

Question: Is it possible to configure gulpfile.js so that you can make changes to the html file without restarting the entire assembly in the console and without losing the generated svg sprite inside the html file?

Answer 1

Gulp plugin to inline/embed SVG images into html files

enter link description here

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