gulp-inject
Advanced tools
A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
A stylesheet, javascript and webcomponent reference injection plugin for gulp. No more manual editing of your index.html!
First, install gulp-inject as a development dependency:
npm install --save-dev gulp-inject
Then, add it to your gulpfile.js:
Note: New from v.0.3. Here you pipe inject through where to inject.
var inject = require("gulp-inject");
gulp.src('./src/index.html')
.pipe(inject(gulp.src(["./src/*.js", "./src/*.css"], {read: false})) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(gulp.dest("./dist"));
Note: Old behavior. Here you pipe inject through what to inject.
var inject = require("gulp-inject");
gulp.src(["./src/*.js", "./src/*.css"], {read: false}) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(inject("path/to/your/index.html"))
.pipe(gulp.dest("./dist"));
Add injection tags to your index.html:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:html -->
<!-- any *.html files among your sources will go here as: <link rel="import" href="FILE"> -->
<!-- endinject -->
<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->
</body>
</html>
Type: Stream or String
If Stream
Since v.0.3 you can provide a Vinyl File Stream as input to inject, see Mode 1 in the example above.
If String
Can also be a path to the template file (where your injection tags are). Is also used as filename for the plugin's output file.
Type: String
Default: NULL
Is used as template instead of the contents of given filename. (Only used if fileOrStream is a String)
Type: String or Array
Default: NULL
A path or paths that should be removed from each injected file path.
Type: String
Default: NULL
A path that should be prefixed to each injected file path.
Type: Boolean
Default: true
The root slash is automatically added at the beginning of the path ('/').
Type: String
Default: <!-- inject:{{ext}} -->
Set the start tag that the injector is looking for. {{ext}} is replaced with file extension name, e.g. "css", "js" or "html".
Type: String
Default: <!-- endinject -->
Set the end tag that the injector is looking for. {{ext}} is replaced with file extension name, e.g. "css", "js" or "html".
Type: Function(filepath, file, index, length)
Params:
filepath - The "unixified" path to the file with any ignorePath's removedfile - The File object given from gulp.srcindex (0-based file index)length (total number of files to inject)Default: a function that returns:
<link rel="stylesheet" href="<filename>.css"><script src="<filename>.js"></script><link rel="import" href="<filename>.html">Used to generate the content to inject for each file.
Type: Function(a, b)
Params: a, b (is used as compareFunction for Array.prototype.sort)
Default: NULL
If set the given function is used as the compareFunction for the array sort function, to sort the source files by.
FAQs
A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
The npm package gulp-inject receives a total of 46,893 weekly downloads. As such, gulp-inject popularity was classified as popular.
We found that gulp-inject demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.