瞭解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彙編

回答

相關問題