Question

我想通过Autoprefixer，sass和浏览器同步让我的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

我想要的全部想法是有一张名为＆＃34; scr＆＃34;我把我的.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();

告诉我们是否有效。

Answer 2

如前所述

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

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

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

gulp，browsersync，sass，autoprefixer不工作

2 个答案: