useref and Github Pages relative links

[s1n]

I opened an issue with gulp-useref but looking at their issue queue, I don't expect they will be responding anytime soon. I am using the webapp generator and I ran into an issue when trying to deploy to a Github Page and linking my assets.

So I have been learning gulp and working to deploy to a Github Page, so I setup the build reference like this:

<!-- build:js /project/scripts/combined.js-->
<link rel="text/javascript" href="/app/scripts/script.js">
<!-- endbuild-->

Github Pages need to be linked like "/project/scripts/foo.js" because "/" is https://user.github.io but I need the name of the project in the URL.

The above useref comment will write the combined.js to the dist/project/scripts/ folder. However, the dist folder typically represents the document root of the github page, so I actually need the file under dist/scripts/ and the link to be /project/scripts/combined.js. In order to deploy the dist folder to the gh-pages branch, I have to move the files in dist/project/ up to just dist. This feels clunky.

To complicate matters, I'm using Pug, so I have 1 layout template that has these links. Relative linking within the individual Pug file might be possible, but I'm not sure exactly what that would look like.

How would I accomplish this?

[neilhem]

Hi, just use relative urls like these:

<!-- build:js scripts/main.js -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/tether/dist/js/tether.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

[s1n]

That only works if I have a flat hierarchy of pages rooted at dist; I do not.

If I have this in dist/foo/index.html, it will reference scripts/main.js, which is relative to foo, not dist. In that case, it should either reference ../scripts/main.js or /project/scripts/main.js (that is, relative path or absolute with the Github project name).

[neilhem]

Use absolute urls which include project name. E.g. s1n.github.io/project-x

<!-- build:js /project-x/scripts/main.js -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/tether/dist/js/tether.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

[s1n]

That doesn't work either. That will drop the files under dist/project and if you deploy that to GitHub Pages, it would actually be under s1n.guthub.io/project/project/scripts.

[neilhem]

You should concatanate all files into single or maybe more files which will be in dist/scripts & reference them in html.

<!-- build:js /project-x/scripts/main.js -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/tether/dist/js/tether.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

Github Pages root should be the dist folder itself.

[s1n]

How might I modify the webapp gulp script to do this? It's already doing the useref and minification in the HTML task. The GitHub Pages deploy recipe doesn't make a mention.

[UlisesGascon]

I assume that this bug was fixed in #737. If not we can re-open it again 😃