nkoterba / material-design-iconsets

SVG Iconsets for Angular Material Design
Creative Commons Attribution 4.0 International
51 stars 9 forks source link

Individual files are not generated #4

Open sondreb opened 9 years ago

sondreb commented 9 years ago

I have tried to run the commands on the repo:

npm install npm run init npm run build

The result is an empty "material-design-icons" folder. There are no errors.

This is on a Windows computer.

Aren't the scripts suppose to create individual .svg files from all of the icon sets?

nkoterba commented 9 years ago

@sondreb

In short, here is what each of the above commands does:

npm install: installs the necessary npm/node modules in node_modules to concatenate and process google's SVG into the format expected by Material Design

npm run init: Sets up the git folder for the Google Material Design Icons repo

npm run build: Pulls latest Google Material Design Icons repo from git and then runs the 'gulp processing' to build up the iconsets from the individual SVG icons from Google's repo.

As for: Aren't the scripts suppose to create individual .svg files from all of the icon sets?

it's actually the opposite. This project takes the individual 24x24 svg icons from Google's Material Design Icon repo: https://github.com/google/material-design-icons and creates ~12 iconsets which the Material Design IconProvider uses.

Once you run the above 3 commands, the material-design-icons folder should NOT be empty. It should look like this: image

If that's NOT the case, I'd say there's an issue with GIT on your system.

These are the commands I'm running to populate the material-design-icons folder:

mkdir material-design-icons;
cd material-design-icons;
git init;
git config core.sparsecheckout true;
echo "*/svg/production/*_24px.svg" >> .git/info/sparse-checkout; 
git remote add -f origin git://github.com/google/material-design-icons.git;
git pull origin master;

See if you can just run those commands (from any folder on your system) and if the 'material-design-icons' folder is still empty. If it is, then it's something system specific affecting you.

Also, although you can always build the icons using the npm commands above, I include the "latest" iconsets in the iconsets folder. So you can just use the iconsets in there if you're still having build issues. I periodically check the Google Material Design icons github site to see if there are any updates and if so, I update the result sets in this github repo under the iconsets folder.

Let me know if you continue to have issues/questions...otherwise I'll close this issue.

sincraianul commented 8 years ago

Doesn't work for me either.

nkoterba commented 8 years ago

@sincraianul

Have you tried running this set of commands standalone:

mkdir material-design-icons;
cd material-design-icons;
git init;
git config core.sparsecheckout true;
echo "*/svg/production/*_24px.svg" >> .git/info/sparse-checkout; 
git remote add -f origin git://github.com/google/material-design-icons.git;
git pull origin master;
sincraianul commented 8 years ago

w4t

I get this while running git pull origin master. Forgot to mention I'm on Windows.

nkoterba commented 8 years ago

@sincraianul I believe this is an issue due to running git in powershell/cmd on Windows.

Please see: http://stackoverflow.com/a/23289007

Try running the above in a Git Bash prompt and see if that helps. Or manually edit the sparse-checkout file to make sure:

Important: Be sure to use a git bash prompt and use an editor supporting unix line-ending conventions and save as ANSI when editing the sparse-checkout file

Let me know how that goes...

sincraianul commented 8 years ago

sparse-checkout file looks just fine, I checked.

sincraianul commented 8 years ago

Yep, same output. I think I'll be ditching Windows for *nix soon.

sum1 plz buy me a mac ☆⌒(>。≪)

nkoterba commented 8 years ago

@sincraianul

So you've verified that sparse-checkout file is a UNICODE file and has a BOM marker and UNIX style line endings?

Just visually inspecting it, especially on Windows, will not show you these things.

You're using a Git Bash prompt?

sincraianul commented 8 years ago

Tried Git Bash, same issue. I fiddled around with the file. It had two of these: http://apps.timwhitlock.info/unicode/inspect?s=%EF%BF%BD at the beginning of it. Deleted them and now it works fine.

sincraianul commented 8 years ago

The init tasks (or at least the shell commands inside exec()) do not run successfully. No repo is initiated inside material-design-icons/google and material-design-icons/community.

I'll investigate this problem.

nkoterba commented 8 years ago

If you can run the above code block, you don't need to do npm run init. You can skip that step.

All npm run init does is to setup the sparse git repos for both Google and the Community Git repos.

Instead, create a directory "google" and inside that run:

git init;
git config core.sparsecheckout true;
echo "*/svg/production/*_24px.svg" >> .git/info/sparse-checkout; 
git remote add -f origin git://github.com/google/material-design-icons.git;

Then, make a directory called "community" and inside that run:

git init;
git config core.sparsecheckout true;
echo "*/svg/production/*_24px.svg" >> .git/info/sparse-checkout; 
git remote add -f origin git://github.com/Templarian/MaterialDesign.git;

Make sure both sparse-checkout files don't have that funny character.

Then you should be able to run npm run build.

I'm not sure why, but clearly on Windows, running the npm exec command is using perhaps the normal Windows "CMD" shell instead of Git Bash and/or creating bad "sparse-checkout" files so then when you try to run "npm run build" it fails.

By running the above manually, you should be able to get to the point where you can successfully run npm run build. fingers crossed

sincraianul commented 8 years ago

Yeah, exec will run it in CMD natively. Will try that and get back. :)

sincraianul commented 8 years ago

Yup, it worked. Thank you!

The problem lies in those pesky exec() functions. You cannot separate multiple commands with a semicolon in Windows.

sincraianul commented 8 years ago

Managed to fix the gulp task with execSync, which was introduced in node 0.12. Check here https://strongloop.com/strongblog/whats-new-in-node-js-v0-12-execsync-a-synchronous-api-for-child-processes/

It's a temporary fix, but it works. :)

nkoterba commented 8 years ago

Hmm...so I will look to see if I can switch it to execSync on the master to make sure everything works.

I'm assuming you just changed it from exec to execSync?

sincraianul commented 8 years ago

Yeah, and separated the commands like such:

execSync('git init');
execSync('git config core.sparsecheckout true');
execSync('echo "*/svg/production/*_24px.svg" >> .git/info/sparse-checkout');
execSync('git remote add -f origin ' + ORIGIN_GOOGLE);
sincraianul commented 8 years ago

Also, you could just replace the command separator from ; to &&, which is the native Windows one, which is news to me.