gulp、browsersync、sass、autoprefixer is not working

Question

私は自分のガルプをAutoprefixer、sass、browser-syncで正しく動作させようとしていますが、いくつか問題があります。

私はこのようなGulpfile.jsを設定します。私は、ウェブサイトからこれを得た

var gulp = require('gulp'), 
plumber = require('gulp-plumber'), 
rename = require('gulp-rename'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-sass'); 
var browserSync = require('browser-sync'); 

gulp.task('browser-sync', function() { 
    browserSync({ 
    server: { 
     baseDir: "./" 
    } 
    }); 
}); 

gulp.task('bs-reload', function() { 
    browserSync.reload(); 
}); 

gulp.task('styles', function(){ 
    gulp.src(['src/**/*.sass']) 
    .pipe(plumber({ 
     errorHandler: function (error) { 
     console.log(error.message); 
     this.emit('end'); 
    }})) 
    .pipe(sass()) 
    .pipe(autoprefixer('last 2 versions')) 
    .pipe(gulp.dest('assets/css/')) 
    .pipe(browserSync.reload({stream:true})) 
}); 


gulp.task('default', ['browser-sync'], function(){ 
    gulp.watch("src/**/*.sass", ['styles']); 
    gulp.watch("*.html", ['bs-reload']); 
}) 

。私は.scssを.sassに変更するだけです

私が望んでいたことの全体的なアイデアは、 "scr"という名前のマップを私が.sassファイルを置く場所にすることでした。/ assets/cssフォルダにコンパイルする必要があります.cssファイルになります。

私はすべて私のindex.html、gulpfile.jsとpackage.jsonが格納されている私のメインディレクトリにインストールしました。

しかし、私はsrc/css/main.sassで作業していますが、何も保存せずに作業が行われます。だから私は推測何か変更を見ていないとコンパイルされませんか？ はい私はindex.htmlの中でmain.cssをリンクしています

あなたは私を助け、何が間違っているのかを説明して、いつかこれを理解することを願っています。

Answer 1

はこれに変更します。

var browserSync = require("browser-sync").create(); 

、それが動作するかどうか、私たちに知らせてください。

var browserSync = require("browser-sync").create(); 

以前に述べた、あなたがサーバーを作成するときbrowserSync後に「初期化」を設定するのを忘れたよう

Answer 2

。

browserSync.init({ 
    server: 
    { 
     baseDir: "./" 
    } 
});