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

Add prefix to the src/href output path #175

Open NikolajDL opened 8 years ago

NikolajDL commented 8 years ago

I have a use case where I use gulp to build a Wordpress theme. The src/href output path created by useref is relative to the directory containing the theme, but the website runs relative to the root directory. So if I use

<!-- build:css css/combined.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbuild -->

the website looks for the 'combined.css' file in 'mydomain.com/css/combined.css', when in reality its location is something like this: 'mydomain.com/wp-content/themes/sometheme/css/combined.css'.

Wordpress has a php function to generate a path to the root of the theme like this: <? bloginfo('template_directory'); ?>. Right now I just add this manually to the places where I have useref blocks, but it would be much easier if I could just have useref prefix this using the options, since now I have to remember to add the above line every time i deploy my theme.

I tried just adding the Wordpress code in the blocks like this:

<!-- build:css <?bloginfo('template_directory');?>/css/combined.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbuild -->

This would make the path inserted in the href attribute look correct, but gulp-useref would fail (it basically doesn't stop running at all - never halts the process). I guess the reason is obvious - useref now tries to create the 'combined.css' in a directory called '<?bloginfo('template_directory');?>/css/' (which I assume is illegal).

Is there any way to prefix or add a base path to the src/href output path, without changing the actual path the 'combined.css' file is stored at?

jonkemp commented 8 years ago

What does your theme structure look like, and where does the gulpfile.js sit live in relation to it?

NikolajDL commented 8 years ago

I guess it's pretty standard. Looks somewhat like this:

root

The content of the ´dist´ folder is what makes up the theme and I have a build task set up in my gulpfile for moving things to the ´dist´ folder. This is where I use gulp-useref and it works as intended. The problem comes when i deploy my theme to Wordpress, since the website is run in relation to the wordpress root, so every static resource referenced in the HTML, needs to link directly into the theme directory. Wordpress provides a helper function to do this, but since the to my combined stylesheet is generated by useref, I have to manually add this helper function every time I deploy.

What I'm basically looking for is an option to prefix the value in the href attribute added to (or perhaps Githubissues.

  • Githubissues is a development platform for aggregating issues.