理解 Gulp 的 sass 编译

Question

我有一个 gulpfile.js，其中包含一些任务来编译客户端咖啡脚本和我在 sass 中的样式。 coffeescript 编译正确，但 sass 编译不正确。

这是我的 gulpfile.js -

var gulp   = require('gulp'),
    util   = require('gulp-util'),
    sass   = require('gulp-sass'),
    coffee = require('gulp-coffee');

var paths = {
    scripts: {
        src:  'src/coffee/**/*.coffee',
        dest: 'public/javascripts'
    },
    styles: {
        src:  'src/*.sass',
        dest: 'public/stylesheets'
    }
};

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src)
        .pipe(coffee())
        .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
       .pipe(sass({errLogToConsole: true}))
       .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, ['scripts']);
  gulp.watch(paths.styles.src, ['styles']);
});

gulp.task('default', ['scripts', 'watch']);

它必须在我的“监视”任务中，但它缺少什么？

* 编辑 *

这是我得到的输出 -

[gulp] Using file exampledir/gulpfile.js
[gulp] Working directory changed to exampledir/examplesite
[gulp] Running 'scripts'...
[gulp] Running 'watch'...
[gulp] Finished 'watch' in 14 ms
[gulp] Finished 'scripts' in 106 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 10 μs

Answer 1

您似乎忘记了.src 以及您的gulp.src(path.styles)。

打赌它会更好用:)

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
     .pipe(sass({errLogToConsole: true}))
     .pipe(gulp.dest(paths.styles.dest));
});

* 编辑 *

另外一点：默认任务不依赖于saas任务。这就是它没有被执行的原因。

gulp.task('default', ['scripts', 'sass', 'watch']);

会解决的。

否则，请等待您的样式文件之一被修改后再编译。 启动时不会触发编译。

* EDIT v2 *

如果您要同时编译 .scss 和 .sass 扩展，只需调整您的 path.styles.src 变量。

paths = {
    ...
    styles: {
       src:  ['src/*.scss', 'src/*.sass']
    ...

应该可以。除非vinyl-fs 似乎工作的方式。

* EDIT v3 *

该死的。 样式文件夹上的手表不正确。它触发了一个 undeinfed styles 任务。 尝试将其更改为sass 任务。

gulp.watch(paths.styles.src, ['sass']);

Answer 2

花了很长时间尝试使用 gulp-sass 编译我的 .sass 文件后，我决定改用 compass 插件。像魅力一样工作：

gulp.task('sass', function() {
  return gulp.src('./src/sass/' + '**/*.sass')
    .pipe($plugin.plumber())
    .pipe($plugin.compass({
      css:   './public/css',
      sass:  './src/sass/'
    }))
    .pipe(gulp.dest('./public/css'));
});