Question

这是我第一次使用Taskrunner但是我经常使用Sass而且我非常喜欢Sass语法而不是SCSS语法。但是，我想在我的新项目中使用Bourbon库，并且它是用SCSS编写的，所以如果我没有用SCSS编写的所有CSS，它就不能为我编译，因为我只用。编译文件。萨斯结局。有没有办法编译这两个或使用其他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'
            }
        }
    });
});

Answer 1

gulp-sass基于libsass，Sass的本机C实现，众所周知libsass存在不同语法的问题。我建议使用插件gulp-ruby-sass来回退原始的Ruby实现。您也可以使用Codekit，Compass等。请注意gulp-ruby-sass具有不同的界面：

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

gulp-sass慢了很多，但你不会遇到这样的问题，因为这些实现之间仍然存在巨大的差异。

顺便说一下：你的第一个Gulpfile好转！只需确保在子任务中返回流，以便Gulp知道如何编排它们（只需在gulp.src之前放置一个返回语句）

Answer 2

根据 https://css-tricks.com/gulp-for-beginners/ 你只需要改变 / * .scss to *。+（scss | sass）

plus +和括号（）允许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'));
});

将SCSS和SASS语法与Gulp结合使用？

2 个答案: