https://github.com/exuanbo/gulp-source-injector

Injects any source into any file.
https://github.com/exuanbo/gulp-source-injector

css gulp gulp-inject gulpplugin html inject javascript webcomponent

Last synced: 2 months ago
JSON representation

Injects any source into any file.

• Host: GitHub
• URL: https://github.com/exuanbo/gulp-source-injector
• Owner: exuanbo
• License: mit
• Created: 2020-04-16T23:30:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T08:02:29.000Z (3 months ago)
• Last Synced: 2024-10-03T09:37:38.690Z (3 months ago)
• Topics: css, gulp, gulp-inject, gulpplugin, html, inject, javascript, webcomponent
• Language: JavaScript
• Homepage:
• Size: 265 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-source-injector

> Injects any source into any file.

[![npm](https://img.shields.io/npm/v/gulp-source-injector.svg?style=flat-square)](https://www.npmjs.com/package/gulp-source-injector)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)

[![Travis (.com)](https://img.shields.io/travis/com/exuanbo/gulp-source-injector/master.svg?style=flat-square)](http://travis-ci.com/exuanbo/gulp-source-injector)

[![David](https://img.shields.io/david/exuanbo/gulp-source-injector.svg?style=flat-square)](https://david-dm.org/exuanbo/gulp-source-injector)

[![License](https://img.shields.io/github/license/exuanbo/gulp-source-injector.svg?style=flat-square)](https://github.com/exuanbo/gulp-source-injector/blob/master/LICENSE)

## Table of Contents

- [Description](#description)

- [Install](#install)

- [Usage](#usage)

- [Example](#example)

  - [Indentation](#indentation)

- [License](#license)

## Description

`gulp-source-injector` transforms content of each source file to a string and injects each transformed string into placeholders in the target stream files.

This plugin does not do any minification to source files, so whitespaces will be preserved. It's better to use it after transformations like `gulp-terser` or `gulp-clean-css`.

## Install

```bash

npm install --save-dev gulp-source-injector

```

## Usage

Injection placeholders are comments as html syntax `` and css/js syntax `/* inject: filePath */`

By default the injected file path is relative to each target file's `cwd`. If the provided path starts with `/`, it will be considered relative to the directory of `gulpfile.js`

## Example

Project structure

```bash

├── src

│   ├── css

│   │   └── style.css

│   ├── js

│   │   └── script.js

│   ├── template

│   │   └── head.html

│   └── index.html

└── gulpfile.js

```

Target file `src/index.html`

```html

  

    

    

      /* inject: ./css/style.css */

    

    

      /*inject:js/script.js*/

    

  

  

    
Lorem Ipsum

  


```

`gulpfile.js`

```javascript

const { task, src, dest } = require('gulp')

const inject = require('gulp-source-injector')

task('inject', () => {

  return src('src/index.html')

    .pipe(inject())

    .pipe(dest('dist'))

})

```

or you can

```javascript

import inject from 'gulp-source-injector'

```

and then

`dist/index.html` after running `gulp inject`

```html

  

    

    

    

    

      body {

        background-color: #333;

      }

      h1 {

        color: #EEE;

      }

    

    

      console.log('foobar')

    

  

  

    
Lorem Ipsum

  


```

### Indentation

Note that existing indentation won't be preserved.

Target file `src/index.html`

```html

  

    

      /* inject: ./css/style.css */

    

  

  

    
Lorem Ipsum

  


```

Source file `src/css/style.css`

```css

body {

  background-color: #333;

}

h1 {

  color: #EEE;

}

```

`dist/index.html`

```html

  

    

      body {

  background-color: #333;

}

h1 {

  color: #EEE;

}

    

  

  

    
Lorem Ipsum

  


```

## License

[MIT](https://github.com/exuanbo/gulp-source-injector/blob/master/LICENSE)

## Donate