Gulp-inject is a javascript, stylesheet and webcomponent injection plugin for Gulp streaming build system.
gulp-inject takes a stream of source files, transforms each file to a string and injects each transformed string into placeholders in the target stream files. See Basic usage and More examples below.
Default transforms and placeholders exists for injecting files into html, jade, jsx , less, slm, haml and sass / scss files.
https://www.npmjs.com/package/gulp-inject
npm install --save-dev gulp-inject
Basic usage
The target file src/index.html:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
The gulpfile.js:
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});
