Gulp-prefix NPM

gulp-prefix

A gulp plugin inspired by html-prefixer.

Will prefix relative urls in <link>, <script> and <img> tags

You can optionally pass a second argument along with the prefix string to override the default selection statements. The default config looks like this:

[
  { match: "script[src]", attr: "src" },
  { match: "link[href]", attr: "href"},
  { match: "img[src]", attr: "src"},
  { match: "input[src]", attr: "src"}
]

If you have tags which you do not want to prefix, you can pass a third argument containing a regular expression string which, if matched against the attribute, will ignore the tag.

###HTML

<html>
  <head>
    <link href="http://cdnjs.com/some-library.css">
    <link href="css/stylesheets.css">
  </head>
  <body>
    <img src="/images/myImage.jpg"/>
    <script src="//cdnjs.com/some-library.js"></script>
    <script src="js/scripts.js"></script>
    <script src="{{ignore_me_i_am_mustache}}"></script>
  </body>
</html>

###Usage

var gulp = require('gulp'),
    prefix = require('gulp-prefix');

gulp.task('prefix', function(){
  var prefixUrl = "http://mydomain.com/assets";

  gulp.src('index.html')
    .pipe(prefix(prefixUrl, null, '{{'))
    .pipe(gulp.dest('build'));
});

###Output

<html>
  <head>
    <link href="http://cdnjs.com/some-library.css">
    <link href="http://mydomain.com/assets/css/stylesheets.css">
  </head>
  <body>
    <img src="http://mydomain.com/assets/images/myImage.jpg"/>
    <script src="//cdnjs.com/some-library.js"></script>
    <script src="http://mydomain.com/assets/js/scripts.js"></script>
    <script src="{{ignore_me_i_am_mustache}}"></script>
  </body>
</html>

To run tests install jasmine-node globally npm install jasmine-node -g and run jasmine-node spec