posthtml-transfomer is plugin for PostHTML. It process HTML by special directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc.
ph-inline- Loadscriptandlinkcode and make them inline.ph-remove- Remove tags which specified this directive.ph-concat-startandph-concat-end- Concatscriptandlinkcode.
ph-inline directive:
// src/lib.js
console.log('hello posthtml-transformer');
// index.html
<script ph-inline src="src/lib.js"></script>
// index.html after transform
<script>
console.log('hello posthtml-transformer');
</script>ph-remove directive:
// index.html
<body>
<script ph-remove src="src/lib.js"></script>
</body>
// index.html after transform
<body>
</body>ph-concat-start and ph-concat-end directive:
// src/mod1.js
console.log('mod1');
// src/mod2.js
console.log('mod2');
// src/mod3.js
console.log('mod3');
// index.html
<body>
<script ph-concat-start src="src/mod1.js"></script>
<script src="src/mod2.js"></script>
<script ph-concat-end src="src/mod3.js"></script>
</body>
// index.html after transform
<body>
<script>
console.log('mod1');
console.log('mod2');
console.log('mod3');
</script>
</body>Install posthtml-transformer:
npm install posthtml-transformer --save-dev
var gulp = require('gulp');
var posthtml = require('gulp-posthtml');
var phTransformer = require('posthtml-transformer');
gulp.task('posthtml', function(){
var plugins = [
phTransformer({
minifyJS: true,
minifyCSS: true
}),
// phTransformer.match({tag:'html'}, function(node){
// node.attrs = {'hello': 'world'};
// return node;
// }),
// phTransformer.walk(function(node){
// console.log('walk:', node.tag);
// return node;
// })
];
return gulp.src('index.html')
.pipe(posthtml(plugins))
.on('error', function(err){
console.error('error:', err);
})
.pipe(gulp.dest('./build/'))
});minifyJS- minify javascript in HTML, default istrue.minifyCSS- minify css in HTML, default istrue.
match- same asPostHTML'smatch.walk- same asPostHTML'swalk.