2015-09-21 59 views
2

我想嘗試用sass來解決問題。 我有以下青菜目錄:gulp sass watch任務@import問題

main.scss //all custom styling 
mixins.scss //custom mixins 
variables.scss //custom variables 
style.scss //file that imports all the above with bootstrap and fontawesome 

當我運行一飲而盡,一切編譯並沒有錯誤,我得到正確的sytle.min.css所有的造型包括在內。 但後來我改變觀看文件(main.scss || mixins.scss || variables.scss)我收到以下錯誤之一的一個:「未定義的變量」,「沒有混入叫......」相應。

另外,如果我改變並儲存main.scss我沒有得到任何錯誤,但沒有自定義SCSS文件獲取納入CSS,只有引導與fontawesome被編譯。

什麼是錯我的設置?

gulpfile.js

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    notify = require("gulp-notify"), 
    concat = require('gulp-concat'), 
    minifycss = require('gulp-minify-css'), 
    uglify = require('gulp-uglify'), 
    rename = require('gulp-rename') 
    bower = require('gulp-bower') 
    merge = require('merge-stream') 
    watch = require('gulp-watch'); 

var config = { 
    destPath: './dist', 
    sassPath: './src/sass', 
    jsPath: './src/js', 
    bowerDir: './src/components' 
} 

gulp.task('bower', function() { 
    return bower() 
    .pipe(gulp.dest(config.bowerDir)); 
}); 

gulp.task('icons', function() { 
    var fontawesome = gulp.src(config.bowerDir + '/font-awesome/fonts/**.*') 
    .pipe(gulp.dest('./src/fonts')); 

    var bootstrap = gulp.src(config.bowerDir + '/bootstrap-sass/assets/fonts/bootstrap/**.*') 
    .pipe(gulp.dest('./src/fonts/bootstrap')); 

    return merge(fontawesome, bootstrap); 
}); 


gulp.task('sass', function() { 
    console.log(config.sassPath); 
    var stream = gulp.src([config.sassPath + '/style.scss']) 
     .pipe(sass().on('error', sass.logError)) 
     // .pipe(concat('style.css')) 
     .pipe(minifycss()) 
     .pipe(rename('style.min.css')) 
     .pipe(gulp.dest(config.destPath)); 
    return stream; 
}); 

gulp.task('js', function() { 
    var stream = gulp.src([config.bowerDir + '/jquery/dist/jquery.js', config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jsPath + '/*.js']) 
     .pipe(concat('script.js')) 
     .pipe(uglify()) 
     .pipe(rename('script.min.js')) 
     .pipe(gulp.dest(config.destPath)); 
    return stream; 
}); 

gulp.task('watch', function(){ 
    watch([config.sassPath + '/*.scss'], function(event, cb) { 
     gulp.start('sass'); 
    }); 
    watch([config.jsPath + '/*.js'], function(event, cb) { 
     gulp.start('js'); 
    }); 
}); 

gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']); 

style.scss

@import "./variables.scss"; 
@import "./mixins.scss"; 
@import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss"; 
@import "../components/font-awesome/scss/font-awesome.scss"; 
@import "./main.scss"; 

回答

1

好了,所以我固定它通過增加超時手錶任務調用青菜任務之前:

watch([config.sassPath + '/*.scss'], function(event, cb) { 
    setTimeout(function(){ 
     gulp.start('sass'); 
    }, 1000); 
}); 

它是保存延遲或服務器ping問題的IDE(崇高2)。

+0

10x男人我嘗試了數以千計的東西,使這項工作,並失去了頭痛的小時!我嘗試使用sassGlob()和包含sass的includePaths設置,但看起來超時是解決此問題的方法。 –