Browser-sync in gulp syncs index.html but ignores styles. Despite the fact that manually the index opens with the styles displayed. How to be?

Question

css

This is what gulpfile.js looks like:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var jade = require('gulp-jade');
var browserSync = require('browser-sync').create();

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "html"
    });

    gulp.watch('sass/*.scss', ['sass']);
    gulp.watch('html/*.html').on('change', browserSync.reload);
});

gulp.task('sass', function() {
    return sass('sass/*.scss', { style: 'expanded' })
        .pipe(gulp.dest('css'))
        .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
        .pipe(browserSync.stream());
});

gulp.task('jade', function(){
return gulp.src('jade/*.jade')
.pipe(jade({
            pretty: true,  // uncompressed
        }))
      .pipe(gulp.dest('html'));
 });

gulp.task('default', ['jade' , 'serve']);

I've already rewritten it three hundred times, I just don't understand what's the matter (

Answer 1

www.browsersync.io/docs/gulp
Most likely, the path in the server value is incorrect, what is the project structure, where is guplfile.js?

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

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

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

working example paulsalaets.com/posts/injecting-styles-in-page-wit...
update2
Try this solution stackoverflow.com/a/31245911

Answer 2

This is where I don't understand very well. The server folder should be considered the folder where index.html is located? Or the root folder of the project?
Upd_170915
Thank you. I'll try in the evening. The funny thing is that the first example taken from the github really works, but I don’t need such a folder structure with app and so on. That is, of course, she rolls. But I would like to understand my mistake nevertheless.
Upd_180915_12:08 I
changed the file so that it was as similar as possible to the code in the example, but nothing worked. Browsersync refreshes the page, jade compiles, scss compiles to css and min.css, but in the browser the page continues to display without styles. I launch index.html with a double click from the finder - there are styles. Well, not in ruby-sass, is it a problem? Obviously some kind of cant in the appeal to the browser?

var gulp            = require('gulp');
var sass            = require('gulp-ruby-sass');
// var autoprefixer    = require('gulp-autoprefixer');
var minifycss       = require('gulp-minify-css');
var rename          = require('gulp-rename');
var jade            = require('gulp-jade');
var browserSync     = require('browser-sync');
var reload          = browserSync.reload;

var src = {
    scss: 'sass/*.scss',
    css:  'css',
    html: 'html/*.html',
    jade: 'jade/*.jade'
};

gulp.task('jade', function(){
    return gulp.src(src.jade)
        .pipe(jade({
            pretty: true,  // uncompressed
        }))
        .pipe(gulp.dest('html/'));
 });

gulp.task('serve', ['sass'], function() {

    browserSync({
        server: "html/"
    });
    gulp.watch(src.jade, ['jade']);
    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html).on('change', reload);
});

gulp.task('sass', function() {
    return sass(src.scss, { style: 'expanded' })
        .pipe(gulp.dest(src.css))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(src.css))
        .pipe(browserSync.stream());
});

gulp.task('default', ['jade' , 'serve']);