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?
source to share
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));
});
source to share