gruntjs / grunt-contrib-pug Goto Github PK

When using grunt-contrib-jade to compile a jade file, I have an array of string values, one of which has a semicolon ;. Upon trying to compile this file, I get the error:

>> SyntaxError: Unexpected token ILLEGAL

An example would be:

section_paragraphs = ['something', 'something; something else']

Escaping the semicolon with a backslash \ does not fix the issue.

section_paragraphs = ['something', 'something\; something else']

If I change it into straight JavaScript by putting a dash - before the s in section_paragraphs, I get no error:

-section_paragraphs = ['something', 'something; something else']

What's going on here?

Hi, I am currently using grunt-contrib-jade version 0.9.0 and I am trying to compile jade templates using the meta and link tags which are self-closing tags. The problem is it doesn't put the / at the end of meta tag so I can't get my css link to work properly. I have created an example of this.

https://github.com/PetitPrince13/grunt-contrib-jade-test

I'd recommend changing from "Compile Jade files to HTML." to "Compile Jade files to HTML or JavaScript templates."

When using the // comment syntax, on parse Jade tries to convert words into tags.

//
  this comment
  another comment

becomes

<!--
<this>comment</this>
<another>comment</another>
-->

Playing with jade and grunt, I wanted to implement dynamic content includes, and found in grunt-contrib-jade source code not documented option options.processContent

I suppose it should be documented, because it can be really useful sometimes.
And by the way, can we pass some additional data to this function, like file name?
Thanks.

Hello there

Would be cool if you could add support for locals like this one grunt-jade library is doing:
https://github.com/phated/grunt-jade

I want to pass on my own functions and few other dynamic variables to jade when compiling.

I need someone to help update this plugin to work with grunt 0.4.0rc5.

I had to revert the whole file src-dest mappings implicit iteration abstraction per gruntjs/grunt#606, and once again, multi tasks have to iterate over this.files manually. In addition, there's a new this.filesSrc array that contains a reduced, uniqued set of all matched src files in case the task is read-only and only cares about source files.

See:

• this comment for a description of the changes made.
• grunt-contrib-jshint for an example using the this.filesSrc array.
• grunt-contrib-concat for an example using the this.files array.

Notes:

• A user may specify a new option nonull in addition to src to tell grunt to keep patterns or filepaths that don't actually match files. Because of this, the task shouldn't explode if a nonexistent src filepath is encountered. I handle this in the grunt-contrib-concat by warning if not grunt.file.exists but not failing the task.

Guidelines for updating / publishing this plugin:

• Change this project's version number to one ending in "rc5" so that it's clearer that it works with grunt 0.4.0rc5. If the existing version number doesn't end in an "a" or "rc" increment the patch version. Eg, jshint went from 0.1.0 -> 0.1.1rc5
• Ensure grunt 0.4.0rc5-compatible plugins are specified in package.json devDependencies like this (grunt-contrib-internal can be "*")
• Update the CHANGELOG like this
• Regenerate the README.md file via grunt.
• Delete node_modules, run npm cache clean and re-run npm install to test.
• Publish to npm using --tag=master (not latest)

I have a setup where I have lots of small templates that I don't want to have in single files each.
Thus I have always had them in one file, each in it's own <script> block and this worked well when I just delivered them as part of the HTML or later added them to the DOM via AJAX requests.
However I don't see a way to do this with grunt-contrib-jade right now.

I had a working prototype of changes that made this possible, sadly I fucked up and removed it permanently. It was only a couple of lines of code, so the implementation isn't difficult.

What I imagine being difficult is agreeing on a format for how multiple templates should be stored in a file.

What I had was like this:

navigation.html

<script type="text/x-jade-tmpl" name="breadcrumb">
ul.breadcrumb
  li
    a( href="##{module}" )= module
  li
    a#reload_page Reload
</script>

<script type="text/x-jade-tmpl" name="navigation">
ul.nav.nav-tabs
  li
    a( href="#main" ) Main
  li
    a( href= "#user" ) User

ul.sub_navigation
</script>

resulting in something like this:
navigation.compiled.js

define(['jade'], function (jade) {
  var templates = {
    breadcrumb = function () {/*compiled jade function*/},
    navigation = function () {/*compiled jade function*/}
  };
  return templates;
});

As mentioned, this all worked very well for me, but I imagine that there are better concepts.

I'll create a pull request based on this in the next days unless absolutely not wanted.

Hallo there! Thank you for the great plugin. I tried to use it for fast html development, without the node server to compile jade, unfortunately, no matter in which encoding I save the jade file - the Cyrillic text get's destroyed on the way. Can you, please give me some advice on how to solve it.

Thank you in advance.

I don't know if this is the most appropriate place for this, but I'm new to Jade/Grunt and sat down to read the documentation over, and I notice there is a few gaps and here and there.

Most notably, the "files" option for grunt-contrib-jade seems to be completely missing, and the examples make no mention of what seems to be the extend options for files.

The examples seem to indicate that the option accepts a destination key paired with a list of sources, like so:

files: {"path/to/dest.html": ["path/to/templates/*.jade", "another/path/tmpl.jade"]}

However, there seems to be another way of configuring this. In particular, I wanted to compile all the files in a source directory in a 1 to 1 mapping to a destination directory. I was finally able to achieve this with the follow:

files: [{
  expand: true,
  cwd: "pages",
  src: "*.jade",
  dest: "output/",
  ext: '.html'
}]

I apologize if I simply didn't see this documented, or if I was supposed to already know this (maybe it's a feature to Node, which I am pretty new to), but at any case I would suggest making it a bit more prominent?

Jade ~1.0.0 removed parsing conditional comments. This means:

//if IE 8
  some code

no longer works and doesn't throw any errors.

While binding to 1.0.0 in grunt-contrib-jade 0.9.0 doesn't technically break anything specific to the grunt-contrib-jade APIs, the Jade dependency is not backwards compatible with the Jade version in grunt-contrib-jade 0.8.0.

Since compiling jade is the primary purpose of this module, I'm requesting a version bump to 1.x to signify the API-breaking changes in the primary dependency.

Per the jade page:

"As mentioned include can be used to include other content such as html or css. By providing an extension, Jade will read that file in, apply any filter matching the file's extension, and insert that content into the output."

The expected output of "include /path/to/file.css" is the content of file.css wrapped in the proper html tag.

Instead the content of file.css is just getting dumped into the html without any tags.

Hello,

Just a suggestion, but is it possible to have more concise logging? At the moment I see a line for each jade file compiled, e.g.

Running "jade:templates" (jade) task
File "src/app/lib/cores/templates/anyof-array-item.html" created.
File "src/app/lib/cores/templates/anyof-array.html" created.
File "src/app/lib/cores/templates/array-item.html" created.
File "src/app/lib/cores/templates/array.html" created.
...

I compile a lot of files, so the current verbose logging makes it a bit harder to scan multiple grunt tasks. Ideally, I'd like to see something more along the lines of:

Running "jade:templates" (jade) task
Created 20 files

Is this possible, i.e. am I missing an option somewhere (maybe in grunt itself?). If not, could this be added as the default with an option for verbose logging if desired. This would also seem more consistent with the output I see from other grunt contributions.

Hope this makes sense!

Regards, Rob

P.S. Love jade and this contribution!

From documentation I think that compileDebug: false must remove ['jade'] from amd module.

For example with compileDebug false I will receive *.js file with:

define(function() {

Instead of:

define(['jade'], function(jade) { if(jade && jade['runtime'] !== undefined) { jade = jade.runtime; }

But now this flag is not checking. There is no checks for it in https://github.com/gruntjs/grunt-contrib-jade/blob/master/tasks/jade.js (it probably must be around line 105 or so).

And amd test's expected files ( https://github.com/gruntjs/grunt-contrib-jade/blob/master/test/expected/amd/jade.js ) also waiting that there will be [jade] dependency, even if compile_amd config says compileDebug: false. See https://github.com/gruntjs/grunt-contrib-jade/blob/master/Gruntfile.js

Seems to me that the file should run standalone if the client option is set to true. The jade runtime for browsers could be included in the generated file.

Is there any reason why we shouldn't include the jade runtime inside of the generated file? @tkellen @cowboy

I'm not sure if I'm doing this wrong or what, but when I compile this, and run this in the browser, I get "jade is undefined".

jade: {
  compile: {
    options: {
      compileDebug: false,
      client: true,
       data: {
        client: true,
        debug: false
      },
    },
    files: {
      'public/js/jade.js': 'views/annotation/_listPartial.jade'
    }
  }
}

Am I missing something?

Typescript is close to version 1.0 and getting popular. I have already started using it in my projects. However, integration jade client templates into typescript project is for now possible only with ugly combination of undocumented amd-dependency hack and namespace option:

/// <amd-dependency path="path/to/template"/>
declare var JST
var template = JST["absolute/path/to/template"]

With typescript wrapper this could be reduced to:

import template = require("path/to/template")

Implementing basic typescript wrapper is easy:

• require "self" option (typescript throws error on "with" statements)
• wrap code with propper import and export statement.
• change file ext to ".ts"

If you like this idea i can make pull request, or at least put sample code and wait for #19 being resolved.

This is feature is not supported at all.

I'm using Yeoman 1.0 beta and Grunt 0.4.0 and am a bit confused.

Where would you recommend I compile my jade templates to? I want a separation between my app and dist but I also want to be able to use $ grunt server and see the templates compile live.

My jade templates are in app/views and if I use the same folder as destination they are available with the server task.

However, I assume the compiled files shouldn't be in the app dir - but only in the /dist when building but then I can't see them on the grunt server. Should the jade templates be compiled to some tmp dir available to the server, or?

Hope it's clear enough, thank you!

grunt: 0.4.0rc7
grunt-contrib-jade: 0.3.1

Here's the story: I've created an index.jade in a app directory. I'm willing to compile it to temp/index.html.

Here's my Gruntfile.coffee:

module.exports = (grunt) ->
  grunt.initConfig
    jade:
      compile:
        options:
          pretty: false
            data:
              debug: false
        files:
          'temp/*.html': ['app/*.jade']
  grunt.loadNpmTasks 'grunt-contrib-jade'
  grunt.registerTask 'default', ['jade']

Please, let me know if you need additional informations.

With an option to wrap them for AMD or JST consumption.

Jade is at 0.34.1

I have a bunch of file (more than 40) and when I "watch" it takes me a long time
Thanks

SYMPTOM: this error message:
In order to apply the transform markdown you must install one of "marked","supermarked","markdown-js","markdown"

PROBLEM: spurious error message; markdown is indeed installed.

BACKGROUND:

1. Beforehand, I already had installed markdown, with no errors, per:
   $ npm install markdown --save-dev
2. verification of correct npm install operation:
   2.1. node_modules folder now contains markdown (as well as express, jade and .bin)
   2.2. package.json now specifies "markdown": "~0.5.0" under devDependencies

I found mention about this option here: http://stackoverflow.com/questions/11675453/jade-loading-templates-from-different-directories#comment27283495_11677885

It allows to use absolute paths in exclude and include directives (starting with slash).

So I'm a bit baffled by all of the options available; say that I have a directory (with sub-directories) containing my *.jade templates. For example:

'app/views/index.jade'
'app/views/partials/home.jade'
'app/views/partials/products/management.jade'
'app/views/partials/users/update.jade'

etc..

and I want to have the compiled HTML files moved to the 'app/public/' folder, but maintain the folder structure, eg.

'app/public/index.html'
'app/public/partials/home.jade'
'app/public/partials/products/management.jade'
'app/public/partials/users/update.jade'

What combination of configuration options do I need to achieve this?

On windows7 I'm getting an error of: Unable to write: "path/to/*html" file . Use --force to continue.

and --force, doesn't help.

I'm using cli v0.1.11
and grunt v0.4.2

thanks!

Hi! I couldn't find it in the docs and wonder if its is possible to pass to the jade task a layout which all rendered templates extend from. So basically I want to remove the 'extend myLayout' part from my templates as in

extend myLayout

template content...

and pass 'myLayout' to the grunt jade task maybe as an option parameter or even more dynamic, as a variable to the data object.

Do you see any possibility?

No mention of the pretty option in the documentation, or the code

I'm trying to make use of the grunt-contrib-watch feature for (compiling files as needed)[https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed] but I'm having trouble getting it work.

Is this supported with grunt-contrib-jade?

creating html files on yeoman doesnt appear to be working for dynamic files only for static

Ive been trying this piece of code for generating html file using jade

jade: {
html: {
src: ['app/jade/.jade', 'app/jade/__/.jade',
'app/jade/!__.jade', 'app/jade/*/!*.jade'],
dest: 'app/',
options: {
client: false,
basePath: 'app/jade',
pretty: true
}
}
}

though when i change to

jade: {
html: {
src: ['app/jade/.jade', 'app/jade/__/.jade',
'app/jade/!__.jade', 'app/jade/*/!*.jade'],
dest: 'app/test.html',
options: {
client: false,
basePath: 'app/jade',
pretty: true
}
}
}

all is fine

it appears the wildcard isnt getting picked up - most probably this is not the best approach what about using the rename method would this work - cant understand why the wildcards carnt being carried over

Im using yeoman v1

tks
M

Hi!

It looks like you haven't published latest code to the NPM and options.filters is not yet there. When will it be available? I'd really love to use it!

Also it'd be sweet to be able to pass helpers functions to be available in the templates, similar to what you do with filters, only attached directly to the jade object so you can invoke them from the templates!

👍

The grunt-jade task allows compilation to javascript, which is very nice for building widgets. Could this be added to this task?

# package.json
{
  "devDependencies": {
    "grunt-contrib-jade": "~0.8.0"
  }
}

# bad version v0.8.0
npm install

# bad version v0.8.0
npm install grunt-contrib-jade@latest

# good version v0.8.0
npm install git+https://github.com/gruntjs/grunt-contrib-jade.git#master

The good version has options.filters (124 lines).
The bad version does not (130 lines).

Porque?

I have a en_copy.js file that I have had added to my "Watch" task. Although any update to "en_copy.js" will show the Grunt task "watching", the actual copy won't update until I've re-run grunt.

I would like the Watch task to work properly with the language file

Im not sure this ticket belongs here, sorry if not's the case.
How can I use Jade filters? Im trying to use a markdown filter and i always get:

In order to apply the transform markdown you must install one of "marked","supermarked","markdown-js","markdown"
Warning: Jade failed to compile src/index.jade. Use --force to continue.

Hello!

    jade:
      default:
        pretty: true
        expand: true
        src: ['*.jade']
        dest: './'
        ext: '.html'

unfortunately getting pretty much compressed output

How can I leverage a custom jade filter with this? In development, it just runs on my Express server, but I'd like to leverage it during the build process so I can output static files.

Hi there, I'm having a bit of an issue compiling my Jade templates that use Angular directives. Here's the error & all relevant files + snippets: https://gist.github.com/shayanjm/9f48db325c9562d9e1cf

I've narrowed it down to the Angular directives by commenting out all lines that use the directives. The moment they're commented out, the files compile just fine. Otherwise, it errors on the directive itself.

I was trying to replicate a file structure create in jade, so that it would be output to the build directory maintaining the structure from the source.

I've tried the usual syntax for targeting multiple files on the Jade task but can't get it work.

Is this supposed to be possible?

Thanks.

files: [{
  expand: true,
  cwd: '<%= folders.app %>/jade',
  src: ['{,*/}*.jade', '!**/_*'],
  dest: '<%= folders.tmp %>/'
}],

When i do this i get compiled HTML files but with the .jade extension. I like to write .html by default without using the rename function. Is that possible out of the box?

This could be a minimatch issue, or even more likely, my own stupidity.

But this configuration below still tries to compile files in the node_modules directory

jade: {
    options: {
        pretty: true
    },
    compile: {
        files: {
            '**/*.html': ['**/*.jade', '!**/node_modules/**']
        }
    }
}

I also tried the following:

['**/*.jade', '!/node_modules/**']
['**/*.jade', '!/node_modules/**/*.jade']
['**/*.jade', '!node_modules/**/*.jade']

First off, thanks for the plugin!

I was wondering whether it would be possible to add something similar to this:-

jade: {
    compile: {
        files: {
            "html/*.html": "jade/*.jade"
        }
    }
}

Whereby each jade template is rendered to a HTML file of the same name.

I would like to use my templates through Browserify. Any chance that a wrapper for CommonJS could be added?

Hello, I have a use-case which I'm completely baffled with. I have a bunch of jade files in 2 or 3 folders within a directory, say, foo/bar/*
now I need each of these jade files to compile into html files.

Why can I not specify an output directory? In the other plugin grunt-jade, there is this handy options:

jade: {
  compile: {
    files: {
      'dest/path/': ['path/to/src/*.jade']
    }
  }
}

Is there an equivalent in this plugin?

I believe this problem has surfaced in a couple of Yeoman generators, but using this, I noticed that styles were not refreshed to the dist folder. Any change to the Sass file will update the CSS file in the .tmp folder, but with invalid CSS. All rules in the .tmp css file start with a line @media -sass-debug-info. I assume this is the reason the dist CSS file is not being updated.

There's a pretty nasty bug in 0.30.0 where block append's contents are reapeated n times, n equal to number of lines in the parent block.

I just installed grunt-contrib-jade and ran the Gruntjs file. I keep getting this warning:

Object # has no method 'warn' Use --force to continue.

without any compilation. Below is the configuration in my grunt file:

jade: {
compile: {
options: {
pretty: true
},
files: [
{
expand: true,
cwd: 'app/views',
src: ['*/.jade'],
dest: 'app/views',
ext: '.html'
}
]}
},

and in watch section:

// default watch configuration
watch: {
jade: {
files: [
"app/views/.jade", "app/.jade"
],
tasks: 'jade'
}
}

and this at the bottom of the file:

grunt.loadNpmTasks('grunt-contrib-jade');

Is there anything else missing in the config I have? Thank you for all your help.