Browsersync не перезагружает браузер и не вводит css - PullRequest
0 голосов
/ 29 ноября 2018

Я пытался разобраться в этом уже несколько дней, но не смог заставить его работать так, как мне нужно.Я не могу найти примеров других людей, использующих Browsersync с ядром .net, это может быть даже причиной того, что я испытываю все эти проблемы.Но я не могу найти никаких доказательств, подтверждающих это, и не пойму, почему именно так будет.

Во всяком случае ... У меня все работает в моем файле gulp именно так, как я этого хочудля sass / js для обработки ошибок и т. д. Я не новичок, чтобы проглотить, иначе я бы обвинял мой недостаток опыта в моей неспособности заставить это работать.

Вот мой файл gulp, за которым следует вывод при запуске gulp.

Задание по умолчанию:

const   gulp = require("gulp"),
        uglify = require("gulp-uglify"),
        sass = require("gulp-sass"),
        rename = require('gulp-rename'),
        sassGlob = require('gulp-sass-glob'),
        postcss = require('gulp-postcss'),
        autoprefixer = require('gulp-autoprefixer'),
        sourcemaps = require('gulp-sourcemaps'),
        cleanCSS = require('gulp-clean-css'),
        concat = require('gulp-concat'),
        msbuild = require('gulp-msbuild'),
        through = require('through2'),
        notifier = require('node-notifier'),
        browserSync = require('browser-sync').create();

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

    browserSync.init({
        proxy : {
            target: "https://localhost:3000",
        },
        files: ['./wwwroot/css/*'],

        rewriteRules: [
            {
                match: new RegExp('/css/main.min.css'),
                fn: function() {
                    return './wwwroot/css/main.min.css'
                }
            }
        ]
    });


    //Watch for any changes to the scss files.
    gulp.watch('./wwwroot/sass/**/*.scss', ['sass']);

    //Watch for any changes to the js files, reload after those changes are made.
    gulp.watch('./wwwroot/js/source/*.js', ['compileJS']).on('change', browserSync.reload);

    //Watch for any changes to a .cshtml file and reload the browser if/when that change happens.
    gulp.watch("./**/*.cshtml").on('change', browserSync.reload);
});

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


/**
 * Compiles SASS files and stores the result into the public folder
 */
gulp.task('sass', function () {

    return gulp.src('./wwwroot/sass/main.scss')
        .pipe(sassGlob())
        .pipe(sass().on('error', function (err) {
            console.log('Sass Error:', err.toString());

            notifier.notify({
                'title': 'Gettin\' Sassy ?‍♀️',
                'message': 'You goofed. Check your terminal window for more information.'
            });

            this.emit("end");
        }))
        .pipe(postcss([require('autoprefixer')]))
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(
            through.obj(function(chunk, enc, cb) {
                cb(null, chunk)
            })
        )
        .pipe(cleanCSS({compatibility: 'ie8',
            level: 2}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./wwwroot/css'))
        .pipe(browserSync.stream());
});

/**
 * Compiles the Javascript files and stores the result in the public folder
 */
gulp.task('compileJS', function (done) {

    return gulp.src('./wwwroot/js/source/*.js')
        .pipe(sourcemaps.init())
        .pipe(concat('main.js'))
        .pipe(uglify().on('error', function (err) {
            console.log('JS Uglify Error:', err.toString());

            notifier.notify({
                'title': 'JS Compile Error',
                'message': 'Something about your JS is a little off. Check yourself before you wreck yourself.'
            });

            this.emit("end");
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./wwwroot/js/dist'));
});

Вывод:

$ gulp
[21:34:15] Using gulpfile 
~/Repos/PROJECT_DIRECTORY/PROJECT_NAME/gulpfile.js
[21:34:15] Starting 'sass'...
[21:34:15] Starting 'compileJS'...
[21:34:15] Finished 'sass' after 437 ms
[21:34:15] Finished 'compileJS' after 426 ms
[21:34:15] Starting 'serve'...
[21:34:16] Finished 'serve' after 1 s
[21:34:16] Starting 'default'...
[21:34:16] Finished 'default' after 68 μs
[Browsersync] Proxying: https://localhost:3000
[Browsersync] Access URLs:
 ------------------------------------
        Local: https://localhost:3000
     External: https://10.0.0.137:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[21:34:35] Starting 'sass'...
[Browsersync] 1 file changed (main.min.css)
[21:34:35] Finished 'sass' after 207 ms
[21:34:58] Starting 'compileJS'...
[21:34:58] Finished 'compileJS' after 154 ms
[Browsersync] Reloading Browsers...

ИтакГлядя на этот вывод, вы, вероятно, подумаете про себя: «Этот чувак - идиот ... Browsersync заявляет, что перезагружает браузеры ...» Да, это так, но это не перезагружает браузер.Browsersync также не может внедрить мою CSS в браузер.

Как я уже упоминал, я использовал gulp ранее, и эта настройка тесно представляет файлы gulp, которые я использую также при разработке Wordpress.Тем не менее, он не будет работать для этого проекта (что привело меня к моим подозрениям в ядре .net / Visual Studio).

...