Sass不能用gulp / plumber / browsersync進行編譯

Question

我只是重新開始編程，並試圖使SPA浮出水面。 我已經了解到Gulp正在監視我的所有任務。 它可以識別何時更改HTML並且BrowserSync可以正常工作而無需刷新。 我遇到的問題更多是與SCSS / CSS相關。 上次檢查時它在工作，我進行了npm更新，所以現在所有內容都已更新。 它似乎不想監視scss的更改。 我認為這部分是由於它如何在文件中鏈接，或者可能是為sass任務設置了錯誤的gulpfile。

我的文件夾設置為：

項目應用程序css / scss / index.html js / gulpfile.js

有人看到我沒在這里看到的東西嗎？ 同樣，一切都加載完畢，應用了引導程序，啟用了browsersync，但是從我的style.scss到CSS的改動都沒有最小化。

謝謝！

Gulp文件：

 /* Required */ var gulp = require('gulp'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var plumber = require('gulp-plumber'); var autoprefixer = require('gulp-autoprefixer'); /* Scripts Task */ gulp.task('scripts', function(){ gulp.src(['app/js/**/*.js', '!app/js/**/*min.js']) .pipe(plumber()) .pipe(rename({suffix:'.min'})) .pipe(uglify()) .pipe(gulp.dest('app/js')) .pipe(reload({stream:true})); }); /* Sass Task */ gulp.task('sass', function(){ return gulp.src('app/scss/**/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(autoprefixer('last 2 versions')) .pipe(gulp.dest('app/css')) .pipe(reload({stream:true})); }); /* HTML Task */ gulp.task('html', function(){ gulp.src('app/**/*.html') .pipe(plumber()) .pipe(reload({stream:true})); }); /* Browser-Sync Task */ gulp.task('default', ['browser-sync'], function () { }); gulp.task('browser-sync', function() { browserSync.init(null, { proxy: "http://localhost:5000", files: ["public/**/*.*"], browser: "opera", port: 7000, }); }); /* gulp.task('nodemon', function (cb) { var started = false; return nodemon({ script: 'server.js' }).on('start', function () { // to avoid nodemon being started multiple times // thanks @matthisk if (!started) { cb(); started = true; } }); }); */ /* Watch Task */ gulp.task('watch', function(){ gulp.watch('app/js/**/*.js', ['scripts']); gulp.watch('app/scss/**/*.scss', ['sass']); 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：所有這些sass文件的輸出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">

但是您的sass任務不會顯式輸出“ style.css”， 除非您有一個style.scss文件，該文件通常會將所有其他scss文件作為部分導入（例如“ _colors.scss”）。 請注意下划線指示該文件是partial文件。 在這種情況下，gulp-sass將創建“ style.css”，以導入所有這些部分。 否則，它將為您的每個非部分scss文件創建一個css文件-但您僅鏈接到其中一個。

另一種方法是concat你的CSS文件到一個名為“style.css文件”一個文件。