0

Autoprefixer、sass、および browser-sync で gulp を正しく動作させようとしていますが、いくつか問題があります。

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 に変更するだけです

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

index.html、gulpfile.js、およびpackage.jsonが保存されているメインディレクトリにすべてをインストールしました。

しかし、今は src/css/main.sass で作業しています。保存しても何も起こりません。それで、変更が見られず、コンパイルされないと推測していますか？はい、index.html 内で main.css をリンクしました

あなたが私を助けて、何がうまくいかなかったのかを説明してくれることを願っています。

4

2 に答える 2

0

これに変更：

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

それが機能するかどうかをお知らせください。

于 2016-11-16T23:09:02.827 に答える