gulp-usemin icon indicating copy to clipboard operation
gulp-usemin copied to clipboard

rewrite documentation

Open mjhea0 opened this issue 10 years ago • 6 comments

Documentation is fairly confusing since you include some options in the Gulpfile while others go directly in the HTML.

mjhea0 avatar Aug 18 '14 15:08 mjhea0

+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.

Artmobile avatar Sep 07 '14 16:09 Artmobile

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.

mjhea0 avatar Sep 07 '14 20:09 mjhea0

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 :(.

Artmobile avatar Sep 08 '14 06:09 Artmobile

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

mjhea0 avatar Sep 08 '14 12:09 mjhea0

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.

il-atevent avatar Sep 09 '14 13:09 il-atevent

Figured that out, using outputRelativePath

 gulp.src(paths.html)
        .pipe(usemin({
            outputRelativePath: '../public/'

Michael, thanks for the inputs. Appreciate that.

il-atevent avatar Sep 09 '14 13:09 il-atevent