6

I am using jadeify with browserify to use jade templates in my frontend.

Gulp Setup

gulp.task('browserify', function () {
    var bundler = browserify({entries: ['./frontend/js/app.js']});
    var bundle = function () {
        return bundler
            .transform(jadeify)
            .bundle()
            .pipe(source('app.js'))
            .pipe(gulp.dest('./public/js'))
    };
    if (global.isWatching) {
        bundler = watchify(bundler);
        bundler.on('update', bundle);
    }
    return bundle();
});

The jade file

.header
   h1 Login
.content
   div
      input(placeholder="Username", name="uname", type="text")
      input(placeholder="Password", name="pword", type="password")
.footer
   a(href="/signup")
      span Create an Account

require for the jade file

require('../../views/index.jade')({jamie:'hello'})

Output inside app.js

module.exports = function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;

buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input     placeholder=\"Username\" name=\"uname\" type=\"text\"/><input placeholder=\"Password\" name=\"pword\"     type=\"password\"/></div></div><div class=\"footer\"><a href=\"/signup\"><span>Create an     Account</span></a></div>");;return buf.join("");    };

Everything is good

Error from gulp when changing anything in the jade file

[14:36:14] gulp-notify: [Compile Error] C:\var\www\mywarhammer.co.uk\frontend\views\index.jade:8
6| var jade_interp;
7|
> 8| buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" the an Account</span></a></div>");;return buf.join("");
9| };

Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\index.jade

How can I stop this breaking?

Edit

I have since added more output from gulp-notify on these errors... They actually don't help me a whole lot. It seems to me that they are coming from the original jade file :/

Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade
[ { [Error: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade:8
      6| var jade_interp;
      7|
    > 8| buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" type=\"text\"/>
ate an Account " + (jade.escape((jade_interp = locals.jamie) == null ? '' : jade_interp)) + "</span></a></div>");;return buf.join("");
      9| };

  Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade]
    path: 'C:\\var\\www\\mywarhammer.co.uk\\frontend\\views\\home.jade',
    filename: 'C:\\var\\www\\mywarhammer.co.uk\\frontend\\views\\home.jade',
    stream:
     { _readableState: [Object],
       readable: true,
       domain: null,
       _events: [Object],
       _maxListeners: 10,
       _writableState: [Object],
       writable: true,
       allowHalfOpen: true,
       _options: [Object],
       _wrapOptions: [Object],
       _streams: [Object],
       length: 1,
       label: 'deps' } } ]
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • I think your build script is attempting to compile the *output* file as if it was a jade file. Check your build script. If it previously compiled to a `.jade` file and second run through picked it up... – Sukima Dec 15 '14 at 14:05
  • Interesting idea. I'll have a look through, although it starts off as a `.jade` file. But I like the idea – Jamie Hutber Dec 15 '14 at 14:07
  • @Sukima I think the problem with this idea is that there is no output file as it were. `Browserify` compiles the `jade` files into js, as seen at **Output inside app.js**. But I still like the trail of thought. Because the fact it compiles first time around and 'watchify' is then listening for any changes I would have thought that it runs the same code again, on the same files. Maybe this is where the problem lies. with 'watchify' – Jamie Hutber Dec 15 '14 at 14:16

1 Answers1

1

Try changing the escaped quotes in

buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" type=\"text\"/><input placeholder=\"Password\" name=\"pword\" type=\"password\"/></div></div><div class=\"footer\"><a href=\"/signup\"><span>Create an Account</span></a></div>");

to

buf.push("<div class='header'><h1>Login</h1></div><div class='content'><div><input placeholder='Username' name='uname' type='text'/><input placeholder='Password' name='pword' type='password'/></div></div><div class='footer'><a href='/signup'><span>Create an Account</span></a></div>");

because the string is probably passing through two different parsers - the first one interprets \" as ", and the second one gets confused.

DaveS
  • 3,156
  • 1
  • 21
  • 31
  • Interesting again... I will try to figure out how it could be being passed through 2. – Jamie Hutber Dec 15 '14 at 22:21
  • I do really think you are correct. But now... the very hard part, debugging where the heck its happening twice. I've gone over and over the code, I can't see where it recompile the compiled jade files as they are all put into one js file with each compile. app.js. ummm thoughts would be lovely :P – Jamie Hutber Dec 15 '14 at 23:17
  • I've added more info about the error which I believe just confirms its coming from the same uncompiled jade file – Jamie Hutber Dec 16 '14 at 11:14
  • 1
    It looks like it's the `.transform(jadeify)` line that is doing the first escape, giving you the `\"` sequences. And I'd guess it's the `.bundle()` line, or one of the pipes, that doesn't know how to handle it. According to http://stackoverflow.com/questions/24994830/gulp-browserify-error-during-compilation-of-jade-in-html, it's the source function that is incompatible with jadeify. They suggest using `var source = require('vinyl-source-stream');` instead of the normal source. – DaveS Dec 16 '14 at 16:52