title: TypeError: Cannot read property 'pipe' of undefined gulpjs
body: <p>Im trying to setup gulp-spritesmith and getting the above error every time i  paste something in the icons folder.Also trying to get it to compile through sass.Node version 2.14.12 on a mac.If there any other 'sprite' plugins that are easier to use please advise. </p>
  
  <pre><code>    'use strict';
  // Include gulp
  var gulp = require('gulp'); 
  
  // Include Our Plugins
  var jshint = require('gulp-jshint');
  var sass = require('gulp-sass');
  var autoprefixer = require('gulp-autoprefixer');
  var size = require('gulp-size');
  var concat = require('gulp-concat');
  var uglify = require('gulp-uglify');
  var spritesmith = require('gulp-spritesmith');
  var imagemin = require('gulp-imagemin');
  var cssmin = require('gulp-cssmin');
  var rename = require('gulp-rename');
  // var cssnano = require('gulp-cssnano');
  var sprity = require('sprity');
  var gulpif = require('gulp-if');
  
  
  var sources = {
      scss: 'scss/**/*.scss',
      images: 'img/**/*.{jpg|png|gif}',
      sprites: 'img/sprite-src/*.png',
      css: 'css/*.css'
  
  }
  /**
   * Compiles SASS into CSS.
   */
  gulp.task('scss', function () {
      return gulp.src([sources.scss])
          .pipe( sass({
              includePaths:['node_modules/bootstrap-sass/assets/stylesheets'],
              outputStyle: 'nested', // 'nested', 'compressed'
              sourceComments: 'normal', // 'none', 'normal', 'map'
              errLogToConsole: true, 
          }))
          .pipe( autoprefixer('last 4 versions', '&gt; 5%', 'ie 8') )
          .pipe( gulp.dest('css') )
          .pipe( size({title: 'styles:scss'}) );
  });
  
  // generate sprite.png and _sprite.scss 
  // gulp.task('sprites', function () {
  //   return sprity.src({
  //     name: 'sprites',
  //     cssPath: 'img/icons/*.png',
  //     src: 'img/icons/*.png}',
  //     style: 'css/sprite.css',
  //     processor: 'sass', // make sure you have installed sprity-sass 
  //   })
  //   .pipe(gulpif('*.png', gulp.dest('img/sprite-src/'), gulp.dest('css/sprites/')))
  // });
  
  
  /**
   * Create spritesheet
   * Combines multiple .png's images into a single .png image. Outputs a .scss file with
   * corresponding variables for each image in the spritesheet.
   */
  gulp.task('sprite', function () {
      var spriteData = gulp.src(sources.sprites)
          .pipe( spritesmith({
              cssName: '_sprite.scss',
              cssFormat: 'css', // use .scss to get sprite generator mixin
              imgName: 'sprite.png',
              imgPath: 'img/sprite.png', // the path our css will reference
              algorithm: 'binary-tree',
              padding: 1, // prevents pixel rounding issues when we use CSS transforms on sprites
              cssOpts: {
                  cssClass: function (item) {
                      return '.sprite-' + item.name;
                  }
              }
          }));
  
      // Optimize and output the generated spritesheet image
      spriteData.img.pipe( imagemin()).pipe( gulp.dest('img/') ).pipe( size({title: 'sprite'}) );
  
      // Output the generated .scss file
      spriteData.css.pipe( gulp.dest('scss/helper/') );  
  });
  
  
  // Css Minify
  gulp.task('minifycss', function () {
      gulp.src('css/main.css')
          .pipe(cssmin())
          .pipe(rename({suffix: '.min'}))
          .pipe(gulp.dest('css'));
  });
  
  // Lint Task
  gulp.task('lint', function() {
      return gulp.src('js/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'));
  });
  
  
  // Concatenate &amp; Minify JS
  gulp.task('scripts', function() {
      return gulp.src('js/*.js')
          .pipe(concat('jsConcat.js'))
          .pipe(gulp.dest('js'))
          .pipe(rename('jsConcat.min.js'))
          .pipe(uglify())
          .pipe(gulp.dest('js'));
  });
  
  // Watch Files For Changes
  gulp.task('watch', function() {
  
      gulp.watch(sources.scss, ['scss']); 
      gulp.watch('css/*.css', ['minifycss']);  
      // gulp.watch(sources.css, ['default']);
      gulp.watch('js/*.js', ['lint', 'scripts']);
      gulp.watch('img/icons/*.png', ['sprite']);  
  });
  
      // Default Task
      gulp.task('default', ['watch']);
  </code></pre>
  
  <p>My package.json file looks like this</p>
  
  <pre><code>{
    "name": "",
    "version": "1.0.0",
    "description": "Caxton Digital Front End Gulp Build",
    "main": "gulpfile.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "Munei Nengwenani",
    "dependencies": {
      "bootstrap-sass": "^3.3.6"
    },
    "devDependencies": {
      "gulp": "^3.9.1",
      "gulp-autoprefixer": "^3.1.0",
      "gulp-concat": "^2.6.0",
      "gulp-cssmin": "^0.1.7",
      "gulp-cssnano": "^2.1.0",
      "gulp-if": "^2.0.0",
      "gulp-imagemin": "^2.4.0",
      "gulp-jshint": "^2.0.0",
      "gulp-minify-css": "^1.2.3",
      "gulp-rename": "^1.2.2",
      "gulp-sass": "^2.2.0",
      "gulp-size": "^2.0.0",
      "gulp-uglify": "^1.5.2",
      "gulp-watch": "^4.3.5",
      "gulp.spritesmith": "^6.2.0",
      "jshint": "^2.9.1",
      "sprity": "^1.0.8",
      "sprity-sass": "^1.0.4"
    },
    "engines": {
      "node": "&gt;=0.10.0"
    },
    "private": true,
    "license": "WTFPL"
  }
  </code></pre>