gulp-nette-basepath
Version:
Parse build blocks in Nette/Latte templates and resolves its Nette's basePath variable.
123 lines (87 loc) • 3.82 kB
Markdown
# gulp-nette-basepath
Plugin for [gulp](https://github.com/gulpjs) 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](https://github.com/chemix/grunt-nette-basepath) and
based on [gulp-useref](https://github.com/jonkemp/gulp-useref) plugin.
## Getting started
Install the plugin with npm
```bash
npm install gulp-nette-basepath
```
## Usage
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.
```js
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](https://github.com/sindresorhus/gulp-filter) to handle specific types of assets.
```js
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:
```html
<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
```
- **type**: either `js` or `css`
- **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
<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](http://pla.nette.org/en/grunt-with-usemin#toc-version-switching-in-latte)
## 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: `String` or `Array`
- 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