sassはgulp/plumber/browsersyncでコンパイルしていません

Question

プログラミングに戻り、SPAのスケルトンを取得しようとしています。 Gulpが私のすべての仕事を見ているところまで行きました。私はHTMLを変更すると、BrowserSyncがリフレッシュすることなく正常に動作していることを認識しています。私が持っている問題は、より多くのSCSS/CSS関連です。前回チェックしたときにはうまくいっていたので、npmのアップデートを行ったので、すべてが更新されました。 scssで変更を監視したくないようです。私はそれが部分的にファイル内でどのようにリンクされているか、gulpfileがsassタスクのために正しく設定されていないことが原因であると考えています。設定

マイフォルダには、次のとおりです。

プロジェクト アプリ CSS/ SCSS/ index.htmlを JS/ gulpfile.js私はここで見ていないよ何かを見て

誰ですか？繰り返しますが、すべてがロードされ、ブートストラップが適用され、browsersyncが有効になっていますが、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：これらすべての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

あなたは、このリンクを持っている：あなたは一般的にパーシャルとして他のすべてのSCSSファイルをインポートしますstyle.scssファイルを持っているない限り

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

が、あなたのSASSタスクんではない明示的に出力「のstyle.css」を（「_colors.scss」など）。ファイルがpartialであることを示すアンダースコアに注意してください。その場合、gulp-sassは "style.css"を作成し、これらの部分集合をすべてインポートします。それ以外の場合は、部分的でないscssファイルごとに1つのcssファイルが作成されますが、そのうちの1つにのみリンクします。

もう1つの代替方法は、concatの「css」ファイルを「style.css」という名前のファイルに変換することです。