celineu
celineu

Reputation: 586

Using gulp-minify-html and gulp-html-replace together

I am using Gulp with gulp-minify-html and gulp-html-replace:

var minifyhtml = require('gulp-minify-html');
var htmlreplace = require('gulp-html-replace');

var dev_paths = {
  HTML: dev + '/**/*.html'
};

var prod_paths = {
  RELATIVE_CSS: ['css/bootstrap.css', 'css/font-awesome.css', 'css/c3.css', 'css/main.css'],
};

//Compress HTML
gulp.task('minify-html', function () {

  var opts = {
    empty: true,
    comments: true
  };

  return gulp.src(dev_paths.HTML)
    .pipe(minifyhtml(opts))
    .pipe(gulp.dest(prod + '/'));
});

//Add call to the JS and CSS in the HTML files
gulp.task('replace-files', function() {
  gulp.src(dev_paths.HTML)
    .pipe(htmlreplace({
        'css': prod_paths.RELATIVE_CSS,
        'js': 'js/script.js'
    }))
    .pipe(gulp.dest('public/prod/'));
});

gulp.task('prod',['replace-files','minify-html'], function(){
})

However, the HTML doesn't replace the CSS and JS files I specified with task replace-files. When I run gulp without the task minify-html, it works fine though.

Does anyone knows why using both tasks replace-files and minify-html together is not working?
Thank you.

Upvotes: 1

Views: 1289

Answers (1)

Dan Hayden
Dan Hayden

Reputation: 464

As the tasks run in parallel it is likely the 'minify-html' task is running before the 'replace-files' task is complete.

Try using run-sequence to ensure the tasks run in the required order.

Upvotes: 1

Related Questions