Brtdku

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?