gulp、browsersync、sass、autoprefixer 不工作答案

【问题标题】：gulp, browsersync, sass, autoprefixer isnt workinggulp、browsersync、sass、autoprefixer 不工作
【发布时间】：2016-11-16 11:08:57
【问题描述】：

我正在尝试让我的 gulp 与 Autoprefixer、sass 和浏览器同步正常工作，但我遇到了一些问题。

我这样设置 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

我希望你能帮助我，也许能解释一下出了什么问题，这样也许有一天我会明白这一点。

【问题讨论】：

我修复了它，将路径更改为而不是 */.sass 我写了整个路径，现在它可以工作了。我认为 gulp 不喜欢捉迷藏。

标签： gulp gulp-sass gulp-browser-sync gulp-autoprefixer

【解决方案1】：

修改为：

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

如果可行，请告诉我们。

【讨论】：

对不起，浏览器同步不是问题。由于某种原因，sass 没有编译。但是当我对 .html 文件进行更改时，browsersync 确实会更新。

【解决方案2】：

如前所述

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

而且你在创建服务器时忘记在 browserSync 之后设置“init”。

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

【讨论】：