sass沒有編譯與吞/水管工/瀏覽器同步

Question

我只是回到編程，並試圖獲得SPA的骨架漂浮。我已經達到了Gulp正在觀看我所有任務的地步。它正在認識到，當我更改HTML和BrowserSync工作正常，無需刷新。我遇到的問題是更多的SCSS/CSS相關。這是最後一次檢查工作，我做了一個npm更新，所以現在一切都更新了。它似乎不想用scss觀察變化。我認爲這部分是由於它是如何鏈接到文件中的，或者可能是爲了sass任務而錯誤地設置了gulp文件。

我的設置文件夾是：

項目 應用 CSS/ SCSS/ 的index.html JS/ gulpfile.js

任何人看到的東西我沒有看到這裏？同樣，所有內容都會加載，應用了引導程序，啓用了瀏覽器同步，但沒有更改從我的style.scss縮小到CSS中。

謝謝！

咕嘟咕嘟文件：

/* Required */ 
 

 
var gulp = require('gulp'); 
 
var \t uglify = require('gulp-uglify'); 
 
var \t rename = require('gulp-rename'); 
 
var \t sass = require('gulp-sass'); 
 
var \t browserSync = require('browser-sync').create(); 
 
var \t reload = browserSync.reload; 
 
var plumber = require('gulp-plumber'); 
 
var autoprefixer = require('gulp-autoprefixer'); 
 

 
/* Scripts Task */ 
 

 
gulp.task('scripts', function(){ 
 
\t gulp.src(['app/js/**/*.js', '!app/js/**/*min.js']) 
 
\t .pipe(plumber()) 
 
\t .pipe(rename({suffix:'.min'})) 
 
\t .pipe(uglify()) 
 
\t .pipe(gulp.dest('app/js')) 
 
\t .pipe(reload({stream:true})); 
 
}); 
 

 
/* Sass Task */ 
 

 
gulp.task('sass', function(){ 
 
\t return gulp.src('app/scss/**/*.scss') 
 
\t .pipe(plumber()) 
 
\t .pipe(sass()) 
 
\t .pipe(autoprefixer('last 2 versions')) 
 
\t .pipe(gulp.dest('app/css')) 
 
\t .pipe(reload({stream:true})); 
 
}); 
 

 
/* HTML Task */ 
 

 
gulp.task('html', function(){ 
 
\t gulp.src('app/**/*.html') 
 
\t .pipe(plumber()) 
 
\t .pipe(reload({stream:true})); 
 
}); 
 

 
/* Browser-Sync Task */ 
 

 
gulp.task('default', ['browser-sync'], function() { 
 
}); 
 

 
gulp.task('browser-sync', function() { 
 
\t browserSync.init(null, { 
 
\t \t proxy: "http://localhost:5000", 
 
     files: ["public/**/*.*"], 
 
     browser: "opera", 
 
     port: 7000, 
 
\t }); 
 
}); 
 

 
/* gulp.task('nodemon', function (cb) { 
 
\t 
 
\t var started = false; 
 
\t 
 
\t return nodemon({ 
 
\t \t script: 'server.js' 
 
\t }).on('start', function() { 
 
\t \t // to avoid nodemon being started multiple times 
 
\t \t // thanks @matthisk 
 
\t \t if (!started) { 
 
\t \t \t cb(); 
 
\t \t \t started = true; 
 
\t \t } 
 
\t }); 
 
}); */ 
 

 
/* Watch Task */ 
 

 
gulp.task('watch', function(){ 
 
\t gulp.watch('app/js/**/*.js', ['scripts']); 
 
\t gulp.watch('app/scss/**/*.scss', ['sass']); 
 
\t gulp.watch('app/**/*.html', ['html']); 
 
}) 
 

 
/* Default */ 
 

 
gulp.task('default', ['scripts', 'sass', 'html', 'browser-sync', 'watch']);

樣式包括：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
 
<!-- Latest compiled and minified Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="css/style.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <!-- Modernizr -->

Answer 1

1：所有的青菜文件的輸出CSS是要去哪裏？是在HTML調用樣式引用？ 2：也許你錯過了目標文件夾？藉此例如：

gulp.src('src/scss/application.scss') 
    .pipe(sass({ 
     includePaths: [ 
     'node_modules/foundation-sites/scss', 
     'node_modules/compass-mixins/lib' 
     ], 
     outputStyle: 'compressed' 
    }).on('error', sass.logError)) 
    .pipe(gulp.dest('./public/css/')) 

如果選中最後一行我打電話gulp.dest定義SASS文件的輸出。

Answer 2

你有此鏈接：

<link rel="stylesheet" href="css/style.css"> 

但你的青菜任務不明確輸出「的style.css」 除非你有style.scss文件，其將典型導入所有其他SCSS文件作爲諧音（如「_colors.scss」）。請注意下劃線表示該文件是partial。在這種情況下，gulp-sass將創建「style.css」，它導入所有這些部分。否則，它會爲你的每個非部分scss文件創建一個css文件 - 但你只能鏈接到其中的一個。

另一種替代方法是將您的css文件的concat合併到一個名爲「style.css」的文件中。