search

jonkemp / gulp-useref

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
MIT License
705 stars 93 forks source link

Confused as to the usage of this plugin in regards to new filepaths #219

Closed kchima closed 7 years ago

kchima commented 7 years ago

This properly generates concatted/minified

styles/vendor.css 
scripts/vendor.js
index.html

in my dist directory, but now what?

Do I now need to change my app to use, by default, dist/index.html vs the regular index.html in my home directory? This would be fine, but then it can't seem to find the vendor.js or vendor.css unless I change the html base tag from

  <base href="/" />

To:

  <base href="/dist" />

This seems to screw up the other paths/URLs in my angular app, for instance redirecting my home page to:

localhost:8080/dist/posts

instead of:

localhost:8080/posts

Overall I'm just confused by the usage.

jonkemp commented 7 years ago

You only run this as part of the build step before going to production. It should replace links to unminified styles and scripts in your html and also generate those styles and scripts for you and put them where you tell it to.

kchima commented 7 years ago

Hello Jon,

Thanks for your quick response. Just to simplify my question a bit,

It copies the new index.html into the Dist directory, along with the scripts and css.

1) Am I meant to use Dist/index.html as my homepage rather than index.html?

2) Assuming so, it seems to be generating incorrect paths in the index.html. scripts/vendor.js rather than Dist/scripts/vendor.js. Is this a bug or can I configure it to generate the correct path?

jonkemp commented 7 years ago

1) Yes, fist is what you would deploy to production. So list/index.html would be your homepage.

2) You can configure it to generate the correct paths.

kchima commented 7 years ago

As for your second answer, I'm trying to figure out what configuration to add. Is the extra config in the index.html file (like a base tag) or is it an option for useref?

I assume I need to change how useref generates these paths in the index.html. However, all the options for gulp-useref seem only concerned with inputs, except for base, which doesn't seem to work (overridden by .pipe(gulp.dest('src/main/webapp/dist'))?)

I've spent about 2 nights trying to figure it out without much luck. Even in your example on the homepage,

    .pipe(gulp.dest('dist'));

results in:

<script src="scripts/combined.js"></script>

Shouldn't the generated script src be "dist/scripts/combined.js"?

jonkemp commented 7 years ago

The paths come from the comments in the build blocks. Here is an example of what I am talking about.

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

What do you have there?

kchima commented 7 years ago 
<!-- build:js scripts/vendor.js -->

and 

<!-- build:css styles/vendor.css -->

Along with .pipe(gulp.dest('src/main/webapp/dist')) generates:

image

If I change it to:

<!-- build:css dist/styles/vendor.css -->
<!-- build:js dist/scripts/vendor.js -->

Then it generates: image

It now has an extra dist folder, dist/dist/scripts/vendor.js.

Of course, I could remove the first 'dist' by changing the gulp configuration to: .pipe(gulp.dest('src/main/webapp')), and then everything would probably work, but it would overwrite my source index.html.

jonkemp commented 7 years ago

Isn't the first result above what you want?

kchima commented 7 years ago

No, the issue is that when I change the build:js, the path in the index is dist/scripts/vendor.js, while the script is now located in dist/dist/scripts/vendor.js. It was surprising to me that changing the build:js changes not just the source tag in the index html but the actual output folder for the scripts itself, so there is always an extra dist.

By the way I really appreciate you discussing this with me.

-Keith

On Oct 6, 2016, at 11:40 PM, Jonathan Kemp notifications@github.com wrote:

Isn't the first result above what you want?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

jonkemp commented 7 years ago

The way you describe it working is the way it's supposed to work. Let me know if you need anything else.

kchima commented 7 years ago

Both the .pipe(gulp.dest('src/main/webapp/dist')) and the build:js control the output folder, gulp.dest doesn't seem to modify the generated source tag to account for adding a gulp.dest. I just don't see any way that the generated source tag could have the correct path unless I put it in the base folder, which would clobber my source index.html.

Is the problem that the paths should be relative but the root of my index.html stays at the root of my workspace? Meaning when it gets

image

it's searching for relative paths a directory higher than it should be?

jonkemp commented 7 years ago

I still do not see the problem with this.

image