【问题标题】:gulp-browserify error during compilation of jade in html在 html 中编译玉时 gulp-browserify 错误
【发布时间】:2014-07-28 12:03:00
【问题描述】:

对于写作中可能出现的错误,我们深表歉意 - 请使用 Google 翻译器。
我用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'))
})

错误 -

[14:20:53] 管道工发现未处理的错误:插件“gulp-browserify”中的 SyntaxError /home/acopalipsis/proj/app/src/fake_723954d4.js:1
文档类型 html
^ ParseError: 意外识别

index.jade -

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

为什么会出错?如何解决?

****************************************添加******** ******************************
制作 -

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

但是生成的html包含224个js代码...为什么?
如果您想显示此代码,请告诉我,我会显示!
**************************** *******添加的第二部分*******************************************
任务执行后的 index.html -
如果我理解你的话,那么这段代码是为了在浏览器中显示 index.jade 吗?但是在浏览器中打开 index.html 时只显示下面的代码。

(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])

【问题讨论】:

    标签: javascript pug gulp


    【解决方案1】:

    看起来这是一个带有 gulp-browserify 和 jamify 的 issue

    您可以等到上游解决这些问题,或者直接使用 browserify:

    // ... 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'));
    });
    

    另外注意注意,index.jade有错误:

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

    应该是:

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

    meta 不应有任何子元素。)

    【讨论】:

    • 谢谢!如果您帮助解决了我在问题的延续中描述的问题,我们会很高兴。
    • @oei 很乐意为您提供帮助,请添加有关您看到的错误的更多信息。根据错误的类型,最好打开一个新问题。请注意,您应该取回一个 javascript 文件,而不是 html 文件。 jadeify 只允许您在浏览器中使用翡翠模板,它不会将翡翠文件编译为html。如果你只想编译jade文件,使用gulp-jade
    • 起初我想创建一个新主题,但后来我意识到即使正确调用它也不能,它会关闭。这将在这里继续。再次感谢!
    • @NickTomlin 因此,如果我没有使用 globbing 是对的,我们需要为我们想要包含的每个 .jade 文件添加 browserify(['./app/src/index.jade']).pipe(source('index.html'))? :)
    • @JamieHutber 您需要为每个文件添加一个 browserify 条目,您传递给源的文件名并不重要(它实际上只是乙烯基源流的占位符 - 您甚至可以离开它完全出来)。解决此问题的一种解决方案是使用外部 globbing 库采用类似 ./app/src/*.jade 的路径并将其传递给 browserify。示例here.
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多