将SCSS和SASS语法与Gulp结合起来？

这是我第一次使用Taskrunner，但是我已经使用了很多Sass，我非常喜欢Sass语法而不是SCSS语法。但是，我想在我的新项目中使用Bourbon库，它是用SCSS编写的，因此如果我没有用SCSS编写所有CSS，它就不会为我编译，因为我只编译以.sass结尾的文件。有没有一种方法可以同时编译这两者，或者使用其他的gulp插件来实现这一点？我在使用Compass、Codekit或内置在Jekyll中的Sass编译器时从来没有遇到过这个问题。我附上了我的代码，并记住我是新来的，所以请随时指出，如果我做了一些愚蠢的决定，或者如果有什么看起来很奇怪的事情，我希望改进

var gulp        = require('gulp'),
browserify      = require('gulp-browserify'),
sass            = require('gulp-sass'),
browserSync     = require('browser-sync'),
reload          = browserSync.reload;


//Tasks  regarding scripts--------------------------------------------------|
gulp.task('scripts', function(){
// Single entry point to browserify
       gulp.src('vendor/scripts/main.js')
        .pipe(browserify({
             insertGlobals : true,
                debug : !gulp.env.production
            }))
        .pipe(gulp.dest('./dist/js'))
        console.log("This is reloaded");
});

//Tasks regarding styles----------------------------------------------------|
gulp.task('sass', function(){
    gulp.src('vendor/styles/**/*.scss')
    .pipe(sass({
    outputStyle: 'nested',
    onError: console.error.bind(console, 'Sass error:')
    }))
    .pipe(gulp.dest('./dist/css'))
});

//Live reload--------------------------------------------------------------------|
gulp.task('serve', ['scripts','sass'], function () {
    gulp.watch([
        'dist/**/*'
    ]).on('change', reload);
    gulp.watch('vendor/styles/**/*.scss', ['sass']);
    gulp.watch('vendor/scripts/*.js', ['scripts']);


    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: ['.tmp', 'dist'],
            routes: {
                '/bower_components': 'bower_components'
            }
        }
    });
});

---

gulp sass

基于libsass，这是sass的原生C实现，众所周知，libsass存在不同语法的问题。我建议使用plugin

gulpruby-sass

来支持原始的ruby实现。您还可以将其与Codekit、Compass等一起使用。请注意，

gulpruby-sass

具有不同的接口：

var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
    return sass('vendor/styles/**/*.scss')
        .pipe(gulp.dest('./dist/css'))
});

吞下sass要慢得多，但您不会遇到这样的问题，因为这些实现之间仍然存在巨大差异

顺便说一句：你第一次喝啤酒真是太好了！只需确保在子任务中返回流，以便Gulp知道如何编排它们（只需在

Gulp.src

之前放置一个return语句即可）

根据 你只需要改变一下 /*.scss到*+（scss|sass）

加号+和括号（）允许Gulp匹配多个模式，不同的模式由管道字符分隔。在这种情况下，Gulp将匹配根文件夹中以.scss或.sass结尾的任何文件

这是我的插件：

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    haml = require('gulp-ruby-haml'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    coffee = require('gulp-coffee'),
    gutil = require('gulp-util'),
    slim = require("gulp-slim"),
    del = require('del');

这对我很有用：

// Styles
gulp.task('styles', function() {
  return sass('src/styles/**/*.+(scss|sass)', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

---

嘿，谢谢你的意见。如果我使用gulp ruby Sass，我是否能够将scss Bourbon导入我的Sass文件而没有任何问题？你能解释一下“返回”部分吗？我为什么要返回源代码？这会改变什么？：）您基本上使用了与Compass、Jekyll或Codekit相同的Sass，因此它应该可以完全正常工作！至于返回部分：请注意，我将return语句放在函数的开头。因此，我不仅要执行流，还要将其传递回Gulp，Gulp能够计划并行和串行执行，因为它知道一个流何时完成。不客气：-）如果答案对您有帮助，请将其标记为“已解决”；-）问题是，在Jekyll和compass中，我不必指定我要查找以“.sass”或“.scss”结尾的文件，因此我感觉它不会编译以“.scss”（波旁文件）结尾的文件，如果我不在某个地方指定它，这是不正确的吗？请参阅。。。杰克尔，指南针，密码箱。它们都不编译Sass。Ruby的Sass实现确实如此。Jekyll、Compass和Codekit只需调用Ruby的Sass实现

gulpruby-sass

的作用与此完全相同。它不会为您编译Sass，它们调用与其他工具运行的Ruby-Sass实现相同的实现。因此，如果它运行在Jekyll、Compass、Codekit中，它也会运行在GulpRuby sass中。无需额外规范；-）