gulp-usemin
gulp-usemin copied to clipboard
rewrite documentation
Documentation is fairly confusing since you include some options in the Gulpfile while others go directly in the HTML.
+1. Trying to figure out how to use alternatePath for hours now.
Alternate paths are described as below: alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
Yes... and how one could achieve that? Give examples, please. Mentioning features without providing examples is amateur and evil.
So the alternate path works within the HTML itself:
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
For example, you could update the path to:
<!-- build:css ./assets/combined.css -->
The docs do a terrible job of explaining this. Hope that helps.
Thanks Michael.
In that case it is not what I am looking for. The problem is that my JS files are outside of the HTML file folder.
I have found the answer in issue #5, should be using assetsDir. Too bad there is no example in the documentation :(.
That is exactly what this does. If you have your JS files in any other directory, just update the path in the HTML - <!-- build:js(place_the_path_here) ./assets/combined.js -->
Still doesn't work. My resulting combined file sits in build/public/scripts/combined.js. However, in express I must have build/public omitted so it should be just scripts/combined.js. And if that is not enough, all the source file are sitting in the app/scripts folder (don't ask, I know it's not optimal, but this is how yeoman-fullstack generates the projects). The last attempt was this:
In Gulp:
var paths = {
html: ['app/views/site.html'],
dist_views: 'build/public/views',
dist_server_views: 'build/views'
};
gulp.task('build-usemin', function() {
// Process all inline HTML compression
gulp.src(paths.html)
.pipe(usemin({
assetsDir:'app',
css: [minifyCss(), 'concat', rev(), gulp.dest('build/public/')],
html: [minifyHtml({empty: true})],
js: [ ngAnnotate(), uglify(), 'concat', rev(), gulp.dest('build/public/') ]
}))
.pipe(gulp.dest(paths.dist_server_views))
...
});
In HTML:
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<script src="scripts/api.js"></script>
<script src="scripts/services/itemService.js"></script>
...
In the build directory, all file structure was generated properly but now HTML had a missing resulting combined script include. If I omit the gulp.dest('build/public/') part, the script include is inserted into the HTML file but is not generated in the build directory.
Not sure whether that's me missing something or there are holes in the implementation.
Figured that out, using outputRelativePath
gulp.src(paths.html)
.pipe(usemin({
outputRelativePath: '../public/'
Michael, thanks for the inputs. Appreciate that.