I'm new to the Gulp system and I'm trying to get my AngularJS application up and running. Using Yeoman, I got a standard set of gulp tasks, but one of them is failing with an error message. I've narrowed it down to a specific line, but I don't know enough about this system to know what is failing or why (other than the name of the missing file, of course).
The gulp file that's failing is as follows:
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()));
}
As you can see, I've commented out all but the offending line. That line, when called as part of the build process produces the following error message:
[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
Obviously, it's looking for system.js in a temporary copy of the jspm packages, but why? And why is it not finding it? Should the file be there? I don't know what the gulp script is trying to do, so I couldn't hazard a guess as to why it's not working.
I know this is probably not enough information for a comprehensive answer, but I'm hoping there's enough here for you to at least point me in the right direction.
Thanks!
Update 1/3/2017
I've kinda-sorta figured out what useref is supposed to do. My index.html file is
<!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>
What I think is supposed to happen is that it's supposed to replace the block:
<!-- 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 -->
with
<script src="tmp/index.js"></script>
Does this sound correct?
I've actually found the solution and it was not at all obvious. One of the problems with Gulp, I've learned, is that by breaking everything down into little proprietary pieces, it's hard to see the big picture. That means that I needed to do some deep diving to discover what was wrong.
What was wrong was occurring prior to the useref stage. It was occurring when the pipeline was doing a
<index.html>.pipe(replace(<pattern-describing-the-existing-javascript-includes>, '<script src="index.js">').I don't recall the exact regular expression that came with the Yeoman seed project, but it was prejudiced regarding how lines should be terminated. The regex was something along the lines of:
it took me a lot of debugging to trace it to this point but I noticed that the regex was working in regexpal but when I did the actual replace, nothing was replaced.
On a hunch, I tried changing the regex to:
and that fixed the problem! (or at least this particular problem; I encountered subsequent ones.)
Man, this stuff was not obvious at all. I basically had to pepper all my gulp script with
console.info,console.warn, andconsole.errorcalls to trace my way through to the offending piece of code.Anyway, I hope that this answer helps if someone else gets stuck on this same crazy issue! :)