我正在尝试使用gulp-ruby-sass
在我的配置中运行sass
任务,这是我得到的错误(错误后面是我的配置和代码):
[04:57:11] TypeError: undefined is not a function
at DestroyableTransform.Readable.pipe [as _pipe] (E:Doangular-jspm-todono
de_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-stream
lib_stream_readable.js:516:8)
at DestroyableTransform.pipe2 (E:Doangular-jspm-todonode_modulesgulp-plu
mberindex.js:70:20)
at Gulp.<anonymous> (E:Doangular-jspm-todogulptaskssass.js:15:8)
at module.exports (E:Doangular-jspm-todonode_modulesgulpnode_modulesor
chestratorlibrunTask.js:34:7)
at Gulp.Orchestrator._runTask (E:Doangular-jspm-todonode_modulesgulpnod
e_modulesorchestratorindex.js:273:3)
at Gulp.Orchestrator._runStep (E:Doangular-jspm-todonode_modulesgulpnod
e_modulesorchestratorindex.js:214:10)
at E:Doangular-jspm-todonode_modulesgulpnode_modulesorchestratorindex
.js:279:18
at finish (E:Doangular-jspm-todonode_modulesgulpnode_modulesorchestrat
orlibrunTask.js:21:8)
at module.exports (E:Doangular-jspm-todonode_modulesgulpnode_modulesor
chestratorlibrunTask.js:60:3)
at Gulp.Orchestrator._runTask (E:Doangular-jspm-todonode_modulesgulpnod
e_modulesorchestratorindex.js:273:3)
[04:57:11] gulp-ruby-sass stderr: OptionParser::InvalidOption: invalid option: -
-sourcemap-path=app/css
Use --trace for backtrace.
E:Doangular-jspm-todonode_modulesgulp-autoprefixernode_modulesthrough2nod
e_modulesreadable-streamlib_stream_readable.js:523
dest.end();
^
TypeError: undefined is not a function
at DestroyableTransform.onend (E:Doangular-jspm-todonode_modulesgulp-aut
oprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_readabl
e.js:523:10)
at DestroyableTransform.g (events.js:199:16)
at DestroyableTransform.emit (events.js:129:20)
at E:Doangular-jspm-todonode_modulesgulp-autoprefixernode_modulesthrou
gh2node_modulesreadable-streamlib_stream_readable.js:965:16
at process._tickCallback (node.js:355:11)
我对 sass 任务的配置如下所示:
sass: {
src: app + '/scss/**/*.{sass,scss}',
dest: app + '/css',
options: {
noCache: true,
compass: false,
sourcemap: true,
sourcemapPath: app+'/css'
}
},
autoprefixer: {
browsers: [
'last 2 versions',
'safari 5',
'ie 8',
'ie 9',
'opera 12.1',
'ios 6',
'android 4'
],
cascade: true
},
scsslint: {
src: [
app + '/scss/**/*.{sass,scss}',
]
}
sass
任务在这里:
gulp.task('sass',function(){
return sass(config.sass.src,config.sass.options)
.pipe(plumber({errorHandler:notify.onError('<%= error.message %>')}))
.pipe(sourcemaps.init())
.pipe(autoprefixer(config.autoprefixer))
.pipe(filter)
.pipe(sourcemaps.write('.',{includeContent:false}))
.pipe(filter.restore())
.pipe(gulp.dest(config.sass.dest));
});
这是我scsslint
任务:
var gulp = require('gulp');
var scsslint = require('gulp-scss-lint');
var config = require('../config').scsslint;
gulp.task('scsslint',function(){
return gulp.src(config.src)
.pipe(scsslint(config.options))
});
我在browser-sync
和watch
任务中执行它们:
gulp.task('serve',['jshint','scsslint','sass'],function(){
browserSync(config);
});
gulp.task('watch',['serve'],function(){ gulp.watch(config.jshint,['jshint']); gulp.watch(config.sass,['scsslint','sass']);});
从堆栈跟踪中可以看到 2 个问题:
1 - 我想你在做pipe(filter)
之前忘记了这个var filter = gulpFilter(['*.css', '!*.map']);
2 - 如果您在此处阅读 gulp-ruby-sass 的文档,则没有 sourcemapPath 选项:https://github.com/sindresorhus/gulp-ruby-sass
您正在为源使用 glob。来自大口大口的红宝石自述文件:
gulp-ruby-sass 尚不支持 globs,仅支持单个文件或目录。就像萨斯一样。
要解决此问题,请将您的配置更改为:
src: app + '/scss'