TypeError：無法讀取未定義的gulpjs的屬性'管道'

Question

我試圖設置gulp-spritesmith並獲取上述錯誤，每次我在圖標文件夾中粘貼一些東西。也嘗試通過sass.Node版本2.14來編譯它。 12如果有更容易使用的其他'精靈'插件，請告知。

'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', '> 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 & 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']); 

我的package.json文件看起來像這樣

{ 
    "name": "", 
    "version": "1.0.0", 
    "description": "Caxton Digital Front End Gulp Build", 
    "main": "gulpfile.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && 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": ">=0.10.0" 
    }, 
    "private": true, 
    "license": "WTFPL" 
} 

Answer 1

見https://github.com/twolfson/gulp.spritesmith#breaking-changes-in-600

，根據該鏈接的文檔，在spritesmith版本6，如果你的圖像流水線需要緩存的內容，而比你需要使用乙烯樹脂的流，例如

var buffer = require('vinyl-buffer'); 
spriteData.img.pipe(buffer()).pipe(imagemin());