Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@exuanbo/gulp-inject-inline
Advanced tools
@exuanbo/gulp-inject-inline
A javascript, stylesheet and webcomponent inline injection plugin for Gulp.js
@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-inline
Usage
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.js
Target 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>
License
Donate
FAQs
A javascript, stylesheet and webcomponent inline injection plugin for Gulp.js
We found that @exuanbo/gulp-inject-inline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 06 Jun 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025