gulp-imu-importer v1.1.2

gulp-imu-importer

@import files, SVGs and Vue templates.

Install

npm install --save-dev gulp-imu-importer

Usage

JavaScript API

import() takes an options object as its only argument. The object has the following format:

{
    paths: ["src/example", "src/elsewhere", ...],
    extensions: {
        imports: [".ext", ".ext2", ...],
        scripts: [".ext", ".ext2", ...],
        svgs: [".ext", ".ext2", ...],
        vues: [".ext", ".ext2", ...]
    }
}

It defaults to:

{
    paths: "",
    extensions: {
        imports: [".html", ".js", ".json"],
        scripts: [".js", ".json"],
        svgs: [".svg"],
        vues: [".html"]
    }
}

paths is string or array of strings, each pointing to an additional path to search when processing @tags. By default no additional paths are searched, only the project root and paths relative to each importing file.

extensions is an object containing keys controlling the file extensions searched for by the @import, @script, @svg and @vue directives. Extensions will be searched for in the order provided, with the first match being the selected file.

Input

The @import directive must be enclosed in a comment tag. The path provided should be relative to the current file path. This will copy the contents of the file into its place place.

A @script directive has also been included, which behaves the same as @import but will wrap the results in <script type="x/templates"> tags. An ID based upon the filename is included in these tags. As such, filenames must consist only of valid ID characters and should not contain spaces.

Main

<div>
  <!-- @import "./local/project/file.html" //-->
</div>

./local/project/file.html

  <p>!!!</p>

Gulpfile.js

const gulp = require('gulp')
const import = require('gulp-imu-importer')

gulp.task('imaple', () => {
  return gulp.src('src/main.html')
    .pipe(import())
    .pipe(gulp.dest('build/'))
})

Result

<div>
  <p>!!!</p>
</div>

SVG

An @svg directive has also been provided. It is used just like @import and @script.

SVG files imported will first be parsed and processed to add an ID based upon the filename, sans extension. The same restrictions on naming that apply to @script also apply here.

Furthermore, the fill attribute is set to 'inherit' and any height or width attribute is removed prior to inlining.

Vue

A @vue directive is included, which works like @script except that the contents of the imported file will be run through the Vue.js compiler and the results written as a serialized object inside the <script> tags.

This does NOT support single-file components using the .vue extension.

SQL

An equivalent of @import has been added for MySQL and is used much the same.

# @import "./local/table/name"

You will need to provide the SQL extension to the importer:

    extensions: {imports: [".sql"]}

License

Dual-Licensed. Pick one. Pick both. Pick carefully.

gulp-imu-importer is available as Jollo LNT or CC0 | Public Domain, as you desire. Either way, you may make full use of the following files for any reason, without attribution should you wish to leave no trace:

• .eslintrc.json
• LICENSE
• README.md
• index.js
• package.json
• package-lock.json