❤
npm
Sign UpSign In

gulp-nette-basepath

0.1.0 • Public • Published

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-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.

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 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>
    <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: 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

Readme

Keywords

Package Sidebar

Install

npm i gulp-nette-basepath

Repository

github.com/Quinix/gulp-nette-basepath

Homepage

github.com/Quinix/gulp-nette-basepath

Weekly Downloads

39

Version

0.1.0

License

MIT

Last publish

Collaborators

  • quinix
Try on RunKit
Report malware