I'm a beginner front-end designer and developer (less than 6 months of experience), and I'm working on my first website for my portfolio.
I'm building the project on a Toshiba laptop running Windows 7, and I'm using Google's Web Starter Kit. I had to learn how to set up/install and get a basic understanding of a few new technologies in order to use WSK in my project - Ruby, Sass, Node.js, Git, and Gulp. But other than a very basic understanding of how to set them up, what they are and what they do and how to use them in my project at a very basic level, I'm very much so a novice with all of these new technologies.
I've ran into an issue every time I run the gulp command on my project in my git bash terminal, I get this error message:
$ gulp
[09:43:45] Using gulpfile c:\Users\Saint Warhead\Desktop\Current Projects\Lillie
Monster\Site-Lillie-Monster\gulpfile.js
[09:43:46] Starting 'clean'...
[09:43:46] Finished 'clean' after 41 ms
[09:43:46] Starting 'default'...
[09:43:46] Starting 'styles:components'...
[09:44:06] Starting 'styles:scss'...
[09:44:06] Starting 'styles:css'...
[09:44:11] gulp-size: 'styles:css' total 0 B
[09:44:11] Finished 'styles:css' after 4.52 s
[09:44:11] gulp-size: 'styles:scss' total 0 B
[09:44:11] Finished 'styles:scss' after 4.95 s
[09:44:22] gulp-size: 'styles:components' total 67.13 kB
[09:44:22] Finished 'styles:components' after 36 s
[09:44:22] Starting 'styles'...
[09:44:22] Finished 'styles' after 31 μs
[09:44:22] Starting 'jshint'...
[09:44:35] Starting 'html'...
[09:45:06] Starting 'images'...
[09:45:28] Starting 'fonts'...
[09:45:29] Starting 'copy'...
events.js:74
throw TypeError('Uncaught, unspecified "error" event.');
^
TypeError: Uncaught, unspecified "error" event.
at TypeError ()
at Transform.emit (events.js:74:15)
at Transform.onerror (c:\Users\Saint Warhead\Desktop\Current Projects\Lillie
Monster\Site-Lillie-Monster\node_modules\gulp\node_modules\vinyl-fs\node_module
s\through2\node_modules\readable-stream\lib_stream_readable.js:540:12)
at Transform.emit (events.js:95:17)
at Transform. (c:\Users\Saint Warhead\Desktop\Current Projects\Li
llie Monster\Site-Lillie-Monster\node_modules\gulp-useref\index.js:80:42)
at Array.forEach (native)
at Transform. (c:\Users\Saint Warhead\Desktop\Current Projects\Li
llie Monster\Site-Lillie-Monster\node_modules\gulp-useref\index.js:68:35)
at Array.forEach (native)
at Transform. (c:\Users\Saint Warhead\Desktop\Current Projects\Li
llie Monster\Site-Lillie-Monster\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
Honestly, I have no idea what this error means or what causes it, or how to fix it. And it hasn't really affected my ability to work on the project, at least not that I've noticed. I read through the comments on a few similar issue requests, but the resolutions offered just seem to be a little over my head in terms of understanding and I'm having a hard time figuring out what I need to actually do to fix it, or if it's even necessary if I do fix it? Any advice or assistance you could pass along to this starting out developer would be much appreciated! Thank you so much for your time!
Oh, and here's a link to the remote repository for my project on GitHub if you need to access the source files: https://github.com/solidsoulsolutions/Site-Lillie-Monster
The issue comes from your html task, and particularly from gulp-useref.
Debugging the error output, it appears that he can't find assets that are loaded with CDN. In the Google Web Starter Kit, only the icomoon and google fonts are concerned.
There was an issue (#37) about that on the gulp-useref repository but it was fixed since the 0.5.0 release by using the is-absolute-url plugin.
Problem is that (in my environment, and most likely in your also) the plugin can't say that the file:
/home/apercu/git/Site-Lillie-Monster/{.tmp,app}/http:/fonts.googleapis.com/css?family=Raleway:400
is an url, try to find it and fails, breaking gulp-useref.
Some simple things to get rid of it :
1) Add an error callback on the gulp-useref assets :
.pipe($.useref.assets({searchPath: '{.tmp,app}'})).on('error', function (err) {
console.log(err);
})
2) Remove all the CDN links and add the assets directly on your project.
I will not say what solution you should go for, even if I personally prefer to keep all the needed files of my project in my sources. (not use a CDN)
Last problem : you should replace the 140 line of your gulpfile from
.pipe($.useref.restore())
to
.pipe($.useref.assets().restore())