0

这是我第一次使用 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'
            }
        }
    });
});
4

2 回答 2

0

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 知道如何编排它们（只需在之前放置一个 return 语句gulp.src）

于 2015-04-18T20:48:11.827 回答
0

根据 https://css-tricks.com/gulp-for-beginners/ 您只需将 /*.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'));
});
于 2016-11-01T02:31:06.937 回答