gulp-here

    1.0.12 • Public • Published

    gulp-here

    npm version

    Transform and inject resources into HTML template.

    Install

    npm install gulp-here --save-dev

    Usage

    • In gulp stream:
    var here = require('gulp-here')
    gulp.src('asserts/*.html')
        .pipe(
            here(gulp.src(['asserts/*.css', 'asserts/*.js']), {
                /**
                 * Namespace match
                 * @optional
                 * @type {String} 
                 */
                name: 'asserts',
                /**
                 * Sort method of the injecting order of resources
                 * @optional
                 * @param  {Array} resources  resources list, each item is a vinyl stream
                 * @param  {Stream} target    target html template for injecting
                 * @param  {Object} options   options given by `Here`'s tag of html template
                 * @return {Array}            New resources list
                 */
                sort: function (resources, target, options) {
                    // resource => ['dist/a.js', 'dist/b.js', 'dist/a.css']
                },
                /**
                 * Change resource's path manually
                 * @optional
                 * @param  {Stream} file      file is a resource that will be injected to template file. It's a vinyl stream.
                 * @param  {Stream} target    target html template for injecting
                 * @param  {Object} options   options given by here's tag of template html
                 * @return {String} full path of the resource
                 */
                prefix: function (file, target, options) {
                    // set relative to false will not change path to relative path of "cwd"
                    option.relative = false
                    return  '/path/to/cdn/' + file.relative
                },
                // or 
                // prefix: 'http://path/to/resource/',
                /**
                 * Transform method that for injecting custom resource url/content
                 * @optional
                 * @param  {Stream} file      file is a resource that will be injected to template file. It's a vinyl stream.
                 * @param  {Stream} target    target html template for injecting
                 * @param  {Object} options   options given by here's tag of template html
                 * @return {String|Boolean}   
                 */
                transform: function (file, target, options) {
                    if (cnd1) return false // will skip inject step
                    else if (cnd2) return '<script src="$"></script>'.replace(PREFIX, file.path) // transform to custom centent
                    else return true // continue inject step
                }
            )
        )

    Notice: File object is a vinly stream.

    • Template syntax:

    Inject tag syntax in the format of:

    <!--here[:namespace]:regex_match[??query]--><!--here-->

    Support queries:

    • inline Inline file contents to HTML, default false

    • wrap HTML tag wrapper HTML tag for resource contontent, default true.Using with inline only.

    For example:

    <!-- here:asserts_here:\.html$??inline&wrap=false --><!-- /here -->

    Inline resources:

    Notice: query will be passed to sort and transform method as options.

    <!-- here:\.css$??inline --><!-- /here -->

    Namespace match(matching with "options.name" if given):

    <!-- here:namespace:\.css$ --><!-- /here -->

    More complex matching regexp:

    <!-- here:\.(css|js|jsx)$ --><!-- /here -->
    • Extname mapping:

    Using here.mapping(from, to) to map extension of resource for reusing default wrapper when injecting:

    here.mapping('ejs', 'html')
        .mapping('less', 'css')

    Install

    npm i gulp-here

    DownloadsWeekly Downloads

    29

    Version

    1.0.12

    License

    MIT

    Last publish

    Collaborators

    • switer