我实际上正在尝试建立一个gulp计划来做网络相关的东西,比如编译sass,minify css,uglify javascript等等。但是我真的遇到麻烦了。
以下是我的代码示例:
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
所以我在这里使用指南针因为我只有* .sass文件而没有.scss所以gulp-sass对我不起作用。因此,我在问是否有人能给我一个为什么这个任务不起作用的暗示。这是我的控制台返回的内容:
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
我知道我没有使用任何config.rb,但有两件事: 1)我没有找到这样的文件的例子 2)gulp-compass doc给出了没有这样一个文件的例子,所以我认为它是可选的
提前致谢。
答案 0 :(得分:5)
感谢SteveLacy,我可以设法解决这个问题。
如果您只有.sass文件,而且没有.scss,则需要使用gulp-ruby-sass而不是gulp-compass或gulp-sass。以下是我的工作代码示例:
var sass = require('gulp-ruby-sass');
gulp.task('compile-sass', function() {
gulp.src(path/to/your/sass/folder/main.sass")
.pipe(sass())
.pipe(gulp.dest('path/to/your/css/folder));
});
答案 1 :(得分:2)
最基本和最简单的方法是:
var sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
gulp.src('sass/*.scss')
.pipe(sass({
noCache : true,
style : "compact"
}))
.pipe(gulp.dest('css'));
});
答案 2 :(得分:2)
gulp-sass使用的最新版本的node-sass支持sass和scss语法。
https://github.com/sass/node-sass/releases
或此时的最新版本
https://github.com/sass/node-sass/releases/tag/v0.9.3
node-sass正在使用libsasss
https://github.com/sass/libsass/releases
查看他们的2.0发行说明。
答案 3 :(得分:0)
我知道这可能不是这个答案的正确位置,但对于有gulp-ruby-sass错误的人来说,谷歌并没有多少。
对于收到错误的任何人&#34; source
与任何文件都不匹配。&#34;请务必确保您在gulp.src()中放置的路径中至少包含1个sass(或scss)文件。
在我的情况下,我有3条路径完成任务,只有1条路径完全为空。通过向该路径添加空白文件(_fake.scss),错误得到修复。
希望这有助于某人!
答案 4 :(得分:0)
新版本的node-sass(因此也就是gulp-sass,它只是node-sass的薄包装)既处理sass语法又处理scss语法,并通过读取文件扩展名来决定使用哪种语法。强>。
这是一个gulp文件的演示,该文件同时处理scss和sass语法(不是您希望在项目中使用的语法):
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('my-sass-task', function () {
return gulp.src('styles/**/*.sass') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
gulp.task('my-scss-task', function () {
return gulp.src('styles/**/*.scss') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
似乎没有任何容易找到的地方,我只是偶然发现了它。
旁注:我被sass吸引了,但我想我会改为使用scss。如果您将鼠标悬停在选择范围上,This SO question的答案中会有很多有用的信息。