Merge
<link>or<script>on html. This is necessary work with gulp-concat
npm install gulp-replace
var merge=require('gulp-merge-link');
gulp.task('merge', function () {
gulp.src('./html/index.html')
.pipe(merge({
'base.css':['header.css','footer.css','./lib/common.css'],
'base.js':['lib/jquery.js','header.js']
}))
.pipe(gulp.dest('dist/html/'));
});var merge=require('gulp-merge-link');
gulp.task('merge', function () {
gulp.src('html/*.html')
.pipe(merge({
'base.css':['header.css','footer.css','./lib/*.css'],
'base.js':['lib/*.js','header.js']
}))
.pipe(gulp.dest('dist/html/'));
});var merge = require('gulp-merge-link');
gulp.task('merge', function () {
gulp.src('html/*.html')
.pipe(merge({
'base.css': ['header.css', 'footer.css', './lib/*.css'],
'base.js': ['lib/*.js',<
808A
/span> 'header.js']
}, {debug: true}
))
.pipe(gulp.dest('dist/html/'));
});
});Type:{Array}
key/value Map.
key:{String}
The new Url of some file concated.
value: {Array}
Urls will be replaced.
Type:{Object}
Default:{debug:false}
Print some information about script or link replaced.
Before:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="footer.css"/>
<link href="header.css"/>
<link rel="stylesheet" href="./lib/ini.css" />
</head>
<body>
<script src="./lib/jquery.js"></script>
<script type="text/javascript" src="header.js"></script>
<script src="footer.js"></script>
</body>
</html>After require('gulp-merge-link')(options)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css"/>
</head>
<body>
<script type="text/javascript" src="base.js"></script>
<script src="footer.js"></script>
</body>
</html>