gulp-usemin not outputting js files

Question

I am trying to use gulp-usemin to bundle my CSS and javascript files for production. gulp-usemin is working fine on my CSS files, but is not outputting anything in relation to my javascript files. Can somebody point out to me what I'm doing wrong?

I'm experiencing a problem similar to uglified files are not rewritten in html file using gulp-usemin, but the proposed solution isn't working.

For reference, my node version is v0.12.1 and my gulp versions are as follows:

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-minify-css": "^1.2.4",
  "gulp-rev": "^7.1.2",
  "gulp-uglify": "^2.0.0",
  "gulp-usemin": "^0.3.24"
}

index.html

<html>
<head>
  <meta charset="utf-8">

  <!-- build:css css/site.css -->
  <link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="all" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css" media="all" />
  <!-- endbuild -->

  <!-- build:js js/site.js -->
  <script type="text/javascript" src='bower_components/gsap/src/minified/TweenMax.min.js'> </script>
  <script type="text/javascript" src='bower_components/d3/d3.js'> </script>
  <script type="text/javascript" src='bower_components/d3-tip/index.js'> </script>
  <script type="text/javascript" src='bower_components/moment/moment.js'> </script>
  <script type="text/javascript" src='chart.js'> </script>
  <!-- endbuild -->

</head>
<body>

</body>
</html>

gulp file

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');
var minifyCss = require('gulp-minify-css');

gulp.task('build', function() {
  return gulp.src(['index.html'])
    .pipe(usemin({
      css: [minifyCss()],
      js: [uglify()]
    }))
  .pipe(gulp.dest('dist/'));
});

After running gulp build I am generated a dist directory as follows

dist/
  css/
    site.css
  index.html

And my generated index.html is

<html>
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/site.css" media="all"/>

</head>
<body>

</body>
</html>

Is there something obvious that I'm missing? Why would the css block work but the js block silently fail?

score 3 · Accepted Answer · answered Aug 19 '16 at 18:50

3

The regex used by gulp-usemin doesn't allow for any whitespace between the opening <script> and closing </script> tag. Neither does it allow a type="text/javascript" attribute.

See this regex101 page for a matching and non-matching example.

So this:

<!-- build:js js/site.js -->
<script type="text/javascript" src='bower_components/gsap/src/minified/TweenMax.min.js'> </script>
<script type="text/javascript" src='bower_components/d3/d3.js'> </script>
<script type="text/javascript" src='bower_components/d3-tip/index.js'> </script>
<script type="text/javascript" src='bower_components/moment/moment.js'> </script>
<script type="text/javascript" src='chart.js'> </script>
<!-- endbuild -->

Should be like this:

<!-- build:js js/site.js -->
<script src='bower_components/gsap/src/minified/TweenMax.min.js'></script>
<script src='bower_components/d3/d3.js'></script>
<script src='bower_components/d3-tip/index.js'></script>
<script src='bower_components/moment/moment.js'></script>
<script src='chart.js'></script>
<!-- endbuild -->

answered Aug 19 '16 at 18:50

Sven Schoenung

30,224
8
65
70

Thanks for the quick reply, but I'm still encountering the same problem. I've adjusted `index.html` and verified that each of the script tags now matches the given regex. Is there a way to enable warn or error logging? – Nathan Aug 19 '16 at 19:26
I have tried your `build` task on my corrected HTML and it works. So you either haven't adjusted your `index.html` correctly or there's something about your setup that you have failed to mention. – Sven Schoenung Aug 19 '16 at 19:55
As for logging just add a `console.log(section[5])` in [this line](https://github.com/zont/gulp-usemin/blob/f06f1fb/lib/blocksBuilder.js#L99). That will tell you if the regex matches. – Sven Schoenung Aug 19 '16 at 19:55
In the process of removing each script tag and adding them back one by one, `usemin` has started working again for unknown reasons. Possibly issues with unprintable characters/weird formatting? In any case, thank you for your help. – Nathan Aug 19 '16 at 20:19

gulp-usemin not outputting js files

1 Answers1