Gulp 配置不工作

Question

我正在尝试运行 Gulp 缩小 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));
});

Gulp 配置不工作

Gulp configuration not working

gulp

gulp-watch

gulp-sass

gulp-concat

gulp-uglify