juanfran / gulp-jade-inheritance Goto Github PK

View Code? Open in Web Editor NEW

35.0 35.0 32.0 14 KB

Gulp plugin to rebuild jade files and other files that have extended or included those files

JavaScript 100.00%

gulp-jade-inheritance's People

Contributors

Stargazers

Watchers

Forkers

berstend piotrd decore ar1es pure180 evgen3-forks tars

gulp-jade-inheritance's Issues

Files dependant on partials not being updated.

Hi!

I made some changes to a partial file _header but the other files brownies and pie that included this partial file are not being updated. Could you help with this issue, please? Thanks!

File structure:

/app/includes/_header.jade
/app/recipes/brownies.jade
/app/recipes/pie.jade

Task: jade

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($.if(global.isWatching, $.cached('jade')))

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

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

    //process jade templates 
    .pipe($.jade({
        pretty : true
    }))

    //save all the files 
    .pipe(gulp.dest('dist'));
});

gulp.task('setWatch', function() {
    global.isWatching = true;
});

Task: watch

gulp.task('watch', ['setWatch', 'pug', 'connect'], function () {
    gulp.watch([
        'dist/**/*.html',
        'dist/assets/css/**/*.css',
        'dist/assets/js/**/*.js'
    ], function(event) {
        console.log(event);
        return gulp.src(event.path)
            .pipe($.connect.reload());
    });

    gulp.watch('app/**/*.jade', ['jade']);
    gulp.watch('app/assets/scss/**/*.scss', ['sass']);
    gulp.watch('app/assets/js/**/*.js', ['js']);
    gulp.watch('app/assets/images/**/*', ['images']);
});

Sass inheritance

Thanks for the the gulp plugin!

I've created a sister plugin for scss files by modifying your plugin:
https://github.com/berstend/gulp-sass-inheritance

👍

The usefulness of the "changed" plugin

Hi Juan!

Could you explain more clearly the usefulness of the "changed" plugin?

What would be the purpose? Why would anyone want to monitor the files that have been compiled?

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

Thank you for publishing this package :)

How to use gulp-jade-inheritance with gulp-data?

Hi!
I know how to use gulp-jade with gulp-data.
https://github.com/phated/gulp-jade#use-with-gulp-data
http://stackoverflow.com/questions/27313107/gulp-using-gulp-jade-with-gulp-data

But I do not know how to use gulp-jade-inheritance with gulp-data. You have to either compile all pages when you change the JSON file, or search for and compile the pages that use this data. Maybe you have any ideas?

Here is my code:

gulp.task('jade', function(){
    return gulp.src(['src/jade/**/*.jade'])
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red('Error: ' + error.message));
            this.emit('end');
        }))
        .pipe(changed('public', {extension: '.html'}))
        .pipe(cached('jade'))
        .pipe(jadeInheritance({basedir: 'src/jade'}))
        .pipe(data(function(file) {
            return JSON.parse(fs.readFileSync('./src/jade/data.json'));
        }))
        .pipe(filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))
        .pipe(jade({
            pretty: '\t'
        }))
        .pipe(gulp.dest('public'))
        .pipe(livereload());
});
gulp.task('jade:all', function(){
    return gulp.src(['src/jade/**/*.jade'])
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red('Error: ' + error.message));
            this.emit('end');
        }))
        .pipe(data(function(file) {
            return JSON.parse(fs.readFileSync('./src/jade/data.json'));
        }))
        .pipe(filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))
        .pipe(jade({
            pretty: '\t'
        }))
        .pipe(gulp.dest('public'))
        .pipe(livereload());
});

Thanks!

Jade includes/extends are not considered on watch task

Maybe Iam doing something wrong, but using a template based jade build environment with subfolder, includes and extendsare not considered on watch task when saving them.

Maybe you can take a look at it, thanks in advanced.

My build Enviroment

src
-- jade
----- layouts
-------- default.jade
----- partials
-------- mypartial.jade
----- templates
-------- index.jade

My gulpfile.js

'use-strict';

var gulp = require('gulp');
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');
var jadeInheritance = require('gulp-jade-inheritance');

gulp.task('jade', function(){
  return gulp.src( './src/jade/templates/**/*.jade' )
    .pipe(changed('dist', {extension: '.html'}))
    .pipe(gulpif(global.isWatching, cached('jade')))
    .pipe(jadeInheritance({basedir: 'src/jade/templates'}))
    .pipe(filter(function (file) {
      return !/\/_/.test(file.path) || !/^_/.test(file.relative);
    }))
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest( 'dist' ))
});

gulp.task('setWatch', function() {
  global.isWatching = true;
});

gulp.task('watch', [ 'setWatch', 'jade'], function() {
  gulp.watch( 'src/jade/**/*.jade', ['jade']);
});

Skipping jadeInheritance() on initial launch

Hi there. I have a project with quite a lot of views (>130 jade files). Analyzing all of them by jadeInheritance() is not needed on initial run, since all of them need to be compiled by jade anyway. I was trying to find a way to skip jadeInheritance() on first build and run it subsequently on the changed files only, but so far I got nowhere.

Does anyone have any idea of how to achieve that?

For reference, here is my task:

gulp.task('views', [], function() {
  var srcPath = config.app('/views/**/*.jade');
  var destPath = config.dist('views/');

  return gulp.src(srcPath)
    .pipe(newer({dest: destPath, ext: '.html'}))
    .pipe(cached('jade'))

    //I'd like to skip this on initial run
    .pipe(jadeInheritance({basedir: config.app('/views')}))

    .pipe(filter(function (file) {
      return !/\/_/.test(file.path) && !/^_/.test(file.relative);
    }))
    .pipe(jade())
    .on('error', handleErrors)
    .pipe(gulpIf(config.htmlmin, htmlmin({collapseWhitespace: true})))
    .on('error', handleErrors)
    .pipe(gulp.dest(destPath));
});

Jade 1.11

gulp-jade uses jade 1.11, this plugin uses jade-inheritance which in turn uses jade 1.9. These versions differs in syntax. Jade 1.11 uses "code blocks". So this code won's compile

-
  list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]

Please update docs or include custom version of jade-inheritance with updated dependencies. It should work.

How can i use it with gulp 4?

setWatch task doesn't work with gulp 4

Illegal operation on a directory, read

I'm experiencing some difficulty with this module and I'd really appreciate any help. Here is my task:

gulp.task('templates-dev', function() {
    gulp.src('./app/jade/templates/*.jade')
        .pipe(jadeInheritance({baseDir: './app/jade/'}))
        .pipe(jade({
            locals: './app/jade/',
            pretty: true
        }))
        .pipe(gulp.dest('./dev/'))
});

And the output I'm getting is:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: EISDIR: illegal operation on a directory, read
    at Error (native)
    at Object.fs.readSync (fs.js:603:19)
    at Object.fs.readSync (/Users/danieldafoe/Desktop/folder/node_modules/gulp-cssmin/node_modules/graceful-fs/polyfills.js:218:23)
    at Object.fs.readFileSync (fs.js:438:24)
    at _fn (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/parser.js:52:50)
    at Parser.getInheritance (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/parser.js:100:9)
    at _fn (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/parser.js:81:71)
    at Parser.getInheritance (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/parser.js:100:9)
    at new Parser (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/parser.js:24:24)
    at new JadeInheritance (/Users/danieldafoe/Desktop/folder/node_modules/jade-inheritance/lib/index.js:10:16)
    at /Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/index.js:34:33
    at arrayEach (/Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/node_modules/lodash/index.js:1289:13)
    at Function.<anonymous> (/Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/node_modules/lodash/index.js:3345:13)
    at Stream.endStream (/Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/index.js:32:9)
    at _end (/Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/node_modules/event-stream/node_modules/through/index.js:65:9)
    at Stream.stream.end (/Users/danieldafoe/Desktop/folder/node_modules/gulp-jade-inheritance/node_modules/event-stream/node_modules/through/index.js:74:5)

I'm just unsure which "directory" the illegal operation is happening in. This only happens when I insert my pipe with gulp-jade-inheritance.

Multiline variables

Hello. When i try use your plugin, it doesn't compile multiline variables like this

var array = [
item1,
item2
]

Update dependencies

Hi,

Could you please update dependencies for this plugin? I keep getting these:

npm WARN unmet dependency /node_modules/gulp-jade-inheritance/node_modules/vinyl-fs/node_modules/glob-stream requires glob@'^4.3.1' but will load npm WARN unmet dependency /node_modules/glob, npm WARN unmet dependency which is version 5.0.10

Or maybe vinyl-fss or glob-streams authors should be asked first? ;)

Plugin crashes gulp on syntax error

The plugin feeds an invalid glob pattern to the output chain if some errors occur with jade syntax.
(to next gulp.src())

The end of the string was reached with no closing bracket found.resources/jade/frontend/modules/_banner.jade

/Users/Shared/www/beirut/node_modules/gulp-jade-inheritance/node_modules/vinyl-fs/lib/src/index.js:37
    throw new Error('Invalid glob argument: ' + glob);
    ^

Error: Invalid glob argument: 
    at Object.src (/Users/Shared/www/beirut/node_modules/gulp-jade-inheritance/node_modules/vinyl-fs/lib/src/index.js:37:11)
    at Stream.endStream (/Users/Shared/www/beirut/node_modules/gulp-jade-inheritance/index.js:63:11)
    at _end (/Users/Shared/www/beirut/node_modules/gulp-jade-inheritance/node_modules/through/index.js:65:9)
    at Stream.stream.end (/Users/Shared/www/beirut/node_modules/gulp-jade-inheritance/node_modules/through/index.js:74:5)
    at Transform.onend (/Users/Shared/www/beirut/node_modules/gulp-cached/node_modules/readable-stream/lib/_stream_readable.js:523:10)
    at Transform.g (events.js:273:16)
    at emitNone (events.js:85:20)
    at Transform.emit (events.js:179:7)
    at /Users/Shared/www/beirut/node_modules/gulp-cached/node_modules/readable-stream/lib/_stream_readable.js:965:16
    at nextTickCallbackWith0Args (node.js:453:9)

My task:

gulp.task('jade', function (cb) {
    return gulp.src(['**/*.jade'], {cwd: app + 'jade'})
        .pipe($.plumber(options.plumber))
        .pipe($.cached('jade'))
        .pipe($.if(global.isWatching, jadeInheritance({basedir: app + 'jade'})))
                .pipe($.filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))
        .pipe($.jade(options.jade))
        .pipe($.prettify(options.htmlPrettify))
        .pipe($.rename(function (path) {
            path.extname = ".blade.php";
        }))
        .pipe(gulp.dest(app + 'views'))
        .pipe($.size({title: 'jade'}))
        .pipe(browserSync.reload({stream: true}));

});

I think it must not kill a gulp process.