dumb question alert

[1stevengrant]

Does the svg sprite node module need to installed before this wrapper works?

I took the example config, changed the source directory to where my svgs are but there's no output, other than

%svg-common {
    background-repeat: no-repeat;
    background-image: url(svg/sprite.view.svg);
}

and 2 empty svg files.

Any ideas what I'm missing? Here's the gulpfile itself

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprite = require('css-sprite').stream;
var sass  = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var clean = require('gulp-clean');
var watch = require('gulp-watch');
var svgSprite = require('gulp-svg-sprite');
var plumber = require('gulp-plumber');
var path = require('path');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// SVG sprite
config                  = {
    shape               : {
        dimension       : {         // Set maximum dimensions
            maxWidth    : 32,
            maxHeight   : 32
        },
        spacing         : {         // Add padding
            padding     : 10
        },
        dest            : 'out/intermediate-svg'    // Keep the intermediate files
    },
    mode                : {
        view            : {         // Activate the «view» mode
            bust        : false,
            render      : {
                scss    : true      // Activate Sass output (with default options)
            }
        },
        symbol          : true      // Activate the «symbol» mode
    }
};

gulp.task('svgsprite', function(){
  gulp.src('src/lib/svgsprite*.svg', {cwd: 'assets'})
    .pipe(svgSprite(config))
    .pipe(gulp.dest('out'));
});

[jkphl]

Well, at a first glance this looks all quite correct. Is there a reason you didn't include plumber into the svgsprite task (as shown here)?

Dumb question back: You did include svg-sprite into your package.json and run npm install, right? This should reliably install all prerequisites ...

[1stevengrant]

Thanks. I didn't think to include plumber.

package.json

{
  "name": "craftvagrant",
  "version": "1.0.0",
  "description": "Welcome to Craft!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^1.9.1",
    "css-sprite": "^0.9.0",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^1.0.1",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.4.3",
    "gulp-if": "^1.2.5",
    "gulp-minify-css": "^0.3.11",
    "gulp-notify": "^2.0.0",
    "gulp-plumber": "^0.6.6",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^1.2.0",
    "gulp-svg-sprite": "^1.0.12",
    "gulp-uglify": "^1.1.0",
    "gulp-watch": "^4.1.0",
    "path": "^0.11.14",
    "svg-sprite": "^1.0.13",
    "vinyl": "^0.4.6"
  }
}

it was installed globally as well to see if that made any difference. Quite bizarre.

[jkphl]

So it works for you know? Glad to hear! :+1:

[1stevengrant]

no it doesn't :(

I meant bizarre that it's not working :)

There's no errors generated on running the task either

[17:32:51] Using gulpfile ~/Sites/tgc/aus/gulpfile.js
[17:32:51] Starting 'svgsprite'...
[17:32:51] Finished 'svgsprite' after 8.45 ms

[jkphl]

Could you please set config.log to "debug" and post the output?

[1stevengrant]

~/Sites/tgc/aus (master): gulp svgsprite
[17:59:14] Using gulpfile ~/Sites/tgc/aus/gulpfile.js
[17:59:14] Starting 'svgsprite'...
2015-00-29 17:59:14 - debug: Started logging
2015-00-29 17:59:14 - debug: Prepared general options
2015-00-29 17:59:14 - debug: Prepared `shape` options
2015-00-29 17:59:14 - debug: Prepared `svg` options
2015-00-29 17:59:14 - debug: Prepared `transform` options
2015-00-29 17:59:14 - debug: Prepared `mode` options
2015-00-29 17:59:14 - debug: Prepared `variables` options
2015-00-29 17:59:14 - verbose: Initialized spriter configuration
2015-00-29 17:59:14 - debug: Created processing queue instance
2015-00-29 17:59:14 - info: Created spriter instance
[17:59:14] Finished 'svgsprite' after 13 ms
2015-00-29 17:59:14 - info: Compiling 0 shapes ...
2015-00-29 17:59:14 - debug: Created layouter instance
2015-00-29 17:59:14 - info: Laying out «view» sprite («view» mode)
2015-00-29 17:59:14 - debug: Created «view» sprite instance («view» mode)
2015-00-29 17:59:14 - verbose: Created «view» SVG sprite file («view» mode)
2015-00-29 17:59:14 - verbose: Created «scss» stylesheet resource
2015-00-29 17:59:14 - info: Laying out «symbol» sprite («symbol» mode)
2015-00-29 17:59:14 - debug: Created «symbol» sprite instance («symbol» mode)
2015-00-29 17:59:14 - verbose: Created «symbol» SVG sprite file («symbol» mode)
2015-00-29 17:59:14 - verbose: Returning 0 intermediate SVG files
2015-00-29 17:59:14 - info: Finished «view» + «symbol» sprite compilation
2015-00-29 17:59:14 - info: Created 2 x SVG, 1 x SCSS
2015-00-29 17:59:14 - verbose: Created symbol/svg/sprite.symbol.svg: 89 Bytes
2015-00-29 17:59:14 - verbose: Created view/sprite.scss: 93 Bytes
2015-00-29 17:59:14 - verbose: Created view/svg/sprite.view.svg: 128 Bytes

appreciate the assistance

[jkphl]

Ok, that is bizzare! I must say that I'm not really experienced with Gulp, but I can't explain how the process can be "finished" and then there are still log messages coming. And it also says "Compiling 0 shapes" which is a sign that no shapes were registered.

Can you isolate the case by setting up a project that only consists of the svg-sprite task (without all that other dependencies listed above)?

[1stevengrant]

Simplified to it's own project and some SVGs at the root of the project

var gulp                = require('gulp'),
svgSprite               = require('gulp-svg-sprite'),

// More complex configuration example
config                  = {
    shape               : {
        dimension       : {         // Set maximum dimensions
            maxWidth    : 32,
            maxHeight   : 32
        },
        spacing         : {         // Add padding
            padding     : 10
        },
        dest            : 'out/intermediate-svg'    // Keep the intermediate files
    },
    mode                : {
        view            : {         // Activate the «view» mode
            bust        : false,
            render      : {
                scss    : true      // Activate Sass output (with default options)
            }
        },
        symbol          : true      // Activate the «symbol» mode
    }
};

gulp.task('sprite', function() {
  return gulp.src('**/*.svg', {cwd: 'assets'})
    .pipe(svgSprite(config))
    .pipe(gulp.dest('out'));
});

Same thing unfortunately :(

I don't need to do anything specifically with the SVGs do I?

[jkphl]

No, not really. What do you mean with

some SVGs at the root of the project

? When you use {cwd: 'assets'}, there has to be an assets folder which serves as root folder for the **/*.svg glob. Are you sure this folder exists (and the SVGs are inside that location)?

[1stevengrant]

so I just deleted the assets directory, recreated it, added my SVGs again and everything works (happy dance)

On 29 January 2015 at 21:13, Joschi Kuphal notifications@github.com wrote:

No, not really. What do you mean with

some SVGs at the root of the project

? When you use {cwd: 'assets'}, there has to be an assets folder which serves as root folder for the */.svg glob. Are you sure this folder exists (and the SVGs are inside that location)?

— Reply to this email directly or view it on GitHub https://github.com/jkphl/gulp-svg-sprite/issues/8#issuecomment-72105267.

My Website http://www.digitalevangelist.net | Follow me on Twitter http://twitter.com/stevieg_83 | Dribbble http://dribbble.com/stevieg_83

[jkphl]

?? Well, that was an easy solution in the end ... :D

[1stevengrant]

I love easy solutions ;)

On 29 January 2015 at 21:45, Joschi Kuphal notifications@github.com wrote:

?? Well, that was an easy solution in the end ... :D

— Reply to this email directly or view it on GitHub https://github.com/jkphl/gulp-svg-sprite/issues/8#issuecomment-72110627.

My Website http://www.digitalevangelist.net | Follow me on Twitter http://twitter.com/stevieg_83 | Dribbble http://dribbble.com/stevieg_83

[jkphl]

:+1: