Gulp HTML and JS concatenation - ERR_FILE_NOT_FOUND

Question

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

As the HTML file itself is mostly static and doesn't require rebuilding on change, why don't you statically point the script source to the final script's path <script type="text/javascript" src="script.min.js"></script>? — SaschaM78
– SaschaM78, Commented Feb 22, 2018 at 10:32
Heya, good point and I did think about this - part of my gulp build at the moment is minifying the HTML as well as the JS, so it gets outputted as part of the process each time I run the default gulp script. — JCoulam
– JCoulam, Commented Feb 22, 2018 at 10:43
I see. using a gulp plugin like in my example below should do the trick. And just a short remark type="text/javascript" can be removed as this would be the default for all script tags. — SaschaM78
– SaschaM78, Commented Feb 22, 2018 at 11:16
Whoopsie, missed that - yours was the best answer. Thanks for your help. — JCoulam
– JCoulam, Commented Mar 13, 2018 at 11:21

SaschaM78 · Accepted Answer · 2018-02-22 11:13:23Z

1

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>

answered Feb 22, 2018 at 11:13

SaschaM78

4,5074 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JCoulam Over a year ago

Amazing, fits very well into my current process :) thanks

SaschaM78 Over a year ago

Very good! If this should be the solution to your problem, please don't forget to select an answer as solution. Thanks!

Mark · Accepted Answer · 2018-02-22 11:14:26Z

1

The usual way is to use something like gulp-processhtml. There are others that do the same thing.

<!-- build:js js/app.min.js -->
<script src="src/js/main.js"></script>
<!-- /build -->

During development, you are using the src/js version. On a build step, you run through a gulp-processhtml step that changes that link to

<script src="js/app.min.js"></script>

answered Feb 22, 2018 at 11:14

Mark

192k32 gold badges560 silver badges580 bronze badges

Collectives™ on Stack Overflow

Gulp HTML and JS concatenation - ERR_FILE_NOT_FOUND

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related