0

我有一个 gulpfile.js 有一些任务来编译客户端咖啡脚本和我在 sass 中的样式。咖啡脚本编译正确，但 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
4

2 回答 2

3

看来您忘记了.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']);

会修复它。

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

* 编辑 v2 *

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

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

应该管用。除非它是vinyl-fs似乎工作的方式。

* 编辑 v3 *

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

gulp.watch(paths.styles.src, ['sass']);
于 2014-02-12T17:32:32.423 回答
0

在花了很长时间尝试使用 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'));
});
于 2014-07-23T18:42:01.870 回答