0

我试图让我的 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

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

4

2 回答 2

0

如前所述

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

当您创建服务器时，您忘记在 browserSync 之后设置“init”。

browserSync.init({
    server: 
    {
       baseDir: "./"
    }
});
于 2017-11-03T10:42:47.223 回答
0

修改为：

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

让我们知道这是否有效。

于 2016-11-16T23:09:02.827 回答