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-injectIn 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>This example demonstrates how to inject files from multiple different streams into the same injection placeholder.
Install event-stream with: npm install --save-dev event-stream and use its merge function.
Code:
var es = require('event-stream'),
inject = require('gulp-inject');
// Concatenate vendor scripts
var vendorStream = gulp.src(['./src/vendors/*.js'])
.pipe(concat('vendors.js'))
.pipe(gulp.dest('./dist'));
// Concatenate AND minify app sources
var appStream = gulp.src(['./src/app/*.js'])
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
gulp.src('./src/index.html')
.pipe(inject(es.merge(vendorStream, appStream)))
.pipe(gulp.dest('./dist'));Use gulp-inject's starttag option.
Code:
var inject = require('gulp-inject');
gulp.src('./src/index.html')
.pipe(inject(gulp.src('./src/importantFile.js', {read: false}), {starttag: '<!-- inject:head:{{ext}} -->'}))
.pipe(inject(gulp.src(['./src/*.js', '!./src/importantFile.js'], {read: false})))
.pipe(gulp.dest('./dist'));And in your ./src/index.html:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:head:js -->
<!-- only importantFile.js will be injected here -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- the rest of the *.js files will be injected here -->
<!-- endinject -->
</body>
</html>If you use Bower for frontend dependencies I recommend using gulp-bower-files and injecting them as well.
Code:
var bowerFiles = require('gulp-bower-files'),
inject = require('gulp-inject'),
stylus = require('gulp-stylus'),
es = require('event-stream');
var cssFiles = gulp.src('./src/**/*.styl')
.pipe(stylus())
.pipe(gulp.dest('./build'));
gulp.src('./src/index.html')
.pipe(inject(es.merge(
bowerFiles({read: false}),
cssFiles,
gulp.src('./src/app/**/*.js', {read: false})
)))
.pipe(gulp.dest('./build'));Note remember to mount ./bower_components, ./build and ./src/app as static resources in your server to make this work.
You can customize gulp-inject further by using the transform function option, e.g. by injecting files into a json-file.
Code:
gulp.src('./files.json')
.pipe(inject(gulp.src(['./src/*.js', './src/*.css', './src/*.html'], {read: false}), {
starttag: '"{{ext}}": [',
endtag: ']',
transform: function (filepath, file, i, length) {
return ' "' + filepath + '"' + (i + 1 < length ? ',' : '');
}
}))
.pipe(gulp.dest('./'));Initial contents of files.json:
{
"js": [
],
"css": [
],
"html": [
]
}Code:
gulp.src('./bower.json')
.pipe(inject(gulp.src(['./dist/app.min.js', './dist/app.min.css'], {read: false}), {
starttag: '"main": [',
endtag: ']',
transform: function (filepath, file, i, length) {
return ' "' + filepath + '"' + (i + 1 < length ? ',' : '');
}
}))
.pipe(gulp.dest('./'));Code:
gulp.src('./karma.conf.js')
.pipe(inject(gulp.src(['./src/**/*.js'], {read: false}), {
starttag: 'files: [',
endtag: ']',
transform: function (filepath, file, i, length) {
return ' "' + filepath + '"' + (i + 1 < length ? ',' : '');
}
}))
.pipe(gulp.dest('./'));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 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.