filamentgroup/gulpicon

A gulp task wrapper for grunticon-lib.

⚠️ This project is archived and the repository is no longer maintained.

Gulpicon

A gulp task wrapper for grunticon-lib.

Install

To install to your project and save the dependency in package.json:

npm install -s gulpicon

Usage

var glob = require("glob");
var gulp = require("gulp");
var gulpicon = require("gulpicon/tasks/gulpicon");

// grab the config, tack on the output destination
var config = require("./example/config.js");
config.dest = "example/output";

// grab the file paths
var files = glob.sync("example/svg/*.svg");

// set up the gulp task
gulp.task("icons", gulpicon(files, config));

Sample test

# Checkout the project
git clone [email protected]:filamentgroup/gulpicon.git
cd gulpicon

# Run the sample
npm install
npx gulp icons

Output will now be in example/output/.

TODO

1. Move to plugin/operation on stream of files, requires alterations to grunticon-lib.

gulpicon's Issues

bug with custom css template

Hi there,
in love with grunticon, but first time with gulpicon, and here is the problem.

the custom css template is not considered with this configuration, and i don't understand why:

config.js

module.exports = {
  ...
  template: path.join( __dirname, "default-css.hbs" ),
  ...
};

default-css.hbs

{{#each customselectors}}{{this}},{{/each}}
{{prefix}}{{name}}:before {
    background-image: url('{{datauri}}');
}

the output is not my template, but the default one:

.prefix-name { /* miss the :before attr */
    background-image: url('datauri');
    background-repeat: no-repeat; /* this line is not in my template */
}

any idea?

thanks!

node 4.0.0
gulp 3.9.0
gulpicon 0.1.2

Switch to plugin

We can make this a plugin once grunticon-lib switches to streams:

filamentgroup/grunticon-lib#4

The second argument passed into the Grunticon constructor must be a string

Hello,

I successfully installed gulp icon and it was working ok. I've recently gone back to run the task and it now errors.

Error: The second argument passed into the Grunticon constructor must be a string, a path to an output directory.

My setup is
var glob = require("glob");
var gulpicon = require("gulpicon/tasks/gulpicon");

// grab the config, tack on the output destination
var config = require("./config.js");
config.dest = "./assets/images/";

// grab the file paths
var files = glob.sync("./assets/images/svg/*.svg");

gulp.task("icons", gulpicon(files, config));

Can you help?

Many thanks, Stephen

Custom function (with destination param) wrapping gulpicon() task works as called twice (from another task)

I'm trying to generate icons into different destination folders, therefore I wrapped gulpicon task into a custom function with a dst parameter.

The problem is that even if I run solely gulp icons:wp, the function generateIcons(dest) seems to be called twice and the icons always are generated into to the last destination (as if I'd run gulp icons:html)

Why? Where I am doing wrong? And how can I solve it properly? (Maybe it's not a gulpicon-related issue but gulp itself or just my code?)

var cfg = require('./config');

function generateIcons(dst) {
  gulpiconCfg = cfg.gulpicon;
  files = glob.sync(gulpiconCfg.icons);
  gulpiconCfg.dest = dst;
  gutil.log(dst);
  return gulpicon(files, gulpiconCfg);
}

gulp.task('icons:wp', generateIcons(cfg.dest.htmlWP+'/images/grunticon'));
gulp.task('icons:html', generateIcons(cfg.dest.html+'/images/grunticon'));

The console output:

~/WebDev/local/www/$ gulp icons:wp
[22:56:23] public/html-wp/images/grunticon
[22:56:23] public/html/images/grunticon
[22:56:23] Using gulpfile ~/WebDev/local/www/gulpfile.js
[22:56:23] Starting 'icons:wp'...
[22:56:23] Look, it's a gulpicon!
svg-to-png now spawning phantomjs...
(using path: /usr/lib/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs)

[22:56:27] Finished 'icons:wp' after 3.68 s

Thank you for any help!

macOS Sierra

Related to:

filamentgroup/grunticon-lib#26

install via npm

Hi all,

Is it possible to install this with 'npm install gulpicon'? Cause I get an error all the time:

npm install gulpicon --save-dev
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No license field.
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "gulpicon" "--save-dev"
npm ERR! node v0.12.4
npm ERR! npm v2.10.1

npm ERR! Cannot read property 'latest' of undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/raftheunis/Development/git/tch-frontend-titan/npm-debug.log

Can't compile in directories with spaces in the name

This is a child dependency causing the issue, but I'm adding it here so you're aware of it.

I'm unable to install gulpicon as my projects are within directories that contain spaces: imagemin/optipng-bin#45

task completion callback called too many times

I get an error trying to run gulpicon, task completion callback called too many times. Even running on a fresh clone of this repository.

What could be wrong?

EDIT: checking out the tag v0.1.1 gulp icons runs without any error

[olapersson@Olas-MBP:~/development/gulpicon on master]
% gulp icons
[16:13:38] Using gulpfile /Users/OlaDev/gulpicon/gulpfile.js
[16:13:38] Starting 'icons'...
[16:13:38] Look, it's a gulpicon!
svg-to-png now spawning phantomjs...
(using path: /Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/node_modules/phantomjs/lib/phantom/bin/phantomjs)

[16:13:45] Finished 'icons' after 6.89 s
[16:13:45] 'icons' errored after 6.9 s
[16:13:45] Error: task completion callback called too many times
    at finish (/Users/OlaDev/gulpicon/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:15:10)
    at cb (/Users/OlaDev/gulpicon/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at null.<anonymous> (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/lib/grunticon-lib.js:237:6)
    at lib$rsvp$$internal$$tryCatch (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:489:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:501:17)
    at lib$rsvp$$internal$$publish (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:472:11)
    at lib$rsvp$asap$$flush (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:1290:9)
    at process._tickCallback (node.js:355:11)
[16:13:45] 'icons' errored after 6.9 s
[16:13:45] Error: task completion callback called too many times
    at finish (/Users/OlaDev/gulpicon/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:15:10)
    at cb (/Users/OlaDev/gulpicon/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at null.<anonymous> (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/lib/grunticon-lib.js:245:5)
    at lib$rsvp$$internal$$tryCatch (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:489:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:501:17)
    at lib$rsvp$$internal$$publish (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:472:11)
    at lib$rsvp$asap$$flush (/Users/OlaDev/gulpicon/node_modules/grunticon-lib/node_modules/svg-to-png/lib/rsvp.js:1290:9)
    at process._tickCallback (node.js:355:11)

A way detect task end

Since the task at the moment does not return streams, is there a way to detect when it finished running?

The 'enhanceSVG: true' flag doesn't seem to generate correct grunticon.loader.js

I can run the Grunticon module with the enhanceSVG flag set to true, and the SVG is properly injected into the page. But when I run Gulpicon wtih the enhanceSVG flag set to true, it does NOT inject the SVG into the page.

However, if I copy the grunticon.loader.js from my project using Grunticon into my project using Gulpicon, it works perfectly. I ran a diff on the two files, and there is definitely a (very minor) difference between what is generated. Once the file is prettified, ~ lines 55 and 56 are different:

Grunticon:
var o = c(i(e.href)); "function" == typeof t ? (s(n, o), t()) : s(o), "function" == typeof n && n() }) }; e.embedIcons = s, e.getCSS = i, e.getIcons = c, e.ready = a, e.svgLoadedCallback = d, e.embedSVG = d }(grunticon, this) }();

Gulpicon:
var o = c(i(e.href)); "function" == typeof t ? (s(n, o), t()) : "function" == typeof n && (s(o), n()) }) }; e.embedIcons = s, e.getCSS = i, e.getIcons = c, e.ready = a, e.svgLoadedCallback = d, e.embedSVG = d }(grunticon, this) }();

Any thoughts?

Gulpicon won't generate any css files or preview.html

I am using default configuration, but I won't get any CSS files or preview.html. PNG files are generated just fine, also the script is included as it should be. AM I missing something?

dest.on is not a function

Im using
"gulp": "^3.9.1",
"glob": "7.1.1",
"gulpicon": "^1.2.1",

when I run my gulpfile I get this error message:

[19:23:55] Starting 'icons'...
[19:23:55] Look, it's a gulpicon!
[19:23:59] Finished 'assemble' after 3.89 s
svg-to-png now spawning phantomjs...
(using path: /Users/xx/yy/sites/projects/gulptest/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs)

/Users/xx/yy/sites/projects/gulptest/node_modules/svg-to-png/node_modules/readable-stream/lib/_stream_readable.js:516
dest.on('unpipe', onunpipe);
^

TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/Users/xx/yy/sites/projects/gulptest/node_modules/svg-to-png/node_modules/readable-stream/lib/_stream_readable.js:516:8)
at recurse (/Users/xx/yy/sites/projects/gulptest/node_modules/stream-combiner/index.js:27:16)
at module.exports (/Users/xx/yy/sites/projects/gulptest/node_modules/stream-combiner/index.js:31:3)
at Imagemin.run (/Users/xx/yy/sites/projects/gulptest/node_modules/svg-to-png/node_modules/imagemin/index.js:102:13)
at /Users/xx/yy/sites/projects/gulptest/node_modules/svg-to-png/lib/svg-to-png.js:92:16
at ChildProcess.exithandler (child_process.js:202:7)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:885:16)
at Socket. (internal/child_process.js:334:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:501:12)

does someone know how to solve this or what to do?