Search code examples
javascripthtmlgulpminify

Gulp HTML and JS concatenation - ERR_FILE_NOT_FOUND

I'm using some standard gulp processes to minify my html, css and javascript. The problem I have at the moment is that i'm concatenating and uglifying my JS into one clean scripts.js file. The distribution folder still points to multiple JS files, for example:

  <script type="text/javascript" src="mock-data-live.js"></script>
  <script type="text/javascript" src="vibrant.min.js></script>
  <script type="text/javascript" src="siema.min.js"></script>
  <script type="text/javascript" src="script.min.js"></script>

Becomes 

  <script type="text/javascript" src="script.min.js"></script>

Is there a way I can change my original paths in HTML when minifying so they all point to the one concatenated file?

Thank you

Solution

  • Install gulp-html-replace

    You will need an additional Gulp package for this: gulp-html-replace.

    Install it via:

    npm install --save-dev gulp-html-replace

    Change HTML file contents

    Inside your HMTL file (assuming its called "index.html"), you would use:

    <html>
<head>

<!-- build:js -->
<script type="text/javascript" src="mock-data-live.js"></script>
<script type="text/javascript" src="vibrant.min.js></script>
<script type="text/javascript" src="siema.min.js"></script>
<script type="text/javascript" src="script.min.js"></script>
<!-- endbuild -->

    Edit gulpfile.js

    Add the build rule to your gulpfile.js:

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

gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'css': 'styles.min.css',
        'js': 'script.min.js'
    }))
    .pipe(gulp.dest('build/'));
});

    Run gulp

    As soon as you run gulp, the resulting HTML should look like:

    <html>
<head>

<script type="text/javascript" src="script.min.js"></script>