Gulp plugin for injecting JS and CSS file references into html files.
This plugin takes in a stream of js, css, and html files; and injects the js and css file references into placeholders in the html files.
npm install gulp-simple-inject
Imagine you have a project with the following structure:
|
|--- app
| |
| |--- test
| | |
| | |--- test.js
| | |
| | |--- test.css
| |
| |--- app.js
| |
| |--- app.css
| |
| |---index.html
|
|--- dist
|
|--- node_modules
| |
| |--- etc...
|
|--- gulpfile.js
|
|--- package.json
Here is the content of app/index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- inject:css -->
</head>
<body>
<h1>Test</h1>
<!-- inject:js -->
</body>
</html>
<!-- inject:css --> and <!-- inject:js --> are the placeholders that will be replaced by the css and js file references.
Here is the content of gulpfile.js:
var gulp = require('gulp'),
inject = require('gulp-simple-inject');
gulp.task('default', () => {
return gulp.src('app/**/*')
.pipe(inject({cwd:'app'}))
.pipe(gulp.dest('dist'));
});
The gulp-simple-inject plugin accepts an options argument. Currently there is only one option available: cwd. This option specifies the directory that the injected file paths should be relative to. In this example, the injected file paths will be relative to the app directory.
Run the task we created like so:
gulp
The content of the app directory will now have been copied over to the dist directory. The content of dist/index.html will be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="app.css" /><link rel="stylesheet" type="text/css" href="test/test.css" />
</head>
<body>
<h1>Test</h1>
<script src="app.js"></script><script src="test/test.js"></script>
</body>
</html>