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-injectThen, add it to your gulpfile.js:
var inject = require("gulp-inject");
gulp.src("./src/*.ext", {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: String
Path to 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.
Type: String or Array
Default: NULL
A path or paths that should be removed from 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 anyignorePath's removedfile- The File object given fromgulp.srcindex(0-based file index)length(total number of files to inject)
Default: a function that returns:
- For css files:
<link rel="stylesheet" href="<filename>.css"> - For js files:
<script src="<filename>.js"></script> - For html files:
<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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent