在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):Janpot/gulp-htmlbuild开源软件地址(OpenSource Url):https://github.com/Janpot/gulp-htmlbuild开源编程语言(OpenSource Language):JavaScript 93.3%开源软件介绍(OpenSource Introduction):gulp-htmlbuild
WarningI'm still prototyping on this package so expect changes to it's API! Also, I'm open to suggestions. UsageFirst install it npm install --save-dev gulp-htmlbuild then add it to your gulpfile: gulp.task('build', function () {
gulp.src(['./index.html'])
.pipe(htmlbuild({
// build js with preprocessor
js: htmlbuild.preprocess.js(function (block) {
// read paths from the [block] stream and build them
// ...
// then write the build result path to it
block.write('buildresult.js');
block.end();
})
}))
.pipe(gulp.dest('./build'));
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- htmlbuild:js -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<!-- endbuild -->
</body>
</html> And turn it into: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="buildresult.js"></script>
</body>
</html> You can find more examples in the APIhtmlbuild(options)options
htmlbuild.preprocess.js(buildFn)a preprocessor you can use to wrap your buildfunction in. It extracts script paths from the block. In this case you also write paths to the block. They will get templated into link elements. buildFna function that has the same form as a normal buildfunction, only the argument here is a stream that contains script paths. You are expected to write script paths to this stream as well. htmlbuild.preprocess.css(buildFn)a preprocessor you can use to wrap your buildfunction in. It extracts stylesheet paths from the block. In this case you also write paths to the block. They will get templated into link elements. buildFna function that has the same form as a normal buildfunction, only the argument here is a stream that contains stylesheet paths. You are expected to write paths to this stream as well. Extended exampleexample gulp file: var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(),
htmlbuild = require('../lib'),
es = require('event-stream');
// pipe a glob stream into this and receive a gulp file stream
var gulpSrc = function (opts) {
var paths = es.through();
var files = es.through();
paths.pipe(es.writeArray(function (err, srcs) {
gulp.src(srcs, opts).pipe(files);
}));
return es.duplex(paths, files);
};
var jsBuild = es.pipeline(
plugins.concat('concat.js'),
gulp.dest('./build/js')
);
var cssBuild = es.pipeline(
plugins.concat('concat.css'),
gulp.dest('./build/css')
);
gulp.task('build', function () {
gulp.src(['./index.html'])
.pipe(htmlbuild({
// build js with preprocessor
js: htmlbuild.preprocess.js(function (block) {
block.pipe(gulpSrc())
.pipe(jsBuild);
block.end('js/concat.js');
}),
// build css with preprocessor
css: htmlbuild.preprocess.css(function (block) {
block.pipe(gulpSrc())
.pipe(cssBuild);
block.end('css/concat.css');
}),
// remove blocks with this target
remove: function (block) {
block.end();
},
// add a template with this target
template: function (block) {
es.readArray([
'<!--',
' processed by htmlbuild (' + block.args[0] + ')',
'-->'
].map(function (str) {
return block.indent + str;
})).pipe(block);
}
}))
.pipe(gulp.dest('./build'));
}); it will take following html file <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- htmlbuild:css -->
<link href="css/stylesheet1.css"/>
<link href="css/stylesheet2.css"/>
<!-- endbuild -->
</head>
<body>
<!-- htmlbuild:template header -->
<!-- endbuild -->
<!-- htmlbuild:js -->
<script src="js/src1.js"></script>
<script src="js/src2.js"></script>
<!-- endbuild -->
<!-- htmlbuild:remove -->
This will be removed in the build output
<!-- endbuild -->
<!-- htmlbuild:template footer -->
<!-- endbuild -->
</body>
</html> and turn it into: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/concat.css"/>
</head>
<body>
<!--
processed by htmlbuild (header)
-->
<script src="js/concat.js"></script>
<!--
processed by htmlbuild (footer)
-->
</body>
</html> While concatenating stylesheets and scripts on the fly. License |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论