我正在关注Zoe Rooney的WordPress入门主题开发教程,但在命令行上运行“gulp styles”时遇到了这个特殊错误。
我的“gulpfile.js”如下:
//gulp plugins
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
//gulp tasks
gulp.task('styles', function(){
return gulp.src(['scss/*.scss',
'scss/**/*.scss'],
{base: 'scss/'} )
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(gulp.dest(''))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(gulp.dest('css'));
});
//gulp task images
var imgSrc = 'assets/images/originals/*';
var imgDest = 'assets/images';
gulp.task('images', function() {
return gulp.src(imgSrc, {base: 'assets/images/originals'})
.pipe(newer(imgDest))
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest(imgDest));
});
//default task
gulp.task('default', ['styles', 'images']);
// gulp watch
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err);
}
// Watch .scss files
gulp.watch('scss/*.scss', ['styles']);
gulp.watch('scss/**/*.scss', ['styles']);
gulp.watch('assets/images/originals/**', ['images']);
});
});
我收到的错误信息如下:
Jonathans-MacBook-Pro:starter-theme Brain$ gulp styles
[15:33:59] Using gulpfile ~/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/gulpfile.js
[15:33:59] Starting 'styles'...
[15:33:59] 'styles' errored after 6.95 ms
[15:33:59] TypeError: Arguments to path.join must be strings
at path.js:360:15
at Array.filter (native)
at Object.exports.join (path.js:358:36)
at module.exports (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/node_modules/gulp-ruby-sass/index.js:65:15)
at Gulp.imgSrc (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/gulpfile.js:19:15)
at module.exports (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/Brain/Dropbox/Sites/neatpolish/wp-content/themes/starter-theme/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
Jonathans-MacBook-Pro:starter-theme Brain$
答案 0 :(得分:0)
我使用相同的教程并让它发挥作用。
将其更改为:
gulp.task('styles', function() {
return sass('scss', { style: 'expanded' })
.pipe(gulp.dest('scss'))
.pipe(plumber())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(gulp.dest(''))
});