gulp-nette-basepath
v0.1.0
Published
Parse build blocks in Nette/Latte templates and resolves its Nette's basePath variable.
Downloads
95
Maintainers
quinixReadme
gulp-nette-basepath
Plugin for gulp that parses build blocks of css/js files from Nette/Latte templates and resolves $basePath variable to real path.
This plugin is inspired by similar Grunt plugin - chemix/grunt-nette-basepath and based on gulp-useref plugin.
Getting started
Install the plugin with npm
npm install gulp-nette-basepathUsage
The following example will parse the build blocks in the all Latte templates in app folder, replaces the basePath to ./www (relative to gulpfile.js location). The assets in build blocks will be concatenated and passed through the stream. Concatenated files will be written to their destination paths as defined in build blocks - this paths can also contain basePath.
var gulp = require('gulp'),
basepath = require('gulp-nette-basepath');
gulp.task('default', function () {
return gulp.src('app/**/*.html')
.pipe(basepath({basePath: "./www"}))
.pipe(gulp.dest('./'));
});If you want to minify your assets or perform some other modification, you can use gulp-filter to handle specific types of assets.
var gulp = require('gulp'),
basepath = require('gulp-nette-basepath'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css');
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/**/*.latte')
.pipe(basepath())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(cssFilter.restore())
.pipe(gulp.dest('./'));
});Blocks are expressed as:
<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->- type: either
jsorcss - alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
- path: the file path of the optimized file, the target output
An example of this in completed form can be seen below:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>This plugin does not support replacing the build blocks with combinied/mininified scripts and styles. If you are missing this feature, feel free to send pull request...
Instead I recommend using conditional switch between minified/non-minified in Latte template, same as Grunt basepath plugin uses. It is very nicely described on Planette
API
basepath(options)
Returns a stream with the concatenated asset files from the build blocks inside the template.
options.basePath
- Type:
string - Default: ./www
Sets string the {$basePath} is replaced with in paths. Defaults to www since its Nette default document root.
options.searchPath
- Type:
StringorArray - Default: location of gulpfile.js
Specify the location to search for asset files, relative to the current working directory. Can be a string or array of strings.
options.verbose
- Type:
bool - Default: false
Shows more info of parsed files.
License
MIT