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?
The regex used by
gulp-usemindoesn't allow for any whitespace between the opening<script>and closing</script>tag. Neither does it allow atype="text/javascript"attribute.See this regex101 page for a matching and non-matching example.
So this:
Should be like this: