❤
npm
Sign UpSign In

gulp-source-injector

1.0.1 • Public • Published

gulp-source-injector

Injects any source into any file.

npm JavaScript Style Guide Travis (.com) David License

Table of Contents

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

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

Usage

Injection placeholders are comments as html syntax <!-- inject: filePath --> 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

├── src
│   ├── css
│   │   └── style.css
│   ├── js
│   │   └── script.js
│   ├── template
│   │   └── head.html
│   └── index.html
└── gulpfile.js

Target file src/index.html

<html>
  <head>
    <!-- inject: /src/template/head.html -->
    <style>
      /* inject: ./css/style.css */
    </style> 
    <script>
      /*inject:js/script.js*/
    </script> 
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

gulpfile.js

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

import inject from 'gulp-source-injector'

and then

dist/index.html after running gulp inject

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta title="test">
    <style>
      body {
        background-color: #333;
      }
      h1 {
        color: #EEE;
      }
    </style> 
    <script>
      console.log('foobar')
    </script> 
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

Indentation

Note that existing indentation won't be preserved.

Target file src/index.html

<html>
  <head>
    <style>
      /* inject: ./css/style.css */
    </style> 
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

Source file src/css/style.css

body {
  background-color: #333;
}
h1 {
  color: #EEE;
}

dist/index.html

<html>
  <head>
    <style>
      body {
  background-color: #333;
}
h1 {
  color: #EEE;
}
    </style> 
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

License

MIT

Donate

Buy Me A Coffee

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.1
    108
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.1
    108
  • 1.0.0
    0

Package Sidebar

Install

npm i gulp-source-injector

Repository

github.com/exuanbo/gulp-source-injector

Homepage

github.com/exuanbo/gulp-source-injector#readme

Weekly Downloads

84

Version

1.0.1

License

MIT

Unpacked Size

11.6 kB

Total Files

12

Last publish

Collaborators

  • exuanbo
Try on RunKit
Report malware