gulp-assets-injector

    1.1.2 • Public • Published

    gulp-assets-injector

    NPM License Downloads

    A plugin to inject assets into HTMLs.

    Usage

    First collect static files via assetsInjector.collect(), then inject them via assetsInjector.inject().

    const gulp = require('gulp');
    const assetsInjector = require('gulp-assets-injector')();
     
    gulp.task('js', () => {
      return gulp.src('src/**/*.js')
      .pipe(assetsInjector.collect())
      .pipe(gulp.dest('dist'));
    });
     
    gulp.task('css', () => {
      return gulp.src('src/**/*.css')
      .pipe(assetsInjector.collect())
      .pipe(gulp.dest('dist'));
    });
     
    gulp.task('html', ['js', 'css'], () => {
      return gulp.src('src/index.html')
      .pipe(assetsInjector.inject())
      .pipe(gulp.dest('dist'));
    });
     
    // and a more complexed example
    const injectOptions = {
      link: true,
      filter: (htmlPath, assetPath) => assetPath.includes('/home/'),
    }
    gulp.task('html-complex', ['js', 'css'], () => {
      return gulp.src('src/home.html')
      .pipe(assetsInjector.inject(injectOptions))
      .pipe(gulp.dest('dist'));
    });

    If injectOptions.link is set to false, HTMLs will be injected with asset contents directly:

    <style>/* css here */</style> 
    ...
    <script>//<![CDATA[
    /* script here */
    //]]></script> 

    Otherwise HTMLs will be injected with links:

    <link rel="stylesheet" href="style.css">
    ...
    <script src="app.js"></script>

    If injectOptions.link is a function, the returned value will be used as asset paths.

    Document

    • AssetsInjector

      The constructor takes no arguments.

    • AssetsInjector::collect()

      Collects all the static files piped to it.

    • AssetsInjector::inject(Optional options)

      Inject the collected static files to the piped HTMLs.

      options is an object with following properties:

      • link: Any

        Whether the assets should be injected as a link. If set to false, the content will be injected into HTML directly. Default as true.

        If set to a function, the injected link URL will be determined by the function, the parameters are path/to/HTML and path/to/asset.

      • filter: Function

        A function to decide whether an asset file should be injected into the current HTML. The parameters are path/to/HTML and path/to/asset.

        If not provided, all assets within the same directory as the current HTML will be injected.

    Keywords

    none

    Install

    npm i gulp-assets-injector

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    ISC

    Last publish

    Collaborators

    • gera2ld