Question

我是Gulp系统的新手，我试图启动并运行我的AngularJS应用程序。使用Yeoman，我得到了一套标准的gulp任务，但其中一个失败并显示错误消息。我已经将它缩小到一个特定的行，但是我对这个系统知之甚少，不知道什么是失败的或为什么（当然除了丢失文件的名称之外）。

失败的gulp文件如下：

const gulp = require('gulp');
const filter = require('gulp-filter');
const useref = require('gulp-useref');
const lazypipe = require('lazypipe');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');
const uglify = require('gulp-uglify');
const cssnano = require('gulp-cssnano');
const htmlmin = require('gulp-htmlmin');
const sourcemaps = require('gulp-sourcemaps');
const uglifySaveLicense = require('uglify-save-license');
const ngAnnotate = require('gulp-ng-annotate');

const conf = require('../conf/gulp.conf');

gulp.task('build', build);

function build() {
  const htmlFilter = filter(conf.path.tmp('*.html'), {restore: true});
  const jsFilter = filter(conf.path.tmp('**/*.js'), {restore: true});
  const cssFilter = filter(conf.path.tmp('**/*.css'), {restore: true});

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    // .pipe(jsFilter)
    // .pipe(ngAnnotate())
    // .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    // .pipe(rev())
    // .pipe(jsFilter.restore)
    // .pipe(cssFilter)
    // .pipe(cssnano())
    // .pipe(rev())
    // .pipe(cssFilter.restore)
    // .pipe(revReplace())
    // .pipe(sourcemaps.write('maps'))
    // .pipe(htmlFilter)
    // .pipe(htmlmin())
    // .pipe(htmlFilter.restore)
    // .pipe(gulp.dest(conf.path.dist()));
}

正如你所看到的，我已经评论了除了违规行以外的所有内容。该行在作为构建过程的一部分调用时会产生以下错误消息：

[17:22:27] 'build' errored after 42 ms
[17:22:27] Error: Error: File not found with singular glob: C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\.tmp\jspm_packages\system.js
at DestroyableTransform.<anonymous> (C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\node_modules\gulp-useref\index.js:65:28)
at emitOne (events.js:101:20)
at DestroyableTransform.emit (events.js:188:7)
at emitOne (events.js:101:20)
at Through2.emit (events.js:188:7)
at OrderedStreams.<anonymous> (C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\node_modules\glob-stream\index.js:140:20)
at emitOne (events.js:96:13)
at OrderedStreams.emit (events.js:188:7)
at emitOne (events.js:96:13)
at DestroyableTransform.emit (events.js:188:7)
at Glob.<anonymous> (C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\node_modules\glob-stream\index.js:40:16)
at Glob.g (events.js:286:16)
at emitOne (events.js:96:13)
at Glob.emit (events.js:188:7)
at Glob._finish (C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\node_modules\glob-stream\node_modules\glob\glob.js:172:8)
at done (C:\Users\Jeffrey Getzin\Documents\GitHubVisualStudio\newclient\node_modules\glob-stream\node_modules\glob\glob.js:159:12)
[17:22:27] 'build' errored after 25 s
[17:22:27] 'default' errored after 25 s
[17:22:27] 'serve:dist' errored after 25 s

 Process finished with exit code 1

显然，它在jspm软件包的临时副本中寻找system.js，但是为什么？为什么它找不到它？文件应该在那里吗？我不知道gulp脚本试图做什么，所以我无法猜测为什么它不起作用。

我知道这可能不是一个全面答案的足够信息，但我希望你在这里能够至少指出我正确的方向。

谢谢！

更新1/3/2017

我有点想知道useref应该做什么。我的index.html文件是

<!doctype html>
<html>
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>FountainJS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

    <!-- build:css(.tmp) index.css -->
    <link rel="stylesheet" href="index.css"></link>
    <!-- endbuild -->
  </head>

  <body class="front" ng-app="app">
    <div id="main">
      <ui-view></ui-view>
      <page-footer></page-footer>
    </div>
  </body>

  <!-- build:js(.tmp) index.js -->
  <script src="jspm_packages/system.js"></script>
  <script src="jspm.browser.js"></script>
  <script src="jspm.config.js"></script>

  <script>
    System.import('src/index.ts');
  </script>
  <!-- endbuild -->
</html>

我认为假设发生的事情是它应该替换该块：

  <!-- build:js(.tmp) index.js -->
  <script src="jspm_packages/system.js"></script>
  <script src="jspm.browser.js"></script>
  <script src="jspm.config.js"></script>

  <script>
    System.import('src/index.ts');
  </script>
  <!-- endbuild -->

与

  <script src="tmp/index.js"></script>

这听起来不错吗？

Answer 1

我实际上已经找到了解决方案，但这一点并不明显。我了解到，Gulp的一个问题是，通过将所有内容分解成小的专有部分，很难看出全局。这意味着我需要做一些深度潜水才能发现错误。

之前在useref阶段出现了什么问题。当管道正在执行<index.html>.pipe(replace(<pattern-describing-the-existing-javascript-includes>, '<script src="index.js">')时，就会发生这种情况。

我不记得Yeoman种子项目附带的确切正则表达式，但它对如何终止行是有偏见的。正则表达式是：

/line1stuff\nline2stuff/

它花了我很多调试来追踪到这一点，但我注意到正则表达式正在使用regexpal，但是当我进行实际替换时，没有任何内容被替换。

在预感中，我尝试将正则表达式更改为：

/line1stuff[\n\r]+line2stuff/

并解决了这个问题！（或至少这个特定的问题;我遇到了后续问题。）

男人，这个东西根本不明显。我基本上不得不通过console.info，console.warn和console.error来调查我所有的gulp脚本，以便追踪到令人讨厌的代码段。

无论如何，我希望如果其他人陷入同样疯狂的问题，这个答案会有所帮助！ :)

找不到带有单个glob的文件作为临时文件

1 个答案: