@exuanbo/gulp-inject-inline
A javascript, stylesheet and webcomponent inline injection plugin for Gulp.js
Table of Contents
Description
@exuanbo/gulp-inject-inline transforms content of each source file to a string and injects each transformed string into placeholders in the target stream files.
This plugin does not do any minification to source files, so whitespaces will be preserved. It's better to use it after transformations like gulp-uglify-es or gulp-clean-css.
Installation
Install @exuanbo/gulp-inject-inline as a development dependency
npm install --save-dev @exuanbo/gulp-inject-inlineUsage
Injection placeholders are comments as html syntax <!-- inject-inline: filePath --> and css/js syntax /* inject-inline: filePath */
By default the injected file path is relative to each target file's cwd. If the provided path starts with /, it will be considered relative to the directory of gulpfile.js
Example
Project structure
├── src
│ ├── css
│ │ └── style.css
│ ├── js
│ │ └── script.js
│ ├── template
│ │ └── head.html
│ └── index.html
└── gulpfile.jsTarget file src/index.html
<html>
<head>
<!-- inject-inline: /src/template/head.html -->
<style>
/* inject-inline: ./css/style.css */
</style>
<script>
/*inject-inline:js/script.js*/
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>gulpfile.js
const gulp = require('gulp')
const injectInline = require('@exuanbo/gulp-inject-inline')
gulp.task('inject', () => {
return gulp.src('src/index.html')
.pipe(injectInline())
.pipe(gulp.dest('dist'))
})dist/index.html after running gulp inject
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta title="test">
<style>
body {
background-color: #333;
}
h1 {
color: #EEE;
}
</style>
<script>
console.log('foobar')
</script>
</head>
<body>
<h1>Lorem Ipsum</h1>
</body>
</html>Indentation
Note that existing indentation won't be preserved.
Target file src/index.html
<html>
<head>
<style>
/* inject-inline: ./css/style.css */
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Source file src/css/style.css
body {
background-color: #333;
}
h1 {
color: #EEE;
}dist/index.html
<html>
<head>
<style>
body {
background-color: #333;
}
h1 {
color: #EEE;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>