3

我正在尝试运行 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)

我怎样才能解决这个问题？

4

1 回答 1

6

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));
});
于 2015-05-13T12:01:42.343 回答