了解Gulp sass汇编

我有一个gulpfile.js与一些任务来编译客户端coffeescript和我的风格在sass。咖啡脚本编译正确，但sass不是。了解Gulp 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

来源

2014-02-12 Seth

是路径'/ src/*。sass'正确吗？ – fcalderan

不，谢谢你指出，它应该是'src/*。sass'。但不幸的是，这并不能解决问题。 – Seth

看来你忘了.src OTH您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 *

该死。样式文件夹中的手表不正确。它会触发未完成的styles任务。尝试将其更改为sass任务。

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

来源

2014-02-12 17:32:32 Feugy

尽管你对自己的见解非常认真（谢谢！）但它并没有解决问题。我编辑我的_index。sass文件，在运行watch任务时gulp无法识别它。尽管感谢您的gulp.src点！ – Seth

它增加了输出的sass，但没有编译我的sass。这个模块不能编译sass not scss吗？ – Seth

是的。 .scss和.sass扩展名均由sass编译器支持。但是在你的src变量中，你说'* .sass'。因此它完全忽略.scss文件。我会发布另一个编辑:) – Feugy

花欲以吞气，SASS编译我.sass文件，我决定使用指南针的插件，而不是一个很长一段时间后。像魅力一样工作：

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-23 18:42:01 user3869840

同意，这对使用指南针的项目非常有用。 – Seth

了解Gulp sass汇编

回答

相关问题