vfk/gulp-html-replace

Replace build blocks in HTML. Like useref but done right.

gulp-html-replace's Issues

Don't work with html in one string

I generate html with build comments, but after replace my html is empty

Support for Jade/Pug files

Is there any way to use jade comments (double forward slashes) instead of HTML comments to denote build blocks?
So instead of

<!-- build:js -->
<!-- endbuild -->

can I use

//build:js
//endbuild

newline under comment block inserted with keepBlockTags: true

In Jetbrains IDE WebStorm, replacing content and keeping the blocks seems to add a newline under the blocks when the content is changed.

gulp.task('prodBaseUrl', function(){
    gulp.src('index.html')
        .pipe(htmlReplace(
            {
                base:{
                    src: 'https://myprodurl.com/index.html',
                    tpl: '<base href="%s" />'
                }
            },
            {
                keepBlockTags: true
            })
        )
        .pipe(gulp.dest('./'));
});

after a couple of transformations, my index.html goes from this

<!-- build:base -->
<base href="https://myprodurl.com/index.html" />
<!-- endbuild -->

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css'>

to this

<!-- build:base -->
<base href="https://myprodurl.com/index.html" />
<!-- endbuild -->



<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css'>

Support Vinyl files stream as replacement input

I have this case where I'm generating a stylesheet from SASS and want to inject it into the page: I'm inline a subset of the main stylesheet for rendering optimisation (above the fold).

Right now, gulp-html-replace supports string or file path as a replacement but it would be nice for my use case, and any input actually, if it could be delivered through a stream of Vinyl files.

See bellow. The main stream would "wait" internally for the cssInline input stream to end then continue.

gulp.src('app/index.html', {base: 'app'})
        .pipe(htmlreplace({
          cssInline: {
            src: gulp.src('inline.scss').pipe(sass()),
            tpl: '<style>%s</style>'
          }
        }))

Interested in a contribution?

I've created a branch that allows extended substitution codes in a template - right now only %f and %e for the current filename (without extension) and extension.

htmlreplace({
    tag: {
        src: '',
        tpl: '<script src="%f.min.js"></script>'
        }
}

If the file containing <!-- build:tag --> was named xyzzy.html then <script src="xyzzy.min.js"></script> would be inserted into the file. All the normal options for src: will work in the same build tag and the template can include %s as well to handle the normal options.

The mechanism could be extended to insert timestamps or almost any bit of information. With some more work it could be extended further to let the user provide functions to supply information to be inserted.

If you're interested in checking it out I can push my changes to a branch. Or I could just send the zipped code. Let me know. I haven't updated the README.md yet; if you'd like to integrate the changes I will.

Thanks for putting this together. It's been great for me to learn more about how a gulp extension works.

Possible to pass the relative into the object?

I have several HTML files i'm looping through in order to update my 'source' files with my 'dist' files. An example would be /indext.hml linking to <script src="js/main.js> and /pages/foo.html linking to the same file via <script src="../js/main.js">.

Given the relative paths, setting a static option value doesn't work. I could set a root value, but this is actually a boilerplate build system that is shared, so that makes it a tougher sell. Here's my task, didn't know if you had any ideas on how it would be possible to pass the base path in...

var gulp = require('gulp'),
    htmlreplace = require('gulp-html-replace'),
    htmlFiles = ['./**/*.html'];

gulp.task('html', function() {
    return gulp
      .src(htmlFiles , { cwd: './src', base: './src' })
      .pipe(htmlreplace({
        'css-vendor': relative.path  + 'vendor.css',
        'css-app': relative.path + 'app.css',
        'js-vendor': relative.path + 'vendor.js',
        'js-app': relative.path + 'app.js'
      }))
      .pipe(gulp.dest('./dist'));

It's not working at all

I've basically copy pasted your example but surprisingly it's leaving the html intact.

My gulpfile task:

var build_destino = 'build/';

gulp.task('htmlreplace', ['clean'], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'css': 'css/style.min.css',
        'js': 'js/main.min.js'
    }))
    .pipe(gulp.dest(build_destino));
});

Console output is clean:

[02:23:59] /.../web $ gulp
[02:24:58] Using gulpfile /.../web/gulpfile.js
[02:24:58] Starting 'clean'...
[02:24:58] Finished 'clean' after 13 ms
[02:24:58] Starting 'scripts'...
[02:24:58] Starting 'styles'...
[02:24:58] Starting 'images'...
[02:24:58] Starting 'htmlreplace'...
[02:24:58] Finished 'htmlreplace' after 4.07 ms
[02:24:58] Starting 'minhtml'...
[02:24:58] Finished 'minhtml' after 4.95 ms
[02:24:58] Starting 'resto'...
[02:24:58] Finished 'resto' after 3.78 ms
[02:24:59] Finished 'styles' after 307 ms
[02:24:59] Finished 'scripts' after 614 ms
[02:25:01] gulp-imagemin: Minified 16 images (saved 0 B - 0%)
[02:25:01] Finished 'images' after 2.85 s
[02:25:01] Starting 'default'...
[02:25:01] Finished 'default' after 4.67 μs
[02:25:01] /.../web $

index.html before:

     <!-- build:css -->
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/fontface.css" />
    <link rel="stylesheet" href="css/estilos.css" />
    <!-- endbuild -->

And after:

     <!-- build:css -->
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/fontface.css" />
    <link rel="stylesheet" href="css/estilos.css" />
    <!-- endbuild -->

(same with the JS part)

So... any clues? Thanks!

[Enhancement] Add support of one-string placeholders

Example

<title><!-- @build:<name> --></title>

Does not work without doctype

I had to add <!DOCTYPE html> to my html to get this module not completely wang the output. This seems like a bug.

Allow for multiple variables in template

Hi,

This is kind of related to issue #1. We are using RequireJS on a website and need to modify 2 attributes in our script tag: data-main and src.

Would something like this fit in your vision of the plugin (allowing to pass an array or replacement when using a template) ?

.pipe(htmlreplace({
  'rjs': {
    src: [data-main.js', 'require-src.js'],
    tpl: '<script data-main="%1$s" src="%2$s"></script>'
  }
}))

Cheers

Partially minified output

Hi,

I've encountered an issue with this plugin when piping some "partially" minified.
I'm using jade templating with non-prettified output. The html output is still more than one line because I have some inline javascript that is outputted as is on multiple line (analytics code).
For that reason, we don't get in the special case where you split the lines manually and as a result, the output is mangled and incomplete.
I have removed the linefeed from the google analytics snippet as a workaround for now.

Cheers

Is it possible to feed the parsed block down to additional plugins?

I possible I'd like to configure the blocks in html and feed only the contained scripts for example to the uglify plugin. Is this possible?

How to select multiple files as the replacement?

I would like to select files through this way :

gulp.src('./src/index.html')
  .pipe(g.htmlReplace({
    js: './src/**/*.js'
  }))

but the file just like this :

<script src="./src/**/*.js"></script>

what I want is to replace all the matching files, is it possible?
thanks.

Replace fails in file with mixed line endings

Hi,

when I have a file, that generally has LF line endings, but for some reason, there
are also some CRLF line endings, then htmlreplace does not replace anything in the file.

Deleting html instead of replacing src

Not working for me at all.
It is just deleting everything in index.html file, starting from the part that have to be modified:

So this part:

<!-- build:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="js/app.js"></script>
<!-- endbuild -->

And everything bellow it disappears.

Here is my gulp task.

gulp.task('htmR', function() {
   gulp.src('app/index.html') 
      .pipe(htmlreplace({
         js: 'js/bundleB.min.js'
      }))
      .pipe(gulp.dest('app/'));
});

Is it compatible with node 0.10?

replace frequently

Hi,

I was hoping to use gulp-html-replace for updating script embeds with hashed filenames for cache control. But now I see, that it removes the block tags after replace, which prevents me from replacing it again and again.

It would be awesome, if I could have a flag, that tells your script to not remove the block tags, so that I could replace over and over again, whenever i create a new hash filename.

Add Closure to manipulate the data

Would be awesome to have the option to add Clousre for manipulating the data before replaceing it completely.

htmlreplace({'replace': 'test'}, function(data) {
// data.manipulate();
})

After `yarn add` none of dependencies is installed

In node_modules/gulp-html-replace directory node_modules not created

module.js:471
    throw err;
    ^
Error: Cannot find module '../node_modules/gulp-html-replace/node_modules/clone'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/baskovskiy/Рабочий стол/frontend-v2/gulp-tasks/build_version.js:2:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Replacing forwardslashes

plugin unexpectedly replaces forward slashes:

        <!-- build:js -->
        <script src="/assets/scripts/lib/require/require.js" data-main="/assets/scripts/main"></script>
        <!-- endbuild -->

            gulp.src('index.html')
                .pipe(htmlreplace({
                    js: {
                        src: '/assets/scripts/main.js',
                        tpl: '<script="%s">'
                    }
                }))
                .pipe(chmod(777))
                .pipe(gulp.dest(paths.html.dest));

results in

<script="  assets scripts main.js">

Incorrectly deleting build blocks

Hi, so I have the following gulpfile:

var gulp = require("gulp");
var htmlreplace = require("gulp-html-replace");

gulp.task("build", function () {
  return gulp.src("test.html")
    .pipe(htmlreplace({
      "test-content": ""
    }))
    .pipe(gulp.dest("dist"));
});

and this html file:

<html>
<body>
  main content

  <!-- build:test-content -->
    test content here
  <!-- endbuild -->

  <!-- build:prod-content -->
    prod content here
  <!-- endbuild -->
</body>
</html>

when i run the gulp task i get the following....

<html>
<body>
  main content



</body>
</html>

....the content within the "build:prod-content" block is being removed as well even though i have not asked the gulp task to touch it. Why is this happening and is there a way around this?

Im using v1.5.4, gulp v3.9.0

Many thanks

How can I include all js files in folder and subfolders?

Hey,

I tring to include all js files in folder and subfolders.
htmlreplace({
js: {
src: '/dir/*/.js',
tpl: '<script src="%s"></script>'
}
})

What the way to do that?

Thanks,
Pavel

When keepUnassigned = true, comments are remove?

I would like to run htmlReplace twice rather than once. After the first run, it seems like the comments are removed

gulp-html-replace/lib/block.js

Line 24 in 549aaaa

return this.config.keepUnassigned ? [this.originalContent] : [];

.

Let me your thoughts and I am willing to make a PR.

tldr; I am trying to avoid this for 1st htmlReplace run:

htmlReplace({
    config: {
        src: '',
        tpl: '<!-- build:config --><!-- endbuild -->'
    }
})

Allow for tasks with special characters in name

Thanks for the clever tool!

I'm using extract-text-webpack-plugin to generate a manifest file:

{
  "app.css": "app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css",
  "app.css.map": "app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css.map",
  "app.js": "app.bundle.fa373866e4cc4051adb3.js",
  "app.js.map": "app.bundle.fa373866e4cc4051adb3.js.map"
}

to pipe into gulp-html-replace like this:

const manifest = require('./manifest.json')
gulp
  .src('.app/index.html')
  .pipe(gulpHtmlReplace(manifest))
  .pipe(gulp.dest('dist/index.html'))

But it seems it doesn't like the .'s in the filenames because my index.html never changes:

<!-- build:app.css -->
<link rel="stylesheet" href="app.css">
<!-- endbuild -->

<!-- build:app.js -->
<script src="app.js"></script>
<!-- endbuild -->

However, if I manually remove the "." from the manifest filenames and the task names in the html (so that they both read like <!-- build:appcss -->) then it does its job:

<link rel="stylesheet" href="app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css">
<script src="app.bundle.fa373866e4cc4051adb3.js"></script>

I couldn't see anything in the readme mentioning special characters. Is this a bug?

As a workaround I could always strip special characters out of the generated manifest but this isn't ideal since I don't know what could break the tasks besides just periods.

Thanks for any help.

Not keeping the order of my CSS ?

This might not be the right place to ask this.., but my html blocks aren't keeping the correct order when running my build task. Do you know the best way to fix this?

Consider the following scenario:

HTML

    <!-- build:css -->
    <link rel="stylesheet" href="css/zebra.css">
    <link rel="stylesheet" href="css/apple.css">
    <!-- endbuild -->

GULP FILE (gulpfile.js)

    /* HTML
    ************************************/
    gulp.task('html', function() {
      return gulp.src(config.htmlin)
        .pipe(htmlreplace({
          'css': 'css/styles.min.css'
        }))
        .pipe(htmlmin({
          sortAttributes: true,
          sortClassName: true,
          collapseWhitespace: true
        }))
        .pipe(gulp.dest(config.dist));
    });
    
    /* CSS
    ************************************/
    gulp.task('css', function() {
      return gulp.src(config.cssin)
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({ browsers: ['last 4 versions'], grid: true }))
        .pipe(concat(config.cssoutname))
        .pipe(cleancss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.cssout))
        .pipe(browsersync.stream());
    });

RESULT (styles.min.css)

    .apple{background:red;}.zebra{background:black;color:white;}

I know the problem exists when concatenating the files together..but I'm unsure how to get gulp-html-replace and gulp-concatenate to work together.

Add custom tag option

Hi,

I'm trying to add a way to customize "build" and "endbuild" tags inside the parser regexp, so I moved the regexp inside the Parser constructor and converted the regexp literal to a string:

this.regex = new RegExp("(\\n?)([ \\t]*)(<!--\\s*" + config.tagName + ":(\\w+(?:-\\w+)*)\\s*-->)\\n?([\\s\\S]*?)\\n?(<!--\\s*end" + config.tagName + "\\s*-->)\\n?", "ig");

Inside the regexp I just escaped the "\" character and concatenated a custom tagname. For some reason the tests fail because the output is different. Since I'm no expert in RegExp, could you please let me know if the regexp above is correct?

The fork is here: https://github.com/lucassp/gulp-html-replace

Thanks!

"Like useref but done right" details?

Hi @VFK,
I use gulp-useref in projects (like https://github.com/Swiip/generator-gulp-angular) and I am not totally happy.
I think migrate to your gulp-html-replace

But can you expose why your plugin is better?

The path is not replaced

Hello,

When launching the build the path is not replaced by .min.
I tried several ways following the documentation nothing works

My gulp

gulp.task('replace', function () {
  return gulp.src(['*.html'])
    .pipe(htmlReplace({
      css: {
        src: [['assets/css/app.min.css', 'assets/css/owl.carousel.min.css', 'assets/css/all.min.css']],
        tpl: '<link rel="preload" href="%s" as="style" onload="this.rel=\'stylesheet\'">'
      },
    })).pipe(gulp.dest('./dist'));
});

gulp.task("default", gulp.series('clean', 'replace', 'build'));

<!-- build:css -->
<link rel="preload" href="assets/css/app.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/owl.carousel.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/all.css" as="style" onload="this.rel='stylesheet'">
<!-- endbuild -->

After build :

<!-- build:css -->
<link rel="preload" href="assets/css/app.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/owl.carousel.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/all.css" as="style" onload="this.rel='stylesheet'">
<!-- endbuild -->`

Thank you for your help

Multiple Tag Replace Inserts Into First Placeholder

When using the multiple tag replacement feature, the source tags array gets put into the first placeholder.
Ex. Code:

gulp.task('statics-admin', function () {
    return gulp.src(['src/admin/index.cshtml'])
            .pipe(htmlreplace({
                js: {
                    src: [['ui/dist/admin/main.js', 'ui/bower_modules/requirejs/require.js']],
                    tpl: '<script src="%s" data-main="%s"></script>'
                }
            }))
            .pipe(gulp.dest('./dist/admin'));
});

With the initial script tag looking like:


< script src="ui/bower_modules/requirejs/require.js" data-main="ui/src/admin/main"></script>



The output for the script tag becomes:

< script src="ui/dist/admin/main.js,ui/bower_modules/requirejs/require.js" data-main="%s"></script>


Based off of the documentation for util.format, it is expecting a format string, and then a list of parameters. Ex.

util.format('%s:%s', 'foo', 'bar', 'baz'); // 'foo:bar baz'


Inside lib/block.js, the following line is executed:

if (this.template) {
return this.indent + util.format(this.template, replacement);
}


With replacement being an array of an array, we get incorrect results, because util.format is expecting another variable after replacement.

Allow for optional attributes in script tag

Hi,

It would be nice to have 'options' for the final script file to be able to add 'defer' or 'async' attributes.
More generic, be able to add 'attr'='value' in the script tag.

Thx

Support useref like blocks

To support parsing useref blocks ie.

<!-- build:css combined/style.css -->

regex could become:

var regex = /(\n?)([ \t]*)(<!--\s*build:(\w+(?:-\w+)*)\s+[^-]*\s*-->)\n?([\s\S]*?)\n?(<!--\s*endbuild\s*-->)\n?/ig;

I need html replacement to work aside useref.

How to find only file name and replace without modify the entire path

Hi,
Is it possible to just replace the file name instead replace the entire path?
I have issue that the path is dynamically added.

Example:

  <!-- build:app-css -->
  <link rel="stylesheet" href="{% if rootPath %}{{ rootPath }}{% endif %}{% if subPath %}{{ subPath }}{% endif %}css/app.css">
  <!-- endbuild -->

Is there a way to just replace the file name?

After run build, i only need to rename the 'app.css' with suffix 'app.min.css' without changing the path and directory.

Check if input file is HTML?

Not as much of an issue as a feature request but can it check if the file is html and not attempt the operation if not.

newline added to block when 'keepUnassigned' and 'keepBlockTags' are true

When using GHR with options keepUnassigned and keepBlockTags, every time I run the plugin, a newline is added below the content, but above the 'endbuild' comment.

For example:

    <!-- build:icon -->
    <link rel="shortcut icon"
        href="../assets/favicon64.png" />
    <!-- endbuild -->

    <link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
        rel='stylesheet'
        type='text/css'>

After a few runs, I get this:

    <!-- build:icon -->
    <link rel="shortcut icon"
        href="../assets/favicon64.png" />




    <!-- endbuild -->

    <link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
        rel='stylesheet'
        type='text/css'>

This is very similar to #42 but here the newline is getting added before the closing comment, rather than below.

By the way, I tried debugging this issue, and what I noticed is that because during this particular run of the plugin, the icon block didn't have any matching task in the config and therefore no replacements, the Block class is returning originalContent, and since it already has a newline, joining that with the beginTag and the endTag is what is adding extra linefeeds. I was able to fix this locally by changing:

    if (!this.replacements.length) {
        return this.config.keepUnassigned ? [this.originalContent] : [];
    }

to:

    if (!this.replacements.length) {
        return this.config.keepUnassigned ? [this.indent + this.originalContent.trim()] : [];
    }

Concat and replace files

With gulp-userref I can concat script files into one, minify the result and replace the script tags with the new minified script. I can't see how that is possible in gulp-html-replace - is it?

OTH gulp-html-replace will let me replace a block with something I specify and gulp-userref doesn't do this.

I need to be able to perform both of these tasks.

Thanks for very useful gulp plugin.

How to process files found in a block?

How should I go about intercepting the contents of blocks found by this plugin, so that I can (for example) run a concat task on all scripts found in a block?

Allow wild cards in Files array.

Hi,
In my development workflow i want to be able to see all my javascript files, and i don't want to list them all.
Is it possible to support wildcards in the files array?

cumps ;)

Incorrect string replacement more than one source

@VFK

I have two html files that needs to be processed with similar blocks.

My gulpfile task:

//process view files - fix paths
gulp.task('process-view', function () {
    return gulp.src([
        './index.html',
        './admin.html'
        ])
        .pipe(htmlreplace({
        css: 'assets/style.min.css',
        js: {
            src: [['js/context.min.js', 'js/require.js']],
            tpl: '<script data-main="%s" src="%s"></script>'
        }
    }))
        .pipe(gulp.dest('./dist/views'));
});

My HTML(s) all look like:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- build:css -->
    <link href="../assets/font-awesome.css" rel="stylesheet" />
    <link href="../assets/pnotify.custom.min.css" rel="stylesheet" />
    <!-- endbuild -->

    <!-- build:js -->
    <script src="../lib/jquery-2.1.3.min.js"></script>
    <script data-main="../js/bootstrapper" src="../lib/require.js"></script>
    <!-- endbuild -->
</head>
<body>
</body>
</html>

The problem lies with the second source file (./admin.html).
The output (NOTE: line-breaks were removed):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="assets/style.min.css">
    <script data-main="<script data-main="%s" src="%s"></script>" src="js/context.min.js"></script> js/require.js
</head>
<body>
</body>
</html>

Please suggest a workaround for this.

Comment Out a replace

Image i have this index.html

<!-- build:dev -->
<script src=angular.js></script>
<script src=app.js></script>
<!--endbuild -->

<!-- build:prod -->
<!-- <script src=bundle.js></script> -->
<!--endbuild -->

it would be nice if i can have a task to specify to comment out the section of build dev and uncomment the section of build prod so the result would be:

<!-- build:dev -->
<!-- <script src=angular.js></script> -->
<!-- <script src=app.js></script> -->
<!--endbuild -->

<!-- build:prod -->
<script src=bundle.js></script>
<!--endbuild -->

What do you guys think?

Treats JS script like a url to JS script

I have the following template:

<!-- Hotjar Tracking Code -->
<script>
    (function (h, o, t, j, a, r) {
        h.hj =
            h.hj ||
            function () {
                (h.hj.q = h.hj.q || []).push(arguments);
            };
        h._hjSettings = { hjid: '%HJID%', hjsv: '%HJSV%' };
        a = o.getElementsByTagName('head')[0];
        r = o.createElement('script');
        r.async = 1;
        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
        a.appendChild(r);
    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
</script>

And I was using this plugin like so:

function createCopyHTMLTask(env) {
    return gulp
        .src(html, { base: './' })
        .pipe(
            gulpHtmlReplace({
                hotJar: fs.readFileSync(hotJarTemplatePath, 'utf-8')
            }),
        )
        .pipe(gulp.dest(distPath));
}

And because of this logic:
https://github.com/VFK/gulp-html-replace/blob/HEAD/lib/block.js#L65-L69

My script was added like this:

<script src="<!-- Hotjar Tracking Code --> <script> (function (h, o, t, j, a, r) { h.hj =...

Which is obviously not right

Conditional Replacement

I use gulp-html-replace in a small static page. It consists of 7 different pages with a bootstrap navigation.
I want to set the CSS class "active" for different HTML pages in the appropriate navigation and load the entire navigation from a template like I did with the footer.

gulp.task('buildHTML', function() {
	gulp.src('src/html/*.html')
		.pipe(htmlreplace({
			footer: gulp.src('src/html/parts/footer.part.html'),
			js: {
				src: ['jquery-3.2.1.min.js', 'bootstrap.min.js'],
				tpl: '<script type="text/javascript" src="/js/%s"></script>'
			}
		}))
		.pipe(gulp.dest(rootDir + '/'));
});

Is this possible?

Replace Issue

I have this code...

return gulp.src('app/*.html')
    .pipe($.htmlReplace({
      vulcanized: {
        src: 'elements/elements.vulcanized.html',
        tpl: '<link rel="import" href="%s">'
      }
    }))
    .pipe(gulp.dest('dist'));

<!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <!-- endbuild -->

  <!-- build:vulcanized elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endbuild-->
</head>
<body class="polymer-theme" unresolved>
  <!-- build:js scripts/vendor.js -->
  <!-- bower:js -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->

After

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

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">

  <!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <!-- build:vulcanized elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
</head>
<body class="polymer-theme" unresolved>
  <!-- build:js scripts/vendor.js -->
  <!-- bower:js -->
  <!-- endbower -->

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>

resolvePaths on true and change root folder

Hello
is it possible to define the root folder with resolvePaths ?
My problem is that my root folder is a sub level to my gulpfile.js file

Exemple :
|-root
|--dist
|---subfolder
|---css
|---js
|--- index.html
|--node_modules
|--src
|---subfolder
|---sass
|---js
|--- index.twig
|--gulpfile.js

Thank you

Resolving relative paths question

I have bunch of html pages which have 1 or more link tags. Im not sure from you readme if the following situation is possible with your plugin:

<link rel="stylesheet" href="dist/css/style.css/>
<link rel="stylesheet" href="dist/css/style2.css/>

to

<link rel="stylesheet" href="css/style.css/>
<link rel="stylesheet" href="css/style2.css/>```