I think image minification and fonts gulp tasks should be gone

I think image minification and font tasks bring more trouble than they solve.

Reasons:

1. Take too long to install
In my 20Mb home connection this is the difference taking away these dependencies and running npm install:

  • gulp-flatten
  • gulp-imagemin

2. They break windows filesystem

These dependencies make paths too long for windows, when you want to delete node_modules folder them you get in trouble.

  • TIP to delete the folder rename it to “delete” and use this command:
mkdir DIR_TEMP
robocopy DIR_TEMP delete /s /mir
rmdir DIR_TEMP    
rmdir delete /S /Q

3. Gulp really helps with CSS and javascript

The purpose of Gulp is helping you make things better and faster, and it does an excellent job with css and javascript.

But I don’t want it to help me with images. The best tool for the job is photoshop

4. In my opinion, images don’t really have development version and production version

In that case, development version would be “Adobe Illustrator” version or “Photoshop” version, and production would be “transparent PNG 8 bit 128 colours interlaced 88% dither”

5. It’s not intuitive to know how to address an image from CSS

To create a background image where should I point the CSS?
to dist/images or assets/images?

I think the following code should work, but I’m not sure:

h3{background:transparent url(“…/…/img/bgTransparent.png”) repeat scroll 0 0;}

6. Talking about fonts tasks

When you integrate some font to your website you do it one time and that’s it, you don’t really need Gulp to help you anymore. Gulp is busy with the thousand changes you’ll make to CSS and Javascript.

Example:
To integrate Open Sans just copy this to header.php:

link href=‘http://fonts.googleapis.com/css?family=Open+Sans’ rel=‘stylesheet’ type=‘text/css’

These are my suggestions to keep this amazing theme slim, fast and efficient, what do you think?

1 Like

I agree with some of those steps

I use the combination of https://tinypng.com wp plugin + aws S3/cloudfront plugin for images.

They are uploaded to the ACF fields so a user can always change/swap them, even backgrounds.

It’s also been quite a few sites ago since i added any img to the assets folder.

For css i just upload the img to the Media archive and use that link for css bg’s etc.

Seemed to work well but i am open to new ways :smile:

While the image dependencies are a little large, 1.5 minutes isn’t really all that much to handle lossless image compression…

Photoshop doesn’t have any settings to compress .png files, and those can get pretty large if you need any kind of transparency in your image.

That being said, it isn’t that hard to remove gulp-imagemin and remove the images task. Sage is a starter theme, edit it as you wish, make it your own.

And by the way, gulp is a task runner, it can do anything you ask it to :wink:

1 Like

What is your images workflow?

I put my non-compressed images in assets/images and let gulp compress them. Thats the intended functionality.

And in regards to your question about how to link images, since the CSS file is in dist/styles, you only need to go one directory up.

Friends don’t let friends use windows.

10 Likes

1 - The initial npm install will take longer, yes, but then you have one of the most important optimizations:

2 - This is a NPM issue and they’re working on it

3 - No. Gulp can do whatever you want it to do. It is a task runner. Photoshop is also definitely not the best tool for this job.

4 - This is a bit weird, yes. I’ve been copying the optimized images from dist/ back to src/.

5 - No one should ever be referencing assets that aren’t from the dist/ folder… your CSS loaded on the site is from dist/. All you need to do in your CSS is use '../images/example.jpg'

6 - Your example of using Google Fonts is only one use case. It’s a lot better to be serving fonts directly if you can to avoid external requests.

I’m not sure why you think gulp is only supposed to be used for CSS and JS.

2 Likes

Ok, is see there’s a workflow pattern that I don’t know yet.
Like the use of dist folder.
Do you have some readings about it?

Everything from assets get’s compiled and placed in to dist, that’s about it.

Ok. Lets not make this into a Windows vs. OS X discussion : ). lol. I think a good chunk of the people on this board are Windows users. We are bad, bad, bad.

4 Likes

I kid – team has been working hard at making things work well on windows!

chriscarr only makes those comments because he’s still on Windows ME

3 Likes

In Mexico the mac pro price is ridiculous, so I bought a core i7, a motherboard and a ssd disc and assembled my baby monster. Don’t tell him he’s ugly. He’s dumb but strong

But seriously, NPM install is very slow on Windows, so I definitely feel you. It actually takes me maybe 10 minutes. Also, for inexplicable reasons it fails, and then I do it again and it works. Not sure why, but it does (I make sure stuff is updated). Grunt was also definitely faster for me than Gulp.

I’ve come to understand it and live with it. I’ve gotten used to it being a Windows thing.

1 Like

It sounds like the real issue is how your server tools interact with your development environment. Have you considered setting up a Unix based server for your tools (web server, dependency managers, task runners, et al), that you can connect to your Windows based environment to? Alternatively there are a plethora of hosted IDEs with virtual machines, some of which offer free limited resource accounts (Koding and Cloud9 come to mind). Compare performance at no monetary cost, with little experience required!

Most of the issues you present would diminish or be removed all together, and depending on your setup could see better performance across the board. And best of all, you’ll be exposed to a wonderful world of control, community, stability and efficiency!

Also some people run VMs on their windowz boxes with ubuntu or something like that. Could be something to look into.

Hackintosh here, ftw. Mac quality for PC prices.

I’ll try to hackintosh :wink:

thanks, I’m learning a lot with all your responses, I’ll take a look

Just tried Koding with an install of Sage. Installs seemed to go well and indeed, Gulp is much faster. I hadn’t tried these Cloud IDEs before. I’ve been looking for ways to build themes on my ipad or at least work it into my flow. This may be it.