npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-jade-inheritance

v0.5.5

Published

Rebuild only changed jade files and all it dependencies

Downloads

495

Readme

#gulp-jade-inheritance Build Status

Rebuild a jade file with other files that have extended or included those file

Inspired by jade-inheritance

Install

npm install gulp-jade-inheritance --save-dev

Usage

gulpfile.js

var jadeInheritance = require('gulp-jade-inheritance');
var jade = require('gulp-jade');

gulp.task('jade-inheritance', function() {
  gulp.src('/jade/example.jade')
    .pipe(jadeInheritance({basedir: '/jade/'}))
    .pipe(jade());
});

In this example jade compile example.jade and all other files that have been extended or included example.jade. The plugin searches for those dependencies in the basedir directory.

Only process changed files

You can use gulp-jade-inheritance with gulp-changed and gulp-cached to only process the files that have changed. This also prevent partials from being processed separately by marking them with an underscore before their name.

'use strict';
var gulp = require('gulp');
var jadeInheritance = require('gulp-jade-inheritance');
var jade = require('gulp-jade');
var changed = require('gulp-changed');
var cached = require('gulp-cached');
var gulpif = require('gulp-if');
var filter = require('gulp-filter');

gulp.task('jade', function() {
    return gulp.src('app/**/*.jade')

        //only pass unchanged *main* files and *all* the partials
        .pipe(changed('dist', {extension: '.html'}))

        //filter out unchanged partials, but it only works when watching
        .pipe(gulpif(global.isWatching, cached('jade')))

        //find files that depend on the files that have changed
        .pipe(jadeInheritance({basedir: 'app'}))

        //filter out partials (folders and files starting with "_" )
        .pipe(filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))

        //process jade templates
        .pipe(jade())

        //save all the files
        .pipe(gulp.dest('dist'));
});
gulp.task('setWatch', function() {
    global.isWatching = true;
});
gulp.task('watch', ['setWatch', 'jade'], function() {
    //your watch functions...
});

If you want to prevent partials from being processed, mark them with an underscore before their name or their parent folder's name. Example structure:

/app/index.jade
/app/_header.jade
/app/_partials/article.jade
/dist/

To install all that's need for it:

npm install gulp-jade-inheritance gulp-jade gulp-changed gulp-cached gulp-if gulp-filter --save-dev

jade >= 1.11

if your using jade 1.11 add "jade": "^1.11.0" to your package.json to overwrite the jade-inheritance version. Issue