Portfolio sites with Automated sprites and Gulp Watch Please Help Bug Fix


Hello I have been stuck trying to fix this for days now please help…

See the header object that says clear view escapes please tell me why in the hell I cannot install this other svg to replace it?? hmmm I would upload it here yet it doesnt allow svg for some reason… ummmm…

, AND it works together with all the icon sprites in one file… this part works programmatically it seems… yet the thing simply wont render in the block for some reason… Note now for some reason I cant get the Clear View Escapes to show up on local host:3000 I have difference checked my files up against the master files no luck, please help… let me know if I can send you the local files…


It’s really hard to tell what the problem is. Could you take a step back, explain what it is you’re doing, what you’ve tried, and what you expect to see? You’ll also need to share your code.


Ok the travel site link you see is a site template I built from udemy. It includes these languages: HTML, CSS, NodeJS, and I guess regular Javascript. It makes use of 12 svg sprite icons which are “smushed” for lack of a better term together into one.
The site programmatically makes files inserts code, squishes svgs onto one file, makes a nother css file to control it, then I believe it deletes the temp file and css it created and implements it with all with a post css processor. If the svg icons fail it should also have a png copy it created as a fall back image it seems. The purpose of all this automation as you mightknow is to make it so the user downloads only one image file instead of a large number of them… This primarily reduces dramatically server load time. Thats my general understanding of the site functionality…
#1 What I am doing is building it into a portfolio site because of its really awesome functionality and use of git hub this site seems practical to display advanced coding skills.
#2 Everything is going great now with the progress I know how the cross device functionality mixins are working so I was able to implement different images and practice resizing and all that for different devices. ALL IMAGES seem fine EXCEPT icons …
#3 The object which says “Clear view escapes” which has awesome scrolling features is the main icon problem in question… it is the cause for the other icons breaking some how. It is working correctly on the travel site link yet on my local machine where the portfolio exists I now cant even render the Clear View Escapes?? Update it seems the problem is the svg file can someone tell me how to replicate the original with different text so its the same… i am on inkscape for linux…I think I need to ungroup each letter for some reason as well as change the text color…not sure you can see the svg links below.
#4 I made a copy of the clearview escapes opened in on inkscape (Linux) so as to be sure the pallet dimensions are equal with zero back ground… and then replaced the text with sans-serif to say “Mr. Henderson Portfolio” I visually sized the text within the range of the other text… the 2 variables I observed were… #1 the actual svg code seems super complicated… on the original. It seems this is due to the nature of the way they separated all objects or each letter as an individual object. Graphics are my weakness… it seems some how even though the properties seem the same on both graphics in terms of size it simply wont render. I try to debug in chrome and I can see nothing.
#5 The problem could exist somehow in one of the perhaps 7 files in question. Either gulp files or css positioning perhaps caching issue … I will start by sending my localhost:3000 code and then I can send the travel site template which seems exactly the same… hell I can even give you the udemy pass to see the videos if you want.

LOCAL SOURCE FILES>>> https://drive.google.com/open?id=0B26XZRkZIdlVR2JZNGRtblNqYXc
let me know if you need the master files for the template… THANK YOU FOR YOUR HELP!!! here is one svg file here>> https://drive.google.com/open?id=0B26XZRkZIdlVSjFnOUNNMi1SaEk AND THIS OTHER SVG HERE https://drive.google.com/open?id=0B26XZRkZIdlVeHFsSDZBUFMtTzA <— this doesnt show text not sure why is it white im lost now…it should say clear view escapes…


What command are you using to start the development environment?


hmmm if you mean what am I coding in I use atom I was using brackets then it broke because of having that many files…
if you mean how do I start the localhost:3000 I open my terminal CTRL Alt + T and navigate to the site directory then type: gulp watch, this fires up the local host and I also do all other gulp commands and npm package installs there…its pretty sweet actually… I can get you the Udemy vids access if you would like… as well as the original working template files are there.


So, the heart of the issue is that your SVG file isn’t in the right place:

The reason? I’m not sure, to tell you the truth. I’ve tried debugging this for about an hour and am met with problem after problem. There is some issue with the tasks in /gulp/tasks/sprites.js, so you’ll want to go through each task individually and make sure it’s doing what you expect it to. That’s what I was doing, until I started getting weird bugs related to module depedencies, and I just don’t have time to fiddle with those. It does seem to me that the first task in sprites.js, createSprite, isn’t putting files where copySpriteGraphic is expecting. Double check that path to see if it makes sense to you. I’m also not seeing a .png file or the sprites folder under /app/assets/images, so either copySpriteGraphic or one of its subordinate tasks has a problem.

Sorry I can’t do more. I’m sure the tutorial had you install some stuff globally, and there’s no way for me to match your environment without doing the same.


ahh yes I did install one or two things yet I think that is all on the Json file right?

I will scour the sprites.js file because I noticed it buggy as well, for instance the order was changed during the gulp icon command which accounts for all the dependencies you speak of… I noticed on the video his tasks load at different times then mine… and orders. This seems odd yet I guessed that it had to do with the local machine… let me check the file again.
I will also upload the template as well so that you can see it working… let me check again tomorrow and see if somehow I can solve it… Im just going to get it back with the clear view escapes and from there perhaps you might help me with the svg or someone help me do that… Thank you for your efforts today!


The package.json manifest will only track modules that are installed locally, so anything you have globally installed will not show up. This has been a major problem in Node development and there are some solutions, but nothing that I consider easy to use.

Report back if you have more questions or a solution. It will be great to have the answer to this riddle on record!


The thing I’m seeing is that your sprite generator isn’t called from the watch task. You have to call gulp icons to make your sprite.

When I added your new logo to the icons folder and ran gulp icons the sprite was generated. After that, run your gulp watch task and it should link up. If it doesn’t, open your sprites.css file and hit save to trigger a rebuild.

I also see some issues where you’ve used a leading slash in your html file. This wants to point to the root of your server. Removing that leading slash from script, style, and other tags should allow the sprite images to appear in their proper spots.


Thats interesting… so I understand we have devdependencies… in JSON sometimes we do --save and sometimes --save-dev… then we have a .gitignore… My understanding of .gitignore is we ignore files that will already exist for another developer… so we dont have file conflicts when they download or clone the repo I guess is the terminology… hmmm
I recall the problem you are talking about when I was dealing with Python and global dependencies I got super stuck and needed a linux genius to even load the environment… once the environment was loaded I started taking off… Yet node seems way more cool in terms of web styling… when I found out they built chrome like this it was like discovering fire for the first time… you mean to tell me the entire internet is built like this… why didnt I know that for the last 20 years and how in the hell did I do so much armed with such little knowledge… its really getting more and more awesome… now if I can get through this simple bug it will be a huge accomplishment… almost done with FCC front end… I plan on doing full stack with custom csstyling… ao when ever a client approaches me they will see awesome styling… The problem with customers is they have no clue about anything… its a hard sell… YET if they see bells and whistles that are sparkling with unicorns floating around and perhaps a little elf in the corner … They think your the best thing since sliced bread… is it absurd why yes it is… is knowing what I know more powerful then css styling YES ABSOLUTELY… Does it matter if no one buys because they dont have one clue about marketing, ad copy and all of the meat and potatoes that make business… Yet if you can style a site then your really making the “Steak sizzle in the Pan” if I was a coding genius with my marketing skills its an absolute no brainer… Yet im no longer going to sell people on whats true… is a waste of time… I will sell the sizzling steak, the ice to eskimos yet the words “SEO” and other things ". Telling people what actually makes business online is a way to complicated endeavor… selling value and all that… Just make it sound big and forget the technical details that actually are at work… its not worth it and you lose the deal… Further Im not going to talk all scientific with them its better to sound dumb and laugh at dumb things this really sells… yes you might understand this yet you are not normal believe me… people do not understand these things…Better to say something like, We can build you a kick ass network, with the most cutting edge technology on earth… and then talking dollars and cents… like did you know we single handedly controlled the Southern California Garage door market from our living room with far worse coding skills that we have today… Then showing them the hundreds of thousands helps too… its counter intuitive i know yet its just how it is…

With node so far I do not recall global dependencies… hmm I guess npm is global, Ill check into that… have a great day!!


Hi dave I have tried everything you told me and nothing… I followed gulp icons multiple times by gulp watch… yet nothing.

#2 I built a task to reload the styles.css in templates folder because the css file wasnt causing gulp to reload…
#3 I cannot find any difference in my code or the original… Is there any way you can send me the changes to index html so I can see how you got it to render and is it working correctly like this?
#4 I went through the gulp task list and it does seem to be following the process Im really stumped on this…
UPDATE: its almost lunch time I have found a conflict… I keep rebuilding the same error thats why…
have a look at the dashes in this clear-view-escapes … on the temp/sprites file its pulling the correct css yet notice different randomly generated cache buster on svg and png… then notice modules/_sprite.css with this code that it dumps into the file
width: 153.47px;
height: 66px;
background-position: 0 0;
__________________FINNALLY IT RESOLVED
I changed the temp file which we are told not to change then I ran gulp icons… it somehow magically erased the underscore and did not decide to rewrite it… I have zero clue why if all files are the same how it can automatically decide to do things I did not tell it… any ideas what happened… was it some how ignoring the rebuild? Or somehow rebuilding in the wrong order even though the order is exactly the same… this is baffling I have no clue how this is possible…lol
FInally I can style my Mr Henderson Portfolio svg correctly if you have any pointers let me know like software for linux thats good or vids to watch that will help… Thank You


I have no idea either. Gulp is a little funny like that sometimes. For me, after adding your image, I ran the sprite builder, then ran the watch script. While that was running, I opened the _sprite.css file and immediately saved it… which triggered a rebuild of your final css file.

Glad you figured it out.


Hey Dave I was able to do all custom sprites and resize them for the different icons… it was actually quite fast…

Was actually able to change all the sprite files now on working on the automated email system… I cannot believe that I am going to code a web form like this…

It seems after a few minutes of study that I can spin up a node server with Get POST response… It seems then I just style a nice simple form in the html with all the high converting form practices that one would use to get more sign ups… I love that they have already done multivariate testing on all of the form parameters for years… Here us a really nice resource for you folks I found: https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/ <— check out the design crib sheet by scrolling to the bottom… it tells us which elements to use and how to style them for best forms so one does not inadvertently create annoying features and increase their bounce rate… Have a good one bro!! :slight_smile: