gulp-simple-inject
v0.0.6
Published
Gulp plugin for injecting JS and CSS file references into html files.
Downloads
11
Maintainers
rydahhhReadme
gulp-simple-inject
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.
Installation
npm install gulp-simple-injectUsage
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.jsonHere 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:
gulpThe 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>