在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):carlitoplatanito/gulp-nunjucks-render开源软件地址(OpenSource Url):https://github.com/carlitoplatanito/gulp-nunjucks-render开源编程语言(OpenSource Language):JavaScript 92.9%开源软件介绍(OpenSource Introduction):gulp-nunjucks-render
Issues with the output should be reported on the Nunjucks issue tracker. InstallInstall with npm
Examplevar gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
gulp.task('default', function () {
return gulp.src('src/templates/*.html')
.pipe(nunjucksRender({
path: ['src/templates/'] // String or Array
}))
.pipe(gulp.dest('dist'));
}); Example with gulp datavar gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data');
function getDataForFile(file) {
return {
example: 'data loaded for ' + file.relative
};
}
gulp.task('default', function () {
return gulp.src('src/templates/*.html')
.pipe(data(getDataForFile))
.pipe(nunjucksRender({
path: 'src/templates'
}))
.pipe(gulp.dest('dist'));
}); APIOptionsPlugin accepts options object, which contain these by default: var defaults = {
path: '.',
ext: '.html',
data: {},
inheritExtension: false,
envOptions: {
watch: false
},
manageEnv: null,
loaders: null
};
For more info about nunjucks functionality, check https://mozilla.github.io/nunjucks/api.html and also a source code of this plugin. DataU can pass data as option, or you can use gulp-data like in example above. nunjucksRender({data: {
css_path: 'http://company.com/css/'
}}); For the following template <link rel="stylesheet" href="{{ css_path }}test.css" /> Would render <link rel="stylesheet" href="http://company.com/css/test.css" /> EnvironmentIf you want to manage environment (add custom filters or globals), you can to that with var manageEnvironment = function(environment) {
environment.addFilter('slug', function(str) {
return str && str.replace(/\s/g, '-', str).toLowerCase();
});
environment.addGlobal('globalTitle', 'My global title')
}
nunjucksRender({
manageEnv: manageEnvironment
}): After adding that, you can use them in template like this: <h1>{{ globalTitle }}</h1>
<h3>{{ 'My important post'|slug }}</h3> And get this result: <h1>My global title</h1>
<h3>my-important-post</h3> LicenseMIT © Carlos G. Limardo and Kristijan Husak Shout-outsSindre Sorhus who wrote the original gulp-nunjucks for precompiling Nunjucks templates. I updated his to render instead of precompile. kristijanhusak for bug fixes and help with maintenance. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论