A gulp plugin for injecting CSS and javascript files directly into output files for stellar performance 🚀
This project is a fork of gulp-style-inject. Thank you Vlad Filip!
Use npm to install gulp-inject-code as a development dependency
npm install --save-dev jchmski/gulp-inject-codeThen, add it to your gulpfile.js file
var inject = require("gulp-inject-code");
gulp.src("./src/*.html")
.pipe(inject({
// options (see examples below)
}))
.pipe(gulp.dest("./dist"));gulp-inject-code can be used to inject CSS and javascript. See the examples below to get started.
Add an inject comment where you want to inject the <style></style> rules. The best location is in the head section
Example:
<head>
...
<!-- inject:css -->
</head>Output:
<head>
...
<style>body{margin:0}</style>
</head>Add an inject comment where you want to inject the <script></script> rules. The best location is immediately before the closing body tag
Example:
<body>
...
<!-- inject:js -->
</body>Output:
<body>
...
<script>console.log('wow, what a great plugin')</script>
</body>gulp-inject-code takes two parameters:
- type - a string specifying CSS (
css) or javascript (js) - path - the path to your CSS or javascript file that you want to inject into the page
This example will inject the CSS rules at ./src/css/styles.css directly into all ./src/*.html files:
var inject = require("gulp-inject-code");
gulp.src("./src/*.html")
.pipe(inject({
type: "css",
path: "./src/css/styles.css"
}))
.pipe(gulp.dest("./dist"));This example will inject the JavaScript at ./src/js/scripts.js directly into all ./src/*.html files:
var inject = require("gulp-inject-code");
gulp.src("./src/*.html")
.pipe(inject({
type: "js",
path: "./src/js/scripts.js"
}))
.pipe(gulp.dest("./dist"));