Gulp配置不起作用

Question

我正在尝试运行墨西哥，以缩小CSS，JS并将所有静态物质（template，font，img）移动到build文件夹中。

我的项目目录结构：

- project
|- gulpfile.js
|- package.json
|- src
||- font
||- img
||- js
||- sass
||- template
|- build
||- css
||- font
||- img
||- js
||- template

我的gulpfile.js：

var PATH = {
    SRC: {
        SASS: 'src/sass/',
        JS: 'src/js/',
        TEMPLATE: 'src/template/',
    },
    DEST: {
        CSS: 'build/css/',
        JS: 'build/js/',
        TEMPLATE: 'build/template/',
    }
};

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sass = require('gulp-ruby-sass'),
    uglify = require('gulp-uglify');

gulp.task('compress', function() {
    return gulp.src(PATH.SRC.JS + '*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest(PATH.DEST.JS))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(PATH.DEST.JS));
});
gulp.task('styles', function() {
    return gulp.src(PATH.SRC.SASS + '*.scss')
        .pipe(sass(PATH.SRC.SASS, { style: 'expanded' }))
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
            cascade: true
        }))
        .pipe(concat('all.css'))
        .pipe(gulp.dest(PATH.DEST.CSS))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifyCss())
        .pipe(gulp.dest(PATH.DEST.CSS));
});

gulp.task('watch', function() {
    gulp.watch(PATH.SRC.SASS + '*.scss', ['styles']);
    gulp.watch(PATH.SRC.JS + '*.js', ['compress']);
});
gulp.task('default', ['watch', 'styles', 'compress']);

当我运行gulp或gulp watch时，我会得到此错误：

/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623
    var written = dest.write(chunk);
                       ^
TypeError: undefined is not a function
    at write (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at DestroyableTransform.emit (events.js:104:17)
    at emitReadable_ (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
    at DestroyableTransform.Readable.push (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
    at DestroyableTransform.Transform.push (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
    at afterTransform (/project/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:101:12)

我该如何修复？

Answer 1

gulp-ruby-sass最近更改了其API。因此，您不能将某些内容驱动到SASS任务，而是需要从它开始。就像browserify一样。但是，gulp-ruby-sass会创建一个流，因此其余的管道应正常工作：

gulp.task('styles', function() {
    return sass(PATH.SRC.SASS, { style: 'expanded' })
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
            cascade: true
        }))
        .pipe(concat('all.css'))
        .pipe(gulp.dest(PATH.DEST.CSS))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifyCss())
        .pipe(gulp.dest(PATH.DEST.CSS));
});