Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use streamed files instead of src option #10

Open
mrmartineau opened this issue Apr 8, 2015 · 10 comments
Open

Use streamed files instead of src option #10

mrmartineau opened this issue Apr 8, 2015 · 10 comments

Comments

@mrmartineau
Copy link

Is it possible to use streamed files instead of src defined in the options? I see in your index.js that you have done so but it seems that I cannot when using it in my gulpfile.. I get this error:

Error: src not defined; please specify your source (src: './img/icons/*.svg').

I would like to run imagemin and some other tasks before this task, then run iconify on those files without saving them temporarily. Something like this:

gulp.task('icons', function () {
    return gulp.src(CONFIG.IMG.SRCDIR +'/icons/source/**/*.{svg,png,jpg,gif}')
        .pipe($.changed(CONFIG.IMG.DISTDIR +'/icons'))
        .pipe($.imagemin({
            progressive: true,
            svgoPlugins: [
                { removeViewBox: false },
                { removeUselessStrokeAndFill: false }
            ],
            use: [
                mozjpeg(),
                pngquant(),
                gifsicle()
            ]
        }))
        .pipe($.iconify({
            // pngOutput: './img/icons/png',
            cssOutput:  CONFIG.CSS.DISTDIR,
            svgoOptions: { enabled: false }
        }))
        .pipe(gulp.dest(CONFIG.IMG.DISTDIR +'/icons'));
});

Let me know what can be done..

Cheers

@gavro
Copy link
Owner

gavro commented Apr 8, 2015

This could get hairy. Initially I wanted to use the stream/pipe flow, but I decided against it because you can end up screwing up a whole lot of stuff.

For example:

  • I'd have to check all the streamed files and only use SVGs
  • Are we allowed to overwrite any already existing PNGs with out own generated (fallback) PNGs(currently the plugin is doing that)?
  • More importantly: The thing is that this plugin outputs multiple items. Not just 1 processed src file. Not just 1 PNG dest-file. It also has to generate 3 combined CSS files based on all src files. It doesn't fit as a plugin between to other stream-plugins.

If you have any ideas, I'd love to hear them... I kinda ran out of ideas to enable this (in an expected and predictable way).

@mrmartineau
Copy link
Author

To be honest, I would prefer putting all files (SVG, png, jpg etc) in the src directory and then have iconify do it's thing on that, just like Grunticon does. As I'm coming from a grunt world, I know how to do things in a certain way so I must have to change my workflow to suit this..

Also, have you seen https://github.com/filamentgroup/grunticon-lib? It looks like Filament Group are making Grunticon into a standalone lib (even though it relies on Grunt under the hood) so maybe we'll be able to use that soon.

@DonGissel
Copy link

One of the perks of Gulp is the streaming pipeline. If that isn't used, you can't wrap gulp-iconify in gulp-plumber for error handling, for example. This is potentially a problem.

@gavro
Copy link
Owner

gavro commented Apr 23, 2015

@DonGissel: As I stated before, I do agree (and love) the streaming pipe but the thing is: What should the plugin pipe? We've got the raw/processed SVGs, generated PNGs, generated SASS and/or CSS files. I can't pipe it all and if we choose 1 thing I'm absolutely sure somebody would the need 'the other thing'.

I guess something like this should work: https://github.com/twolfson/gulp.spritesmith/tree/2.5.0#continuing-the-pipeline; it just seems kinda complicated (to implement but for usage).

@DonGissel
Copy link

@gavro: for all I care, the plugin could just pass through whatever has been piped into it, like a list of source files or whatever, so it would essentially be "invisible" to the pipeline. The important thing in this case would be that you could use a tool like gulp-plumber to keep your stream alive in case of compiling errors. :-)

@gavro
Copy link
Owner

gavro commented Apr 23, 2015

@DonGissel okay I get your drift :)
@mrmartineau Will figure something out, eventually!

@weshardee
Copy link

Well, if this isn't going to use piping than it really isn't a gulp plugin. So one option would be to remove the "gulp-" prefix from the package name to avoid confusion.

@gavro
Copy link
Owner

gavro commented Aug 7, 2015

@weshardee It'll get in there soon enough; been swamped with other things lately. But the thing is, as @DonGissel says, piping is one of the perks you get with gulp. But it isn't the only one. We've been using this plugin as a separate gulp task in a series of tasks.

Hope to get piping in the plugin soon, sorry, but why all the 'hate' here; as far as I can see it's not that the 'official' gulp version of grunticon is doing a better job at it (https://github.com/filamentgroup/gulpicon) :)

@weshardee
Copy link

I meant no 'hate' whatsoever. I think this is a fine little bit of code.

A similar naming situation happened with gulp-run-sequence. They dropped the "gulp-" prefix because the functionality provided wasn't gulp specific. I think your package is similar at the moment. It can stand alone without gulp.

@julpat
Copy link

julpat commented Jul 7, 2016

gulp-iconify is generating .scss files, ok? In my index.scss I want to have something like
@import "_generated/svg_images/icons.svg"; but I cant because is impossible make running sequence of "iconify -> sass compilation".
Or am I missing something?
Now Iam using workaround with creating empty files for success sass compilation and then async the iconify is done :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants