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 に答える