stackoom
  简体   繁体   中英

gulp-browserify error during compilation of jade in html

 原文  2014-07-28 12:03:00  4   1    javascript/ pug/ gulp

Question

Sorry for possible mistakes in the writing - use the Google translator.
I use the gulp-browserify

gulpfile.js - 

gulp.task('jade', function(){
    gulp.src('app/src/*.jade')
    .pipe(plumber(/*{ErrorHandler: notify.onError("<% error.massage %>")}*/))
    .pipe(browserify({
        transform: ['jadeify'],
        extension: ['.jade']
    }))
    .pipe(rename('*.html'))
    .pipe(gulp.dest('app/dev'))
})

error -

[14:20:53] Plumber found unhandled error: SyntaxError in plugin 'gulp-browserify' /home/acopalipsis/proj/app/src/fake_723954d4.js:1
doctype html
^ ParseError: Unexpected identifie

index.jade - 

doctype html
html(lang="en")
head
    meta(charset="UTF-8")
        title Test
body

Why the error? How to fix?

***********************************ADDED***********************************
Made - 

gulp.task('jade', function(){
    browserify(['./app/src/index.jade'])
    .transform(jadeify)
    .bundle({debug:false})
    .pipe(source('index.html'))
    .pipe(gulp.dest('app/dev'))
})

But the generated html consists of 224 js code... Why?
If you want to display this code, tell me, I'll show!
***********************************ADDED-PART-TWO***********************************
index.html after the task execution -
And if I understand Your words, that this code is designed to display index.jade in the browser? But in the browser when opening index.html displays only the code is written below. 

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var jade = require("jade/runtime");

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

buf.push("<!DOCTYPE html><html lang=\"en\"></html><head><meta charset=\"UTF-8\"><title>Test</title></head><body></body>");;return buf.join("");
};
},{"jade/runtime":2}],2:[function(require,module,exports){
(function (global){
!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jade=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
'use strict';

/**
 * Merge two attribute objects giving precedence
 * to values in object `b`. Classes are special-cased
 * allowing for arrays and merging/joining appropriately
 * resulting in a string.
 *
 * @param {Object} a
 * @param {Object} b
 * @return {Object} a
 * @api private
 */

exports.merge = function merge(a, b) {
  if (arguments.length === 1) {
    var attrs = a[0];
    for (var i = 1; i < a.length; i++) {
      attrs = merge(attrs, a[i]);
    }
    return attrs;
  }
  var ac = a['class'];
  var bc = b['class'];

  if (ac || bc) {
    ac = ac || [];
    bc = bc || [];
    if (!Array.isArray(ac)) ac = [ac];
    if (!Array.isArray(bc)) bc = [bc];
    a['class'] = ac.concat(bc).filter(nulls);
  }

  for (var key in b) {
    if (key != 'class') {
      a[key] = b[key];
    }
  }

  return a;
};

/**
 * Filter null `val`s.
 *
 * @param {*} val
 * @return {Boolean}
 * @api private
 */

function nulls(val) {
  return val != null && val !== '';
}

/**
 * join array as classes.
 *
 * @param {*} val
 * @return {String}
 */
exports.joinClasses = joinClasses;
function joinClasses(val) {
  return Array.isArray(val) ? val.map(joinClasses).filter(nulls).join(' ') : val;
}

/**
 * Render the given classes.
 *
 * @param {Array} classes
 * @param {Array.<Boolean>} escaped
 * @return {String}
 */
exports.cls = function cls(classes, escaped) {
  var buf = [];
  for (var i = 0; i < classes.length; i++) {
    if (escaped && escaped[i]) {
      buf.push(exports.escape(joinClasses([classes[i]])));
    } else {
      buf.push(joinClasses(classes[i]));
    }
  }
  var text = joinClasses(buf);
  if (text.length) {
    return ' class="' + text + '"';
  } else {
    return '';
  }
};

/**
 * Render the given attribute.
 *
 * @param {String} key
 * @param {String} val
 * @param {Boolean} escaped
 * @param {Boolean} terse
 * @return {String}
 */
exports.attr = function attr(key, val, escaped, terse) {
  if ('boolean' == typeof val || null == val) {
    if (val) {
      return ' ' + (terse ? key : key + '="' + key + '"');
    } else {
      return '';
    }
  } else if (0 == key.indexOf('data') && 'string' != typeof val) {
    return ' ' + key + "='" + JSON.stringify(val).replace(/'/g, '&apos;') + "'";
  } else if (escaped) {
    return ' ' + key + '="' + exports.escape(val) + '"';
  } else {
    return ' ' + key + '="' + val + '"';
  }
};

/**
 * Render the given attributes object.
 *
 * @param {Object} obj
 * @param {Object} escaped
 * @return {String}
 */
exports.attrs = function attrs(obj, terse){
  var buf = [];

  var keys = Object.keys(obj);

  if (keys.length) {
    for (var i = 0; i < keys.length; ++i) {
      var key = keys[i]
        , val = obj[key];

      if ('class' == key) {
        if (val = joinClasses(val)) {
          buf.push(' ' + key + '="' + val + '"');
        }
      } else {
        buf.push(exports.attr(key, val, false, terse));
      }
    }
  }

  return buf.join('');
};

/**
 * Escape the given string of `html`.
 *
 * @param {String} html
 * @return {String}
 * @api private
 */

exports.escape = function escape(html){
  var result = String(html)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
  if (result === '' + html) return html;
  else return result;
};

/**
 * Re-throw the given `err` in context to the
 * the jade in `filename` at the given `lineno`.
 *
 * @param {Error} err
 * @param {String} filename
 * @param {String} lineno
 * @api private
 */

exports.rethrow = function rethrow(err, filename, lineno, str){
  if (!(err instanceof Error)) throw err;
  if ((typeof window != 'undefined' || !filename) && !str) {
    err.message += ' on line ' + lineno;
    throw err;
  }
  try {
    str = str || _dereq_('fs').readFileSync(filename, 'utf8')
  } catch (ex) {
    rethrow(err, null, lineno)
  }
  var context = 3
    , lines = str.split('\n')
    , start = Math.max(lineno - context, 0)
    , end = Math.min(lines.length, lineno + context);

  // Error context
  var context = lines.slice(start, end).map(function(line, i){
    var curr = i + start + 1;
    return (curr == lineno ? '  > ' : '    ')
      + curr
      + '| '
      + line;
  }).join('\n');

  // Alter exception message
  err.path = filename;
  err.message = (filename || 'Jade') + ':' + lineno
    + '\n' + context + '\n\n' + err.message;
  throw err;
};

},{"fs":2}],2:[function(_dereq_,module,exports){

},{}]},{},[1])
(1)
});
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1])

1 answers

solution1
 0 ACCPTED  2014-07-28 13:16:07

Looks like this is an issue with gulp-browserify and jadeify.

You can wait until those are resolved upstream, or just use browserify directly: 

// ... require other gulp related modules
var browserify = require('browserify');
// allow browserify to play nicely with gulp's streams
// more info: https://www.npmjs.org/package/vinyl-source-stream
var source = require('vinyl-source-stream');

gulp.task('jade', function() {
  // unfortunately, you do miss out on
  // globbing with this method
  browserify(['./app/src/index.jade'])
  .transform(require('jadeify'))
  .bundle()
  .pipe(source('index.html'))
  .pipe(gulp.dest('app/dev'));
});

Another note note, you have an error in index.jade : 

head
    meta(charset="UTF-8")
        title Test

Should be: 

head
    meta(charset="UTF-8")
    title Test

( meta should not have any child elements.)

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Gulp-browserify Error require not defined with gulp-browserify Whats the difference between Gulp-Browserify and Browserify? gulp-browserify output different than it should be How to use both 'gulp-babel' and 'gulp-browserify' what is the difference between gulp-browserify and uglify.minify gulp-browserify How can i generate the file in the same directory Gulp jade compilation Using gulp-browserify for my React.js modules I'm getting 'require is not defined' in the browser How do I watch multiple files with gulp-browserify but process only one?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM