gulp-jade报错unexpected token:punc {{}}}与ng-annotate报错error parse

原创 2015年11月07日 12:51:29

最近在重新部署基于gulp的开发环境的时候遇到了标题中提到的2个错误,在接下来的内容中我会分享基于我的特征环境而产生的解决方案。


##gulp-jade 报错uglify-js   unexpected token:punc {{}}}

这个错误表明在运行 gulp-jade插件的时候 uglify-js 组件解析文本内容失败。首先我们需要明确gulp-jade的功能是将jade文件转化成html文件,所以我们需要从jade文件本身开始排查,但是通过一些初步检查(删除部分编译不通过的jade文件,这里吐槽一点gulp的机制,在它报错的时候没有报出正在解析哪个文件,错误堆栈中只存放着gulp-jade组件内部抛出异常逻辑的位置),我可以确定应该是文件中的某种编码格式导致编译不通过。

但是存在一个悖论,在我之前部署的环境中存在着一套基本相同的代码,并且代码运行正常。而我项目组的另外两个人的环境上能够直接编译通过。

于是我开始确认我与他们环境的不同的地方,最后确认是nodejs版本的问题,我之前nodejs的版本是4.10,而他们的版本是0.12,更换完nodejs版本之后 项目便能正常运行了,根本原因还没有找到,从解决方案逆推得知应该是新项目原有的代码配置或者编码格式与高版本的nodejs不兼容。


总结:对项目可能原来依赖于低版本的nodejs的项目,针对这个问题的一个可行的解决方案:

- 卸载nodejs

- 清空npm缓存(c:/user/{{username}}/AppData/Roaming/npm*    与 c:/user/{{username}}/AppData/local/Temp/npm*)

        - 重新安装低版本的nodejs (npm 会附带安装  可以通过  node -v    与 npm -v 检查文件的内容)

        - 重启电脑(这个点是在我这发现的一个问题,windows删除的部分东西 还存在于缓冲区中,还可能对系统有影响,通过重启可以清空缓存)

        - 重新搭建环境


##ng-annotate报错error parse

ng-annotate是给angularjs 模块自动注入依赖项的,如果我们运行 uglify等工具精简代码的话,我们原来的缩写风格可能不被系统识别

下面是官网上的描述

ng-annotate adds and removes AngularJS dependency injection annotations. It is non-intrusive so your source code stays exactly the same otherwise. No lost comments or moved lines. Annotations are useful because with them you're able to minify your source code using your favorite JS minifier.

You write your code without annotations, like this:

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});
You then run ng-annotate as a build-step to produce this intermediary, annotated, result (later sent to the minifier):

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {
}]);
当然官网上也对这个问题(

ng-annotate couldn't process source due to parse error >> Unexpected token

)做了描述,说原因存在于代码中,

虽然在报错的时候会给出出错的行数,但是一般我们都会通过gulp的 concat命令拼接js文件,然后统一引入页面来实现解除依赖,gulp的配置文件大概如下

// JS APP
gulp.task('scripts:app', function() {
    // Minify and copy all JavaScript (except vendor scripts)
    return gulp.src(source.scripts.app)
        .pipe( useSourceMaps ? sourcemaps.init() : gutil.noop())
        .pipe(concat(build.scripts.app.main))
        .pipe(ngAnnotate())
        .on("error", handleError)
        .pipe( isProduction ? uglify({preserveComments:'some'}) : gutil.noop() )
        .on("error", handleError)
        .pipe( useSourceMaps ? sourcemaps.write() : gutil.noop() )
        .pipe(gulp.dest(build.scripts.app.dir));
});


于是这就带来了问题,如果我们源文件很多,我们会出现类似 44599 这样的行号,由于中间文件我们看不到,所以我们也无法定位出错的源文件。

参考链接 https://www.npmjs.com/package/ng-annotate

所以我采用了下面的方法来定位出错的位置

  - 注释掉ngAnnotate 与之后的处理过程 直接输出到目标文件来获取拼接后的文件  通过报错的行号来定位错误

- (不推荐在定位bug的时候后台运行js文件,报错的指针会跑偏,建议开启gulp定位错位,关掉gulp,调整完错误,然后开启gulp验证错误解决的过程)

最后在朋友的提示下 我们可以在拼接文件之前进行一遍文件验证,这样能提前发现错误,配置文件参考下面的配置

$ = require('gulp-load-plugins')()
gulp.task('scripts:app', function() {
    log('Building scripts..');
    // Minify and copy all JavaScript (except vendor scripts)
    return gulp.src(source.scripts)
        .pipe($.jsvalidate())
        .on('error', handleError)
        .pipe( $.if( useSourceMaps, $.sourcemaps.init() ))
        .pipe($.concat( 'app.js' ))
        .pipe($.ngAnnotate())
        .on('error', handleError)
        .pipe( $.if(isProduction, $.uglify({preserveComments:'some'}) ))
        .on('error', handleError)
        .pipe( $.if( useSourceMaps, $.sourcemaps.write() ))
        .pipe(gulp.dest(build.scripts));
});


以上就是我这篇文件分享的内容

vue 打包出错——Unexpected token: punc (})

vue 打包出错——Unexpected token: punc (}) 在对vue进行打包的时候,出现了这样的错误: Unexpected token: punc (}) ...
  • wild46cat
  • wild46cat
  • 2017年09月18日 22:43
  • 1585

parsererror:SyntaxError: Unexpected token { {stack: (...), message: "Unexpected token {"}

一般ajax出现这个错误都是JSON格式不对,我这个比较奇葩.  能肯定格式没错,去看了下后台代码居然out.print了两次.....  注释掉一行就好了. 手速快也是罪啊... ...
  • u010811257
  • u010811257
  • 2014年12月31日 15:21
  • 1897

vue+element-ui打包时候出现 UglifyJs Unexpected token: punc 问题

昨天在打包vue+element-ui打包项目时出现了ERROR in static/js/vendor.1c5ad0ffe5abfcdf0af6.js from UglifyJs Unexpecte...
  • hayre
  • hayre
  • 2017年08月16日 10:51
  • 4965

Qt+Boost编译出现Parse error at "BOOST_JOIN"

最近在研究PCL,发现这个点云库是个很不错的东西。里面需要经常浏览*.pcd(点云数据集)文件,遂打算自己用Qt写个小程序方便自己读取,后来便遇到了这个Parse error at "BOOST_JO...
  • hcj116
  • hcj116
  • 2013年05月16日 10:02
  • 3324

flume+ Elasticsearch +kibana环境搭建及讲解

1、软件介绍 1.1、flume 1.1.1、flume介绍 1)flume概念 1、flume是一个分布式的日志收集系统,具有高可靠、高可用、事务管理、失败重启等功能。数据处理速度快,完全可以用于生...
  • pincharensheng
  • pincharensheng
  • 2016年07月28日 10:45
  • 1017

iview 按需加载报错 ERROR in js/backstage.js from UglifyJs Unexpected token name «i», expected punc «;»

解决方法: //webpack.config.js { test: /iview.src.*?js$/, loader: 'babel-loader' }
  • hanxue_tyc
  • hanxue_tyc
  • 2018年01月03日 11:29
  • 540

ERROR in static/js/vendor.xxxx.js from UglifyJs Unexpected token: punc webpack打包出错解决

今天在将一个vue-cli项目使用webpack打包时,一直出现这个错, 很明显,问题出在了nav.js中的es6的语法没有编译通过,在网上查了各种资料,都是推荐安装babel-es2015之类的包...
  • zhangyangblog
  • zhangyangblog
  • 2017年09月14日 19:11
  • 1587

ORA_ERROR大全

常见错误: -60 ORA00060: deadlock detected while waiting for resource 一般错误:   - 1 ORA00001: unique constr...
  • haiross
  • haiross
  • 2013年10月17日 16:29
  • 92806

新浪微博客户端开发之授权登录+获取微博列表

新浪微博客户端开发之授权登录+获取微博列表 闲篇: 最近实在是乱得不行,至于怎么乱我也不知该怎么说,那么久没发博客就证明了这点,一般如果小巫有做详尽的计划,并把时间投入到上面的话,我是可以...
  • wwj_748
  • wwj_748
  • 2013年10月09日 10:02
  • 22049

【Grunt】Uglification failed.丑化失败(其实是打包失败),Grunt打包错误,

报错信息: SyntaxError:Unexpected token:punc(.) Uglifying source….. Uglification failed. Use –force t...
  • River_Continent
  • River_Continent
  • 2017年07月25日 23:48
  • 405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:gulp-jade报错unexpected token:punc {{}}}与ng-annotate报错error parse
举报原因:
原因补充:

(最多只允许输入30个字)