haoxins / gulp-file-include Goto Github PK
View Code? Open in Web Editor NEWMAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include
License: MIT License
MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include
License: MIT License
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!
suggest:
is it able not interrupt while the include file is not exists ?
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"
})
Please)
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?
@@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
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
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)
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?
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.
Sometimes need to hide include constructions from html by comments.
Can you add suffix option like in grunt-include-replace?
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.
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"
})
hulala,hulala 😊
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>
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)
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
Hi,
Can you explain how to use this plugin with gulp watch?
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
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.
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.
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?
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">
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 :)
Today you support recursion problems when file A includes file A, and I get the report of
"recursion detected in file:"
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
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-sourcemap support can be awesome !
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?
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
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?
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.
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 "@"
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.
Is there an option to use multiple file locations? for example my structure is:
-- /app
| -- /components
| --header.html
| -- /files
| --logo.svg
| -- /pages
| --home.html
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?
The plugin doesn't ignore html comments. The plugin includes html files even if the include statement is commented out.
I understand relative paths (./filePath) and (../filePath) BUT can I do this? (/filePath)
Im trying to get this to work:
@@include('/snippets/_head.inc')
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">
[...]
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>
@@if (context.name === 'test' && nav === true) {
<label>@@name</label>
and <label>@@context.name</label>
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);
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.
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
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>
}
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.