构建AngularJS模板时gulp注释错误

Question

我是 gulp 的新手，node 也不是我的后院，所以当我构建模板表单 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，我看到模板代码已经有 2 年历史了，很明显是版本问题导致了这个问题。

我已尝试使用节点 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，试图了解发生了什么，但到目前为止没有任何启发性。

谷歌似乎也给出了各种建议，我尝试了一些但没有成功，也不清楚哪个部分真正失败了。

我想让这个模板正常工作，并提出一个 PR 来解决问题，如果你在这里提供任何帮助，我将不胜感激 :) 谢谢！

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