Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gulp-inject

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gulp-inject - npm Package Compare versions

Comparing version 0.4.1 to 1.0.0

src/inject/index.js
src/tags/index.js
src/transform/index.js

251

index.js

@@ -1,252 +0,9 @@

'use strict';
var fs = require('fs'),
es = require('event-stream'),
path = require('path'),
gutil = require('gulp-util'),
PluginError = gutil.PluginError,
File = gutil.File;
module.exports = function(fileOrStream, opt){
if (!fileOrStream) {
throw new PluginError('gulp-inject', 'Missing fileOrStream option for gulp-inject');
}
if (!opt) {
opt = {};
}
if (opt.transform && typeof opt.transform !== 'function') {
throw new PluginError('gulp-inject', 'transform option must be a function');
}
if (opt.sort && typeof opt.sort !== 'function') {
throw new PluginError('gulp-inject', 'sort option must be a function');
}
// Defaults:
opt.starttag = opt.starttag || '<!-- inject:{{ext}} -->';
opt.endtag = opt.endtag || '<!-- endinject -->';
opt.ignorePath = toArray(opt.ignorePath);
opt.addRootSlash = typeof opt.addRootSlash !== 'undefined' ? !!opt.addRootSlash : true;
opt.transform = opt.transform || function (filepath) {
switch(extname(filepath)) {
case 'css':
return '<link rel="stylesheet" href="' + filepath + '">';
case 'js':
return '<script src="' + filepath + '"></script>';
case 'html':
return '<link rel="import" href="' + filepath + '">';
}
};
// Is the first parameter a Vinyl File Stream:
if (typeof fileOrStream.on === 'function' && typeof fileOrStream.pipe === 'function') {
return handleVinylStream(fileOrStream, opt);
}
// The first parameter is a filepath:
var collection = {};
var firstFile = null;
function endStream(){
/* jshint validthis:true */
if (Object.keys(collection).length === 0) {
return this.emit('end');
}
var templatePath = path.resolve(firstFile.cwd, fileOrStream);
var template = opt.templateString || fs.readFileSync(templatePath, 'utf8');
var templateFile = new File({
cwd: firstFile.cwd,
base: path.dirname(templatePath),
path: templatePath,
contents: getNewContent(template, collection, opt)
});
this.emit('data', templateFile);
this.emit('end');
}
return es.through(collector(collection, opt, function (file) {
if (!firstFile) {
firstFile = file;
}
}), endStream);
};
/**
* Handle injection when files to
* inject comes from a Vinyl File Stream
*
* @param {Stream} toInject
* @param {Object} opt
* @returns {Stream}
* Export `gulp-inject`
*/
function handleVinylStream (toInject, opt) {
var collected = collectFilesToInject(toInject, opt);
module.exports = exports = require('./src/inject');
return es.map(function (source, cb) {
if (source.isStream()) {
return cb(new PluginError('gulp-inject', 'Streams not supported for source templates!'));
}
collected(function (collection) {
source.contents = getNewContent(source.contents, collection, opt);
cb(null, source);
});
});
}
/**
* Collecting files to inject from Vinyl File Stream
*
* Returns an almost promise like function which can be
* called multiple times with a callback, that will be
* resolved with the result of the file collection.
*
* @param {Stream} toInject
* @param {Object} opt
* @returns {Function}
* Export the default transform function(s)
*/
function collectFilesToInject (toInject, opt) {
var collection = {}, done = false, queue = [];
toInject.pipe(es.through(collector(collection, opt), function () {
done = true;
while (queue.length) {
resolve(queue.shift());
}
}));
function resolve (cb) {
process.nextTick(function () {
cb(collection);
});
}
return function (cb) {
if (done) {
resolve(cb);
} else {
queue.push(cb);
}
};
}
/**
* Create a file collecting function
* to be used in es.through
*
* @param {Object} collection Collection to fill with files
* @param {Object} opt
* @param {Function} cb Optional callback which will be called for each file
* @returns {Function}
*/
function collector (collection, opt, cb) {
return function (file) {
if (!file.path) {
return;
}
if (cb) {
cb(file);
}
var ext = extname(file.path),
tag = getTag(opt.starttag, ext);
if (!collection[tag]) {
collection[tag] = {ext: ext, starttag: tag, endtag: getTag(opt.endtag, ext), files: []};
}
var filepath = removeBasePath([unixify(file.cwd)].concat(opt.ignorePath), unixify(file.path));
if (opt.addPrefix) {
filepath = addPrefix(filepath, opt.addPrefix);
}
if (opt.addRootSlash) {
filepath = addRootSlash(filepath);
} else if (filepath[0] === '/') {
filepath = filepath.slice(1);
}
collection[tag].files.push({file: file, filepath: filepath});
};
}
/**
* Get new content for template
* with all injections made
*
* @param {String|Buffer} oldContent
* @param {Object} collection
* @param {Object} opt
* @returns {Buffer}
*/
function getNewContent (oldContent, collection, opt) {
var keys = Object.keys(collection);
if (keys.length) {
return new Buffer(keys.reduce(function eachInCollection (contents, key) {
var tagInfo = collection[key];
if (opt.sort) {
tagInfo.files.sort(opt.sort);
}
return contents.replace(
getInjectorTagsRegExp(tagInfo.starttag, tagInfo.endtag),
function injector (match, starttag, indent, content, endtag) {
return [starttag]
.concat(tagInfo.files.map(function transformFile (file, i, files) {
return opt.transform(file.filepath, file.file, i, files.length);
}))
.concat([endtag])
.join(indent);
}
);
}, String(oldContent)));
}
return oldContent;
}
function getTag (tag, ext) {
return tag.replace('{{ext}}', ext);
}
function extname (file) {
return path.extname(file).slice(1);
}
function getInjectorTagsRegExp (starttag, endtag) {
return new RegExp('(' + escapeForRegExp(starttag) + ')(\\s*)(\\n|\\r|.)*?(' + escapeForRegExp(endtag) + ')', 'gi');
}
function escapeForRegExp (str) {
return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
function unixify (filepath) {
return filepath.replace(/\\/g, '/');
}
function addRootSlash (filepath) {
return filepath.replace(/^\/*([^\/])/, '/$1');
}
function addPrefix (filepath, prefix) {
return prefix + filepath;
}
function removeBasePath (basedir, filepath) {
return toArray(basedir).reduce(function (path, remove) {
if (path[0] === '/' && remove[0] !== '/') {
remove = '/' + remove;
}
if (remove && path.indexOf(remove) === 0) {
return path.slice(remove.length);
}
return path;
}, filepath);
}
function toArray (arr) {
if (!Array.isArray(arr)) {
return arr ? [arr] : [];
}
return arr;
}
exports.transform = require('./src/transform');

14

package.json
{
"name": "gulp-inject",
"version": "0.4.1",
"version": "1.0.0",
"description": "A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html",

@@ -20,3 +20,3 @@ "keywords": [

},
"main": "./index.js",
"main": "index.js",
"repository": {

@@ -27,11 +27,11 @@ "type": "git",

"scripts": {
"test": "mocha -R spec"
"test": "mocha -R spec src/**/*_test.js"
},
"dependencies": {
"gulp-util": "~2.2.0",
"event-stream": "~3.1.0"
"gulp-util": "^2.2.0",
"event-stream": "^3.1.0"
},
"devDependencies": {
"mocha": "~1.17.0",
"should": "~2.1.0"
"mocha": "^1.20.1",
"should": "^4.0.4"
},

@@ -38,0 +38,0 @@ "engines": {

553

README.md

@@ -5,5 +5,9 @@ # gulp-inject [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url]

`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](#basic-usage) and [More examples](#more-examples) below.
Default [transforms](#optionstransform) and [placeholders](#optionsstarttag) exists for injecting files into `html`, `jade` and `jsx` files.
## Installation
First, install `gulp-inject` as a development dependency:
Install `gulp-inject` as a development dependency:

@@ -16,32 +20,40 @@ ```shell

In your `gulpfile.js`:
**The target file `src/index.html`:**
### Mode 1: Given a Vinyl File Stream
Each pair of comments are the injection placeholders (aka. tags, see [`options.starttag`](#optionsstarttag) and [`options.endtag`](#optionsendtag)).
**Note:** New from `v.0.3`. Here you pipe `inject` through *where* to inject.
```html
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
```javascript
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"));
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
```
### Mode 2: Given a path to html template
**The `gulpfile.js`:**
**Note:** Old behavior. Here you pipe `inject` through *what* to inject.
```javascript
var gulp = require('gulp');
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"));
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'));
});
```
### Template contents (regardless of mode above)
**`src/index.html` after running `gulp index`:**
Add injection tags to your `index.html`:
```html

@@ -52,7 +64,5 @@ <!DOCTYPE html>

<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"> -->
<link rel="stylesheet" href="/src/style1.css">
<link rel="stylesheet" href="/src/style2.css">
<!-- endinject -->

@@ -63,3 +73,4 @@ </head>

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<script src="/src/lib1.js"></script>
<script src="/src/lib2.js"></script>
<!-- endinject -->

@@ -72,4 +83,98 @@ </body>

### Injecting files from multiple streams
### Injecting files relative to target files
By default the injected file paths are relative to each source file's `cwd` (see [`options.ignorePath`](#optionsignorepath)). If `options.relative` is set to `true` each injected path will be relative to each target file's directory instead.
**Project structure:**
```
└── src
├── module
│ ├── module.js
│ └── module.html
└── app
├── main.js
└── index.html
```
**`src/app/index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My Index</title>
</head>
<body>
<h1>Home</h1>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
```
**`src/module/module.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Module</title>
</head>
<body>
<h1>Module</h1>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
```
**`gulpfile.js`:**
```javascript
var inject = require('gulp-inject');
gulp.src('./src/**/*.html')
.pipe(inject(gulp.src('./src/**/*.js', {read: false}), {relative: true}))
.pipe('./src');
```
**Resulting `src/app/index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My Index</title>
</head>
<body>
<h1>Home</h1>
<!-- inject:js -->
<script src="main.js"></script>
<script src="../module/module.js"></script>
<!-- endinject -->
</body>
</html>
```
**Resulting `src/module/module.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Module</title>
</head>
<body>
<h1>Home</h1>
<!-- inject:js -->
<script src="../app/main.js"></script>
<script src="module.js"></script>
<!-- endinject -->
</body>
</html>
```
### Injecting files from multiple source streams
This example demonstrates how to inject files from multiple different streams into the same injection placeholder.

@@ -103,5 +208,5 @@

Use `gulp-inject`'s `starttag` option.
#### Method 1: Use `gulp-inject`'s `starttag` option.
**Code:**
**`gulpfile.js`:**

@@ -117,3 +222,3 @@ ```javascript

And in your `./src/index.html`:
**And in your `./src/index.html`:**

@@ -138,10 +243,44 @@ ```html

#### Method 2: Use `gulp-inject`'s `name` option.
**`gulpfile.js`:**
```javascript
var inject = require('gulp-inject');
gulp.src('./src/index.html')
.pipe(inject(gulp.src('./src/importantFile.js', {read: false}), {name: 'head'}))
.pipe(inject(gulp.src(['./src/*.js', '!./src/importantFile.js'], {read: false})))
.pipe(gulp.dest('./dist'));
```
**And in your `./src/index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- 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>
```
### Injecting all files for development
If you use [Bower](http://bower.io/) for frontend dependencies I recommend using [`gulp-bower-files`](https://www.npmjs.org/package/gulp-bower-files) and injecting them as well.
If you use [Bower](http://bower.io/) for frontend dependencies I recommend using [`main-bower-files`](https://www.npmjs.org/package/main-bower-files) and injecting them as well.
**Code:**
**`gulpfile.js`:**
```javascript
var bowerFiles = require('gulp-bower-files'),
var bowerFiles = require('main-bower-files'),
inject = require('gulp-inject'),

@@ -156,4 +295,4 @@ stylus = require('gulp-stylus'),

gulp.src('./src/index.html')
.pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'}))
.pipe(inject(es.merge(
bowerFiles({read: false}),
cssFiles,

@@ -165,4 +304,49 @@ gulp.src('./src/app/**/*.js', {read: false})

**`src/index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- bower:css -->
<!-- bower installed css files will go here... -->
<!-- endinject -->
<!-- inject:css -->
<!-- built css files will go here... -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- bower installed scripts will go here... -->
<!-- endinject -->
<!-- inject:js -->
<!-- app scripts will go here... -->
<!-- endinject -->
</body>
</html>
```
**Note** remember to mount `./bower_components`, `./build` and `./src/app` as static resources in your server to make this work.
### Injecting AngularJS scripts for development
If you're writing an AngularJS application and follow [Google's Angular APP Structure Recommendations](https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub), which I think you should, it's important that the script files are injected in the correct order to avoid module instantiation problems like `Uncaught Error: [$injector:modulerr]`.
To do this you can use [`gulp-angular-filesort`](https://www.npmjs.org/package/gulp-angular-filesort) together with `gulp-inject` like so:
```javascript
var angularFilesort = require('gulp-angular-filesort'),
inject = require('gulp-inject');
gulp.src('./src/index.html')
.pipe(inject(
gulp.src('./src/app/**/*.js') // gulp-angular-filesort depends on file contents, so don't use {read: false} here
.pipe(angularFilesort())
}
)))
.pipe(gulp.dest('./build'));
```
### Injecting into a json-file

@@ -199,2 +383,72 @@

### Injecting with custom `transform` function with default fallback
The [default `transform`](#injecttransform) function is available to use e.g. as a default fallback.
Used here to inject Word documents as `<a>` tags below:
**`index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My documents</title>
</head>
<body>
<h1>Documents</h1>
<ul>
<!-- inject:docx -->
<!-- endinject -->
</ul>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
```
**`gulpfile.js`:**
```javascript
var inject = require('gulp-inject');
gulp.src('./index.html')
.pipe(inject(
gulp.src(['./*.js', './docs/*.docx'], {read: false}), {
transform: function (filepath) {
if (filepath.slice(-5) === '.docx') {
return '<li><a href="' + filepath + '">' + filepath + '</a></li>';
}
// Use the default transform as fallback:
return inject.transform.apply(inject.transform, arguments);
}
}
))
.pipe(gulp.dest('./'));
```
**Resulting `index.html`:**
```html
<!DOCTYPE html>
<html>
<head>
<title>My documents</title>
</head>
<body>
<h1>Documents</h1>
<ul>
<!-- inject:docx -->
<li><a href="/docs/document1.docx"></a></li>
<li><a href="/docs/document2.docx"></a></li>
<!-- endinject -->
</ul>
<!-- inject:js -->
<script src="/lib1.js"></script>
<script src="/lib2.js"></script>
<!-- endinject -->
</body>
</html>
```
### Injecting dist files into bower.json's main section

@@ -209,3 +463,3 @@

endtag: ']',
function (filepath, file, i, length) {
transform: function (filepath, file, i, length) {
return ' "' + filepath + '"' + (i + 1 < length ? ',' : '');

@@ -226,3 +480,3 @@ }

endtag: ']',
function (filepath, file, i, length) {
transform: function (filepath, file, i, length) {
return ' "' + filepath + '"' + (i + 1 < length ? ',' : '');

@@ -234,24 +488,46 @@ }

## API
### Injecting files contents
### inject(fileOrStream, options)
In order to inject files contents you have to provide custom `transform` function, that will return file contents as string. You also have to omit `{read: false}` option of `gulp.src` in this case. Example below shows how to inject contents of html partials into head of `index.html`:
#### fileOrStream
Type: `Stream` or `String`
***Code:***
**If `Stream`**
```javascript
gulp.src('./src/index.html')
.pipe(inject(gulp.src(['./src/partials/head/*.html']), {
starttag: '<!-- inject:head:{{ext}} -->',
transform: function (filePath, file) {
// return file contents as string
return file.contents.toString('utf8')
}
}))
.pipe(gulp.dest('./dest'));
```
Since `v.0.3` you can provide a Vinyl File Stream as input to `inject`, see Mode 1 in the example above.
And in your `./src/index.html`:
**If `String`**
```html
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:head:html -->
<!-- contents of html partials will be injected here -->
<!-- endinject -->
</head>
<body>
</body>
</html>
```
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.
## API
#### options.templateString
Type: `String`
### inject(sources, options)
Default: `NULL`
#### sources
Type: `Stream`
Provide a Vinyl File Stream as input to `inject`, see examples above.
Is used as template instead of the contents of given `filename`. (Only used if `fileOrStream` is a `String`)
**N.B:** The old behavior, where you specify target as a string is deprecated since `v.1.0`.

@@ -266,2 +542,14 @@ #### options.ignorePath

This could also be solved by setting the `cwd` option for your `gulp.src` streams, each source file's `cwd` is automatically removed from its path before injection (if not [`options.relative`](#optionsrelative) is set to `true`, see below).
#### options.relative
Type: `Boolean`
Default: `false`
If set to `true` paths for the injected files will be relative to each target file, this also means that each source file's `cwd` is not necessary to remove from its path.
#### options.addPrefix

@@ -278,51 +566,170 @@ Type: `String`

Default: `true`
Default: `![options.relative](#optionsrelative)`
The root slash is automatically added at the beginning of the path ('/').
The root slash is automatically added at the beginning of the path ('/'), or removed if set to `false`.
#### options.starttag
#### options.name
Type: `String`
Default: `<!-- inject:{{ext}} -->`
Default: `"inject"`
Set the start tag that the injector is looking for. `{{ext}}` is replaced with file extension name, e.g. "css", "js" or "html".
Used in the default [start](#optionsstarttag) and [end](#optionsendtag) tags below.
#### options.starttag
**Type:** `String`|`Function(targetExt, sourceExt)`
**Params (if function):**
- `targetExt` - The file extension of the target file
- `sourceExt` - The file extension of source file
**Purpose:**
Used to dynamically set starting placeholder tag depending on file extensions.
In the provided string, or the string returned from the given function, the string `{{ext}}` is replaced with the source file extension name, e.g. "css", "js" or "html". `{{name}}` will be replaced by [`option.name`](#optionname).
##### Default:
A function dependent on target file type and source file type that returns:
* html as target: `<!-- {{name}}:{{ext}} -->`
* jade as target: `//- {{name}}:{{ext}}`
* jsx as target: `{/* {{name}}:{{ext}} */}`
#### options.endtag
Type: `String`
Default: `<!-- endinject -->`
**Type:** `String`|`Function(targetExt, sourceExt)`
**Params (if function):**
- `targetExt` - The file extension of the target file
- `sourceExt` - The file extension of source file
Set the end tag that the injector is looking for. `{{ext}}` is replaced with file extension name, e.g. "css", "js" or "html".
**Purpose:**
Used to dynamically set ending placeholder tag depending on file extensions.
In the provided string, or the string returned from the given function, the string `{{ext}}` is replaced with the source file extension name, e.g. "css", "js" or "html". `{{name}}` will be replaced by [`option.name`](#optionname).
##### Default:
A function dependent on target file type and source file type that returns:
* html as target: `<!-- endinject -->`
* jade as target: `//- endinject`
* jsx as target: `{/* endinject */}`
#### options.transform
Type: `Function(filepath, file, index, length)`
Params:
- `filepath` - The "unixified" path to the file with any `ignorePath`'s removed
- `file` - The [File object](https://github.com/wearefractal/vinyl) given from `gulp.src`
- `index` (0-based file index)
- `length` (total number of files to inject)
**Type**: `Function(filepath, file, index, length, targetFile)`
Default: a function that returns:
**Params:**
- `filepath` - The "unixified" path to the file with any `ignorePath`'s removed and `addPrefix` added
- `file` - The [File object](https://github.com/wearefractal/vinyl) to inject given from `gulp.src`
- `index` - 0-based file index
- `length` - Total number of files to inject for the current file extension
- `targetFile` - The target [file](https://github.com/wearefractal/vinyl) to inject into
* 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">`
**Purpose:**
Used to generate the content to inject for each file.
#### options.sort
Type: `Function(a, b)`
##### Default:
Params: `a`, `b` (is used as `compareFunction` for [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort))
[A function](#injecttransform) dependent on target file type and source file type that returns:
Default: `NULL`
**Injecting into `html`**
* css files: `<link rel="stylesheet" href="<filename>.css">`
* js files: `<script src="<filename>.js"></script>`
* coffee files: `<script type="text/coffeescript" src="<filename>.coffee"></script>`
* html files: `<link rel="import" href="<filename>.html">`
* png files: `<img src="<filename>.png">`
* gif files: `<img src="<filename>.gif">`
* jpg files: `<img src="<filename>.jpg">`
* jpeg files: `<img src="<filename>.jpeg">`
If set the given function is used as the compareFunction for the array sort function, to sort the source files by.
If `options.selfClosingTag` is `true` the default transformer above will make the `<link>` and `<img>` tags self close, i.e: `<link ... />` and `<img ... />` respectively.
**Injecting into `jsx`**
The same as for injecting into `html` above with [`options.selfClosingTag`](#optionsselfclosingtag) set to `true`.
**Injecting into `jade`**
* css files: `link(rel="stylesheet", href="<filename>.css")`
* js files: `script(src="<filename>.js")`
* coffee files: `script(type="text/coffeescript", src="<filename>.coffee")`
* html files: `link(rel="import", href="<filename>.html")`
* png files: `img(src="<filename>.png")`
* gif files: `img(src="<filename>.gif")`
* jpg files: `img(src="<filename>.jpg")`
* jpeg files: `img(src="<filename>.jpeg")`
#### options.selfClosingTag
Type: `Boolean`
Default: `false`
Affects the default `options.transform` function, see above.
#### ~~options.templateString~~
***DEPRECATED!***
*Deprecated since `v.1.0`. Use [`gulp-file`](https://www.npmjs.org/package/gulp-file) instead:*
```javascript
var gulp = require('gulp');
var file = require('gulp-file');
var inject = require('gulp-inject');
file('index.html', '<html><head></head></html>')
.pipe(inject(gulp.src(['./src/app/**/*.js']), {
starttag: '<head>',
endtag: '</head>'
}))
.pipe(gulp.dest('./dest'));
```
#### ~~options.sort~~
***DEPRECATED!***
*Deprecated since `v.1.0`. Use [`sort-stream`](https://www.npmjs.org/package/sort-stream) instead:*
```javascript
var gulp = require('gulp');
var sort = require('sort-stream');
var inject = require('gulp-inject');
gulp.src('index.html')
.pipe(inject(gulp.src(['./src/app/**/*.js'])))
.pipe(sort(function (a, b) {
// Sort condition here...
}))
.pipe(gulp.dest('./dest'));
```
### inject.transform
The default transform function is exposed in the public API.
For more details see [the code with tests](https://github.com/klei/gulp-inject/tree/master/src/transform).
#### inject.transform.html
The default transform function for files into `html`, or other file types not `jade` or `jsx`.
#### inject.transform.jade
The default transform function for files into `jade`.
#### inject.transform.jsx
The default transform function for files into `jsx`.
## License

@@ -333,8 +740,8 @@

[npm-url]: https://npmjs.org/package/gulp-inject
[npm-image]: https://badge.fury.io/js/gulp-inject.png
[npm-image]: https://badge.fury.io/js/gulp-inject.svg
[travis-url]: http://travis-ci.org/klei/gulp-inject
[travis-image]: https://secure.travis-ci.org/klei/gulp-inject.png?branch=master
[travis-image]: https://secure.travis-ci.org/klei/gulp-inject.svg?branch=master
[depstat-url]: https://david-dm.org/klei/gulp-inject
[depstat-image]: https://david-dm.org/klei/gulp-inject.png
[depstat-image]: https://david-dm.org/klei/gulp-inject.svg
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc