gulp-iconify icon indicating copy to clipboard operation
gulp-iconify copied to clipboard

Use streamed files instead of src option

Open mrmartineau opened this issue 9 years ago • 10 comments

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

mrmartineau avatar Apr 08 '15 17:04 mrmartineau

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).

gavro avatar Apr 08 '15 21:04 gavro

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.

mrmartineau avatar Apr 09 '15 13:04 mrmartineau

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.

DonGissel avatar Apr 23 '15 07:04 DonGissel

@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).

gavro avatar Apr 23 '15 08:04 gavro

@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. :-)

DonGissel avatar Apr 23 '15 08:04 DonGissel

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

gavro avatar Apr 23 '15 08:04 gavro

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.

weshardee avatar Aug 07 '15 17:08 weshardee

@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) :)

gavro avatar Aug 07 '15 23:08 gavro

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.

weshardee avatar Aug 08 '15 00:08 weshardee

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 :(

julpat avatar Jul 07 '16 17:07 julpat