Add prefix to the src/href output path

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?

[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 <link> 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 <link> (or perhaps <script>). Something like this:

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.

[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));