Question

我试图设置gulp-spritesmith并且每次我在图标文件夹中粘贴一些东西时都会得到上面的错误。还试图让它通过sass.Node版本2.14.12在mac上编译。如果有任何其他'精灵'插件更容易使用请告知。

    '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());

TypeError：无法读取未定义的gulpjs的属性'pipe'

1 个答案: