gulp4-prefix
v1.0.1
Published
Implementation of html-prefixer for gulp4
Downloads
4
Maintainers
zhangbaokunReadme
gulp4-prefix
modify by gulp-prefix, support gulp4
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('gulp4-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
License
MIT