gulp-concat-replace
v1.0.5
Published
Replace build blocks with js or css contact in HTML. Like useref but done right.
Downloads
60
Readme
gulp-concat-replace 
Concat(js and css) and Replace build blocks in HTML. Like useref but done right.
Table of Contents
Usage
Install:
npm install --save-dev gulp-concat-replacePut some blocks in your HTML file:
<!-- build:name -->
<script src="./xxx.js" type="text/javascript"></script>
<script src="./xxx1.js" type="text/javascript"></script>
<script src="./xxx2.js" type="text/javascript"></script>
<!-- endbuild -->
or
<!-- build:name -->
<link rel="stylesheet" type="text/css" href="./xxx.css">
<link rel="stylesheet" type="text/css" href="./xxx1.css">
<link rel="stylesheet" type="text/css" href="./xxx2.css">
<!-- endbuild -->
name is the name of the block, and css or js.
API
concatreplace(options)
options
Type: object
- {String} prefix - 合并和文件名的前缀，默认值："concat".
- {String} base - 如果页面引入路径是以“/”开始，相对应于gulpfile.js目录，默认“../”.
- {Object} output - 合并后文件的存储路径，包括css和js的路径（相对于gulpfile.js文件）.默认值：
{"js":"./tmp/js","css":"./tmp/css"}Example
index.html:
<!DOCTYPE html>
<html>
<head>
<!-- build:css -->
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js -->
<script src="/js/player.js"></script>
<script src="/js/monster.js"></script>
<script src="/js/world.js"></script>
<!-- endbuild -->gulpfile.js:
var gulp = require('gulp');
var concatreplace = require('gulp-concat-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(concatreplace({
prefix:"concat",
base:"../",
output:{
css:"./build/css",
js:"./build/js"
}
}))
.pipe(gulp.dest('build/'));//html替换后的目录
});Result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="concat1.css">
</head>
<body>
<script src="js/concat2.js"></script>相关目录
|-gulpfile.js
|-build
|--css
|---concat1.css
|--js
|---contact2.js
|-index.html
感谢
本插件参考了gulp-html-replace，所以需要感谢Vladimir Kucherenko提供了gulp-html-replace