Add prefix to the src/href output path

[NikolajDL]

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 '/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]

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

[NikolajDL]

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

root

• dist
• • css
• • • combined.css
• • js
• • images
• • XXXX.php
• src
• • less
• • js
• • images
• • XXXX.php
• Gulpfile.js

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

return gulp.src(paths.somefiles)
        .pipe($.useref({
            urlPrefix: '<?php bloginfo('template_directory'); ?>/'
        }))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.minifyCss()))
        .pipe(gulp.dest(paths.dist))

The urlPrefix should just be added as a string before the url in the href or src attribute, which would result in the following being generated:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/combined.css">

Nothing else. The directory structure remains the same. Useref still searches for the assets in the same locations and creates the 'combined.css' files in the /dist/css/ folder. It's basically just a 'dumb' insertion.

[stephen-oconnor]

Was there a solution to this? I have a similar issue with ProcessWire, I need useref to look for <?php echo $config->urls->templates;?>/css/application.css.

[mmospanenko]

Hi guys! A have little different problem. I want to build my <!-- build:js(src) scripts/vendor.js --> with current path but with different SRC in html (with 'static/ prefix for Django'). I can change destination pf whole html file but I have to have this file in current (static) folder.

How can I set path for build files and another path for src in html file?

[simonswiss]

+1 on this - CraftCMS here and trying to have the {{siteUrl}}assets/css/bundle.css path :)

[drieschel]

Is there a solution available meanwhile? Something like a string prefix option for the final reference would be great.

Edit: Found a solution with gulp-replace but it's not very clean. A prefix option would make the life much easier:

return gulp.src(sourceDir + '/**/*.twig')
          .pipe(plugins.useref())
          .pipe(plugins.if('*.js', plugins.uglify()))
          .pipe(plugins.if('*.css', plugins.cleanCss()))
          .pipe(plugins.replace(/\{\{wtf\}\}(\/[a-z0-9.\/]+\.(css|js))/gi, '$1')) //Prevent problems with uncommented lines outside a build block
          .pipe(plugins.replace(/(\/[a-z0-9.\/]+\.(css|js))/gi, '{{wtf}}$1'))
          .pipe(gulp.dest(destDir));

[vaileamon]

+1, I have the exact same problem with Craft cms.

Any outputs on this ?

[drieschel]

@ineghi Look at one post above yours. This is working!

[vaileamon]

I'm also using gulp-replace right know, but like you said: "it's not very clean. A prefix option would make the life much easier" as it's more an hack than a solution :-). Not an urgency, but let differentiate the path from the src could be a good idea in the future.

[Sidd27]

+1 Much Need Prefix option

[turakvlad]

+1 need the same feature

[Monstreur]

Is this feature done ?

[jonkemp]

@Monstreur nope.