在html中编译Jade期间发生gulp-browserify错误 [英] gulp-browserify error during compilation of jade in html
问题描述
很抱歉在写作中可能出现的错误-使用Google翻译.
我使用 gulp-browserify
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'))
})
错误-
[14:20:53]水管工发现未处理的错误:插件'gulp-browserify'中的SyntaxError /home/acopalipsis/proj/app/src/fake_723954d4.js:1
doctype html
^ ParseError:意外识别
[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 ******** ****************************
制成-
***********************************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'))
})
但是生成的html由224个js代码组成...为什么?
如果您想显示此代码，请告诉我，我会显示！
*********************************** ADDED-PART-TWO *********** ********************************
任务执行后的index.html-
如果我理解您的话，那么该代码旨在在浏览器中显示index.jade吗?但是在浏览器中，打开index.html时，仅显示下面的代码.
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, ''') + "'";
} 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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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])
推荐答案
像这样的问题，并带有吞咽-browserify和jadeify.
Looks like this is an issue with gulp-browserify and jadeify.
您可以等待这些问题在上游解决，或者直接使用browserify:
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'));
});
另一个便笺，您在index.jade中有一个错误:
Another note note, you have an error in index.jade:
head
meta(charset="UTF-8")
title Test
应该是:
head
meta(charset="UTF-8")
title Test
(meta不应包含任何子元素.)
(meta should not have any child elements.)
这篇关于在html中编译Jade期间发生gulp-browserify错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
