在构建AngularJS模板时gulp注释错误

时间:2017-05-02 14:46:19

标签: angularjs node.js gulp

我是gulp的新手,而节点也不是我的后院,所以当我构建StartAngular模板时,我需要一些帮助来找出问题所在。

我已经下载了模板,并按照自述文件中的说明进行构建(我在使用Sierra和brew的Mac上)我遇到以下运行gulp build的错误:

(node:13596) DeprecationWarning: process.EventEmitter is deprecated. Use require('events') instead.
[15:28:55] Starting 'clean'...
[15:28:56] Finished 'clean' after 20 ms
[15:28:56] Starting 'build'...
[15:28:56] Starting 'jshint'...
[15:28:56] Starting 'styles'...
[15:28:56] Starting 'images'...
[15:28:56] Starting 'fonts'...
[15:28:56] Starting 'extras'...
[15:28:56] Finished 'build' after 822 ms
[15:28:57] Finished 'jshint' after 1.15 s
[15:28:57] Finished 'images' after 407 ms
[15:28:58] Finished 'styles' after 1.82 s
[15:28:58] Starting 'html'...
[15:28:58] Finished 'extras' after 1.89 s

events.js:160
    throw er; // Unhandled 'error' event
    ^
Error: styles/main.css: error: couldn't process source due to parse 
error
Unexpected character '@' (1:0)

到目前为止已经尝试了

我已经打开了一个问题here,我发现模板代码已有两年了,很明显有版本问题会导致此问题。

我尝试过节点4,6和7,并且还将bower和npm依赖项强制转换为{package,bower}.json文件中的最低版本,但没有成功。

我也调查了.tmp,我看到styles/main.css,看起来很好,确实从@开始,应该没问题。

我还编辑app/index.html一点一点地注释掉了失败的部分,因为在这个错误之后我得到了其他几个与之类似的问题:

<!-- build:css(.tmp) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="../bower_components/angular-snap/angular-snap.css" />
<!-- endbower -->

评论所有这些当然不能解决问题,但它只是表明.js.css所有这些类似的指令都失败了。

我也调查gulpfile.js试图了解到底发生了什么,但到目前为止没什么启发。

谷歌似乎也在阳光下提出了各种各样的建议,我尝试了一些但没有成功,也不清楚哪个部分真的失败了。

我想让这个模板工作,并制作一个公关来解决问题,我感谢你们在这里提供的任何帮助:)谢谢!

1 个答案:

答案 0 :(得分:1)

问题是破坏了正则表达式,补丁看起来像这样:

diff --git a/gulpfile.js b/gulpfile.js
index 3fbadef..d19cd08 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -36,12 +36,12 @@ gulp.task('html', ['styles'], function() {

   return gulp.src('app/**/*.html')
     .pipe(assets)
-    .pipe($.if('*.js', $.ngAnnotate()))
-    .pipe($.if('*.js', $.uglify()))
-    .pipe($.if('*.css', cssChannel()))
+    .pipe($.if('.*\.js', $.ngAnnotate()))
+    .pipe($.if('.*\.js', $.uglify()))
+    .pipe($.if('.*\.css', cssChannel()))
     .pipe(assets.restore())
     .pipe($.useref())
-    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
+    .pipe($.if('.*\.html', $.htmlmin({collapseWhitespace: true})))
     .pipe(gulp.dest('dist'));
 });