haoxins / gulp-file-include Goto Github PK

View Code? Open in Web Editor NEW

676.0 18.0 94.0 142 KB

MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include

License: MIT License

JavaScript 88.52% HTML 11.48%

gulp-file-include's Introduction

gulp-file-include

a gulp plugin for file includes

Installation

npm install --save-dev gulp-file-include

API

const fileinclude = require('gulp-file-include');

fileinclude([prefix])

prefix

Type: string
Default: '@@'

fileinclude([options])

options

Type: object

options.prefix

Type: string
Default: '@@'

options.suffix

Type: string
Default: ''

options.basepath

Type: string
Default: '@file'

Possible values:

'@file': include file relative to the dir in which file resides (example)
'@root': include file relative to the dir in which gulp is running
path/to/dir: include file relative to the basepath you provide

options.filters

Type: object
Default: false

Filters of include content.

options.context

Type: object Default: {}

Context of if statement.

options.indent

Type: boolean Default: false

Examples

@@include options - type: `JSON`

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  </body>
</html>

view.html

<h1>view</h1>

var.html

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

gulpfile.js

const fileinclude = require('gulp-file-include');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

result:

<!DOCTYPE html>
<html>
  <body>
  <h1>view</h1>
  <label>haoxin</label>
<label>12345</label>
<strong>facebook.com/include</strong>
<strong>twitter.com/include</strong>
  </body>
</html>

@@include_once options - type: `JSON`

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include_once('./view.html')
  @@include_once('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  @@include_once('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  </body>
</html>

view.html

<h1>view</h1>

var.html

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

gulpfile.js

const fileinclude = require('gulp-file-include');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

result:

<!DOCTYPE html>
<html>
  <body>
  <h1>view</h1>
  <label>haoxin</label>
<label>12345</label>
<strong>facebook.com/include</strong>
<strong>twitter.com/include</strong>

  </body>
</html>

filters

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include(markdown('view.md'))
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345
  })
  </body>
</html>

view.md

view
====

gulpfile.js

const fileinclude = require('gulp-file-include');
const markdown = require('markdown');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      filters: {
        markdown: markdown.parse
      }
    }))
    .pipe(gulp.dest('./'));
});

`if` statement

index.html

@@include('some.html', { "nav": true })

@@if (name === 'test' && nav === true) {
  @@include('test.html')
}

gulpfile.js

fileinclude({
  context: {
    name: 'test'
  }
});

`for` statement

index.html

<ul>
@@for (var i = 0; i < arr.length; i++) {
  <li>`+arr[i]+`</li>
}
</ul>

gulpfile.js

fileinclude({
  context: {
    arr: ['test1', 'test2']
  }
});

`loop` statement

index.html

<body>
  @@loop('loop-article.html', [
    { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
    { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
    { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
  ])
</body>

loop-article.html

<article>
  <h1>@@title</h1>
  @@text
</article>

`loop` statement + `data.json`

data.json

[
  { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
  { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
  { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
]

loop-article.html

<body>
  @@loop("loop-article.html", "data.json")
</body>

`webRoot` built-in context variable

The webRoot field of the context contains the relative path from the source document to the source root (unless the value is already set in the context options).

support/contact/index.html

<!DOCTYPE html>
<html>
  <head>
    <link type=stylesheet src=@@webRoot/css/style.css>
  </head>
  <body>
    <h1>Support Contact Info</h1>
    <footer><a href=@@webRoot>Home</a></footer>
  </body>
  </body>
</html>

result:

<!DOCTYPE html>
<html>
  <head>
    <link type=stylesheet src=../../css/style.css>
  </head>
  <body>
    <h1>Support Contact Info</h1>
    <footer><a href=../..>Home</a></footer>
  </body>
  </body>
</html>

License

MIT

gulp-file-include's People

Contributors

Stargazers

Watchers

Forkers

zhangxiaobing tsi runarberg merlinnd chenyuzhou luisfarzati acutus benjaminma remkoboschker cortneypop deefour janpaepke drewlustro ulinaaron delaguardo chishiuan allaud kfitzgerald lmtdit gradcracker jonaslewin limomx mrsnowflake ankamsarav boccob thram andremalkine heldermattos monw3c veryvalley morrislaptop liuyuehe92 twt313 chencycui alexliu1987 niuyihui2376 supermonkeyz xiaobei666 xutiancheng xblxc htmlmasta webarthur paragraff arestov dlutwuwei shuushu otobelikethee hxdevapp masterbee-io cloudwisefe oopsman tvssm blaues0cke ioncmt shp-novicell chau-duong the-cc-dev walshyb cosen95 bre7 davidpanik jameswquinn thiago-soler floridaboy99 laurensmartz zhangaoxiang924 katya-robinson guozimo chezwicker octeris christianesperar cttd scott1028 justfont danstevens tuzhu008 philbob tommcc gkiely msi1979 oshliaer ricardogrecco nepomuc yashunin t4valedeltorre px2code chriscz svikashk r0dionix drozerah c-plus-plus-equals-c-plus-one codewithsaikat muhammadsumon

gulp-file-include's Issues

Passing in objects into include?

Hello!

This is a question. I have the following code:

As you can see, I'm gonna use a "name" variable in site-nav.html. Is there anyway I can use some kind of JavaScript object instead rather than hardcode the variables in every single file? Something like:

<script>
    var obj = { "name": "Jourdan" }
</script>
@@include('./site-nav.html', obj)

Check readme

Hello.
I guess you need to fix gulp.js example in readme file.
Replace var fileinclude = require('../index') with var fileinclude = require('gulp-file-include'). Otherwise it doesn't work.

Multiple locations for files

And I want to include in pages/page.html components/header.html and files/logo.svg
I hvae my gulp task:

gulp.task('include', function() {
  gulp.src(['app/pages/*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: ['./app/files/', './app/components/']
    }))
    .pipe(gulp.dest('./app'));
});

but once I run it it says:
Error: Arguments to path.resolve must be strings

Can I use multiple folders for base paths?

lv,lv,lv

hulala,hulala 😊

How is this supposed to work with "gulp watch"?

Hello, great job on the work you've done on this so far.

Question though, I have a gulpfile.js in this gist that includes partial files properly on the "gulp build" command but when I run "gulp watch" it ignores the fileinclude task. I've looked online and in #gulpjs for assistance with no success. Any ideas as to what I'm doing wrong?

Retain folder structure from scanned directories

This might just be me because im new to gulp but is there an option to retain the dir structure when creating render html files?

Working Folder
______
--/cwd
---/includes
---/templates
----/layouts
------(default.html)

This currently render to (which i dont want)

Results
______
--/render
---(default.html)

the structure i would like is

Results
______
--/render
---/templates
----/layouts
------(default.html)

Error for combination of symbols in value

When I do something like:

            @@include('summaryList.html', {
                "variable": "function({paraneter:7})"
            })

I get:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: Unexpected end of input

It seems to be the combination of the parenthesis and the curly brackets. Is there a way to escape those characters? Is it trying to execute them as javascript?

Variables not working

Am I doing something wrong?

@@include("header.tmp.html", {
    "active": "class=active"
})

header.tmp.html

...
<li><a href="index.html" @@active >Home</a></li>
...

Result is whitout any change:

<li><a href="index.html" @@active >Home</a></li>

Latest version - 0.5.1

Variable name with equal prefix get confused

I have two variables in a file: @@title and @@title_link. When I try to include this file and pass the values for both variables; the second variable gets over-written with the value of the first one. For example:

@@include('./my_file.html', {
    "title": "My Title",
    "title_link": "http://my_link.com"
})

Results in:

<a href="My Title"> My Title </a>

Instead of the wanted result:

<a href="http://my_link.com"> My Title </a>

Does this have anything to do with how both variables start with the same prefix title? or I am missing something?

todo

update deps
set test timeout = 200
rm should ?

if condition not working

@@include("../partials/footer.html",{"page":"index"})

And instead footer.html i have

@@if (page === "index"){
    @@include('./appstore.html')
 }
@@if (page !== "index"){
  @@include('./newsletter.html')
}

It says page is not defined

suffix option

Sometimes need to hide include constructions from html by comments.
Can you add suffix option like in grunt-include-replace?

Support streams

See: https://github.com/lazd/gulp-replace

If the file to include contains curly brackets, the outputted HTML is wrong

When you include an HTML file with { or }, the outputted HTML looks is wrong.

e.g.

base.html

@@if (name === 'index') {
  @@include('index.html')
}

index.html

<div data-ng-class="{'collapse':(controllerName === 'DashboardController' || controllerName === 'AcademicsController')}">
</div>

Output (we shouldn't have the @@if).

@@if (name === 'index') {
  <div data-ng-class="{'collapse':(controllerName === 'DashboardController' || controllerName === 'AcademicsController')}">
</div>

}

Conditional include with variables

Hi!
What if you would do conditional include with variables, not just arguments:

@@include('tmp.html', {"nav": true})

@@if(nav) {
    @@include('nav.html')
}

P.S.
In documentation a little mistake. "If" with just one "@"

Error handling

When including file doesn't exist gulp takes off. And I have to use gulp-plumber. It's bad.

So, I recommend you to use for exceptions throw new gutil.PluginError(pluginName, message); (new necessarily) and to check file existance with fs.existsSync(filename);

open gitter room

Please)

Absolute path support

I understand relative paths (./filePath) and (../filePath) BUT can I do this? (/filePath)

Im trying to get this to work:

 @@include('/snippets/_head.inc')

Indentation is not maintained

When including a HTML file the resulting file does not have the same indentation as the base file. All the nesting is broken.

Perhaps this is due to CRLF?

Can't import htmls with different parameters

For example:
@@include("block-list", {
"title1": "title1",
"title2": "title2"
})
@@include("block-list", {
"title1": "title1"
})
Result:
title1 title2
title1 @@Title2

If I use the If statement
@@include("block-list", {
"title1": "title1",
"title2": "title2"
})
@@include("block-list", {
"title1": "title1"
})

and the block-list content:
@@if (typeof title1 != "undefined") { @@title1 }
@@if (typeof title2 != "undefined") { @@Title2 }

the result is same:
title1 title2
title1 @@Title2

In my opinion if input a html then input that again (with other parameters), the values don't reset, only inherit.

remove autod

node-modules/autod#4

if the file is not exist,programe will crash for no such file or directory

suggest:
is it able not interrupt while the include file is not exists ?

relative path not supported

while my html files are not in root path of project, gulp-file-include got the wrong path to find included files:

|--gulpfils.js
|--pages
|----index.html
|----partial
|------file2include.html

in index.html:

@@include('./partial/file2include.html')

Error Msg:

Error: ENOENT, no such file or directory './partial/file2include.html'

Looks like pulgin find path based on root path of project, not the html who invoked @@include commend

context related issue

In if condition, should be:
@@if (context.name === 'test' && nav === true) {
To print context seems not working, tried both:
<label>@@name</label> and <label>@@context.name</label>

Support variable on multiple lines

For easier coding it would be nice if variables could be on separate lines and perhaps allow multiple spaces between key and value:

@@include('DEV/header.html', {
"title":        "My Cool Title",
"description":  "Bob delivers high energy fun",
"keywords":     "Bob, fun, coding, github"
})

add travis

Customizing

You can separate constructions by two types:
functions

@@include('partial.html')
@@external('jquery')
@@external('normalize')

blocks

@@if(var_name) {
  <div></div>
}

@@each(var_name) {
 <li></li>
}

And let users add your own handlers for this types

use the plugin in together with browser sync

Im not an gulp expert but would like to know if there is a way how I could use this plugin together with browser sync currently it is only working with serve:dist.

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var concat = require('gulp-concat');
var inlineCss = require('gulp-inline-css');
var inlineSource = require('gulp-inline-source');
var rename = require('gulp-rename');
var fileinclude = require('gulp-file-include');

gulp.task('styles', function() {
  return gulp.src('app/styles/css/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('app/styles'))
    .pipe(reload({stream: true}));
}); 


gulp.task('inline', ['styles'], function() {
  return gulp.src('app/*.html')
    .pipe(inlineSource({
      rootpath: 'app'
    }))
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(inlineCss({
      preserveMediaQueries: true
    }))
    .pipe(gulp.dest('dist/'));
});


gulp.task('clean', require('del').bind(null, 'dist'));
gulp.task('build', ['clean','inline']);

gulp.task('serve', ['styles'], function() {
  browserSync({
    server: './app',
    notify: false,
    debugInfo: false,
    host: 'localhost'
  });

  gulp.watch('app/styles/css/*.css', ['styles']);
  gulp.watch('app/*.html').on('change', reload);

});

gulp.task('serve:dist', ['inline'], function() {
  browserSync({
    server: './dist',
    notify: false,
    debugInfo: false,
    host: 'localhost'
  });

});

Gulp watch

Hi,
Can you explain how to use this plugin with gulp watch?

Stream handling

You don't need to handle streams, because text is small thing. And parsing a part of construction is not good, bacause it will be missed or errored.

What do you think?

Jade templates included file wrong spacing

How do you include a Jade (or any template language) with this library and keep the correct white space? File is being included correctly, but white space is wrong.

Includes within includes?

Is it possible to have a template.html like:

<article id="@@variable">
    @@include("./partials/@@variable.html")
</article>

and then have something outside like:

    @@include('./partials/template.html', {
        "variable": "some_other_template"
    })

Parsing of @@include() fails without trailing newline

I'm using an @@include() within a Jade template. My gulpfile renders the template into HTML, then includes within that HTML output a separate rendered HTML file containing some SVG elements.

Because Jade minifies its HTML output, the result is something like this excerpt:

... //]]></script>@@include('./icons/svg/symbols.svg')<!--[if lt IE 9]><p class="browsehappy">You are using an <strong>outdated</strong> browser. ...

This causes gulp to throw the following error:

stream.js:94
  throw er; // Unhandled stream error in pipe.
        ^
Error: ENAMETOOLONG, name too long '/Users/twarr/code/lockstep.info/dist/)<!--[if lt IE 9]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http:/browsehappy.com/" target="_blank">upgrade your browser</a> to improve ...

It appears that gulp-file-include doesn't notice that the @@include() ends after the closing parenthesis, and instead expects a newline character. Adding one to my Jade template fixed it:

| @@include('./icons/svg/symbols.svg')
= "\n"

Ideally, though, that wouldn't be required. It seems like the closing parenthesis should be enough for the regular expression to determine that the @@include() has ended, and thus have enough information to parse out the include file path, regardless of what immediately follows. Please let me know if that assumption is incorrect, though.

Thanks!

Partially string parser

Changing asset paths located in included partial in files nested in directories

My project directory is in the app/ directory. In my app/ directory I also have subdirectories such as app/services/ and app/previews/. The .html files in my app/ directory and subdirectories (e.g. app/services/) share the same CSS/JS assets in the header partial view (located at app/partials/header.html).

When viewing app/index.html the paths are correct. But when viewing .html files in a subdirectory such as app/services/index.html the paths are not correct. I've found a solution but it feels hacky and didn't know if there's something super obvious I'm missing.

Current solution

gulpfile.js:

.pipe($.fileInclude({ context: { rootPath: './' } }))

app/partials/header.html:

<!-- build:css styles/main.css -->
@@if ( rootPath === './' ) {<link rel="stylesheet" href="./styles/main.css">}
@@if ( rootPath !== './' ) {<link rel="stylesheet" href="@@rootPath/styles/main.css">}
<!-- endbuild -->

app/services/index.html:

@@include("../partials/header.html", {
  "pageTitle": "Our Services",
  "scripts": "services",
  "rootPath": ".."
})

How this solution works: If you don't specify a rootPath property when including a file, it will use the rootPath value in the context object in my gulpfile.js. However, if you do specify a rootPath property it will use that instead. This allows me to specify rootPath property for the files in subdirectories and everything works just fine. However -- having to reference each of the assets twice in my includes felt hacky and didn't know if there was another solution.

A suggestion: It'd be useful if I was able to specify default variables in gulpfile.js. For example, in the gulpfile.js I could do something like: .pipe($.fileInclude({ defaults: { rootPath: './' } }))

And then, when I specify a rootPath property when including a file it uses that value, and if not -- it falls back to the default listed in gulpfile.js. This way when including assets I wouldn't need the conditional statement. I could simply use: <link rel="stylesheet" href="@@rootPath/styles/main.css">

Redefined variables

I have some htmls:

header.html:

<header class="header">
    @@include('../backcall/backcall.html', { 
        "parent": "header__backcall"
    })
</header>

backcall.html:

<div class="backcall @@parent">
    @@include('../icon/icon.html', { 
        "parent": "backcall__icon"
    })
</div>

icon.html:

<span class="icon @@parent"></span>

Aafter compilation I get:

<header class="header">
    <div class="backcall backcall__icon"> <!-- here must be 'header__backcall' but we have 'backcall__icon' --> 
        <span class="icon backcall__icon"></span>
    </div>
</header>

parent is redefined in backcall.html. So I think it's a bug :)

Smart File Include

Add option with default file extensions. Maybe array or string.
Process file error with gulp-util.log
And cut the root from file path in error report

And make a few search paths (base paths) for flexible structure

Detect infinite loop when A includes B includes A

Works today:

Today you support recursion problems when file A includes file A, and I get the report of

"recursion detected in file:"

What I would like:

File A includes File B
File B includes File A.

At that point the same error should be reported.
Today I get this error:

Maximum call stack size exceeded

And the same would be valid for
File A includes File B
File B includes File C
File C includes File A

Conditional include?

Would be nice if you could do conditional includes based on arguments e.g

@@if(button) {

}

If else

class="@@if (active === 'index') {index}" works fine, but how can I have else condition also?

class="@@if (active === 'index') {index} else {inner}" throws error, class="@@if (active === 'index') {index} @@else {inner}" also.

Ignore commented html

The plugin doesn't ignore html comments. The plugin includes html files even if the include statement is commented out.

meta-templater

Hey! Happy New Year!

I created meta API based on syntax of your gulp-file-include. Let's make some improvements?
https://github.com/TrySound/meta-templater

No such file or directory bug

Hi!
Just a few minutes ago I updated all my node-modules and gulp-file-include started to throw subject error. Copy of error:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error in plugin 'gulp-file-include'
ENOENT, no such file or directory 'd:\_opens\html\v\_ish\)'
    at Stream.fileInclude (d:\_opens\html\v\_ish\node_modules\gulp-file-include\index.js:42:28)
    at Stream.stream.write (d:\_opens\html\v\_ish\node_modules\gulp-file-include\node_modules\event-stream\node_modules\through\index.js:26:11)
    at write (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:605:24)
    at flow (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:614:7)
    at Transform.pipeOnReadable (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:646:5)
    at Transform.EventEmitter.emit (events.js:92:17)
    at emitReadable_ (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:430:10)
    at emitReadable (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:426:5)
    at readableAddChunk (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:187:9)
    at Transform.Readable.push (d:\_opens\html\v\_ish\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:149:10)

Part of gulpfile:

gulp.task('fileinclude', function() {
    gulp.src(['_f-2013-11-24.php'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('./upload'));
});

I tryed to specify absolute path in basepath — also no luck.
OS Windows 8.1 x64, latest versions of nodejs and gulp.

If statement not working

I am trying the following conditional code, but it doesn't work. The if statement renders as if it was standard text, and the included content inside is always rendered.

gulp.task('fileinclude', function() {
    gulp.src(['./index.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: './include',
            context: {
                name: 'stylesheet-email'
            }
        }))
        .pipe(inlineCss(mailChimpAPIKEY))
        .pipe(fileinclude({
            prefix: '@@',
            basepath: './include',
            context: {
                name: 'stylesheet'
            }
        }))
        .pipe(gulp.dest(path.dist.html));
});

My html page is pretty simple:

<html>
<head>
@if (context.name === 'stylesheet-email') {
    @@include('./style-email.css')
}
@if (context.name === 'stylesheet') {
    @@include('./style.css')
}
</head>
<body>
    @@include('./header.html')
    @@include('./content.html')
    @@include('./footer.html')
</body>
</html>

Source map support

gulp-sourcemap support can be awesome !

Importing Vietnames Language

Env :
OSX Yosemite : 10.2.2
node: v0.12.0
"gulp-file-include": "0.8.x"

Usage :

gulp.task('emails:stitch', ['emails:styles'], function() {
    return gulp.src(basePath.email + 'raw/*.html')
        .pipe($.fileInclude())
        .pipe($.inlineCss({
            applyStyleTags: true,
            applyLinkTags: true,
            removeStyleTags: true,
            removeLinkTags: true,
            preserveMediaQueries: true
        }))
        .pipe($.rename(function (path) {
            path.extname = ".php"
        }))
        .pipe(gulp.dest(basePath.email));
});

I have a workflow , where i build email templates from components , build HTML inline css etc.

If included components contain VN special character, the generated HTML replaces it with unicode characters .

Sample Main HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.5"/>
        <title>#TITLE#</title>
        <link rel="stylesheet" type="text/css" href="components/styles.css">
    </head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
        <center>
            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
                <tr>
                    <td align="center" valign="top" id="bodyCell">
                        @@include('./components/logo.html')
                        @@include('./components/greeting.html')
                        @@include('./components/banners/kyc-success.html')
                        @@include('./components/content/kyc-success.html')
                        @@include('./components/customer_service.html')
                        @@include('./components/footer.html')
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>

Sample Component

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="headerContainer">
    <tr>
        <td align="center" valign="top" class="singleColumn">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td valign="middle" align="left" class="imgHeaderContent singleColumn" bgcolor="#5f2f88" style="background:#5f2f88">
                        Xin chào #NAME#
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Support to variables

I believe gulp-file-include would be a lot more usefull with support to variables. So, for example, would be possible to include a header.inc defining value of properties to the tags. Something like:

index.html

@@include("/path/to/include/header.inc", { "description" : "My cool web site" })
<h1>My site</h1>
@@include("/path/to/include/footer.inc")

header.inc

<!doctype html>
<html>
    <header>
        [...]
        <meta name="description" value="@@description">
        [...]

including markdown issue

I got a Markdown to be included in an html template using the directions on the site, but when I use direct HTML elements inside the markdown, the template renders them as plain text. I noticed this is different from other markdown implementations out there. Is it running in safe mode, or how might one get this to work?

Including a suffix breaks filters

When I include a suffix and filters, I get the following error. This error occurs regardless if I apply the filter.

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: Cannot read property '0' of null

For my case, I'm including a file inside JSON, so I wrap the file include inside quotes to make it valid JSON. Here's the snippet with the include:

{
    "definitions": {
        "post": "@@include(indent('post.def.json'))"
    }
}

My task looks like this:

gulp.task('schema', function() {
    return gulp.src(['**/*.schema.json'])
        .pipe(fileinclude({
            prefix: '"@@',
            suffix: '"',
            basepath: '@file',
            filters: {
                indent: indent
            }
        }))
        .pipe(gulp.dest('./dist/'));
});

If I comment out suffix, it works, but leaves a trailing quote. If I comment out the filters, it works, but doesn't apply the indent.

Not working at start of a file

My gulp task:

  gulp.task('assets:compile:scripts', ['assets:clean:scripts'], function() {
    return gulp.src(config.paths.assets.scripts + '/**/*.js')
      .pipe(plumber())
      .pipe(include({ prefix: '//= ' }))
      .pipe(gulp.dest(config.paths.assets.build));
  });

Template:

//= include('./io.js')

Ignores if I place the //= at the top of a file.

haoxins / gulp-file-include Goto Github PK

gulp-file-include's Introduction

gulp-file-include

Installation

API

fileinclude([prefix])

prefix

fileinclude([options])

options

options.prefix

options.suffix

options.basepath

options.filters

options.context

options.indent

Examples

@@include options - type: JSON

@@include_once options - type: JSON

filters

if statement

for statement

loop statement

loop statement + data.json

webRoot built-in context variable

License

gulp-file-include's People

Contributors

Stargazers

Watchers

Forkers

gulp-file-include's Issues

Works today:

What I would like:

Recommend Projects

Recommend Topics

Recommend Org

@@include options - type: `JSON`

@@include_once options - type: `JSON`

`if` statement

`for` statement

`loop` statement

`loop` statement + `data.json`

`webRoot` built-in context variable