Nathan Nathan - 3 months ago 30
Node.js Question

gulp-usemin not outputting js files

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?

Answer

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 -->
Comments