Gulp config not working

I'm trying to run Gulp, to minimize CSS, JS, and move all the static things ( template

, font

, img

) in the folder build

.

My project structure:

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

      

My 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']);

      

When I run gulp

or gulp watch

, I get this error:

/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)

      

How can I fix this?

+3


source to share


1 answer


gulp-ruby-sass

changed the API recently. As such, you cannot pipe something to a Sass task, but rather start from there. Very similar to browserify

. gulp-ruby-sass

creates a stream, however, to keep the rest of the pipe working fine:



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));
});

      

+6


source







All Articles