angularjs - 构建 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 年历史，很明显存在导致此问题的版本问题。

我尝试过使用 Node 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'));
 });