Question

Html文件是同步和工作的，但CSS文件没有。 Gulp和浏览器同步也正常工作，不会出现任何错误。我从官方BrowserSync网站上阅读了一些文档，但它不起作用。请帮我。这是我的gulpfile.js文件：＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＃＆39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; ＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;

var gulp =           require('gulp');

// POST CSS PLUGINS
var postcss =        require('gulp-postcss');
var mixins =         require('postcss-mixins');
var postcssimport =  require('postcss-partial-import');
var nested =         require('postcss-nested');
var vars =           require('postcss-simple-vars');
var lost =           require('lost');
var rucksack =       require('rucksack-css');
var cssnano    =     require('cssnano');
var autoprefixer =   require('autoprefixer');
var mqpacker    =    require('css-mqpacker');

// OTHER PLUGINS
var pug =            require('gulp-pug');
var imagemin =       require('gulp-imagemin');
var pngquant    =    require('imagemin-pngquant');
var plumber =        require('gulp-plumber');
var browserSync =    require('browser-sync');

// POSTCSS TASK

gulp.task('css', function() {
    var plugins = [
            autoprefixer({
                browsers: ['last 2 version']
            }),
            rucksack({
                alias: false,
                easings: false,
                inputPseudo: false
            }),
            lost,
            mixins,
            postcssimport,
            nested,
            vars,
            mqpacker
            // cssnano uncomment this when you need to minify .css files
    ];
    return gulp.src('app/styles/*.css')
        .pipe(plumber())
        .pipe(postcss(plugins))
        .pipe(plumber.stop())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

// PUG TASK

gulp.task('pug', function(){
    return gulp.src('app/pug/*.pug')
        .pipe(plumber())
        .pipe(pug({
            pretty: true // Don't minify .html files
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest('app'))
});

// IMAGE MINIFICATION TASK

gulp.task('img-min', function() {
    gulp.src('app/images/**/*')
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/img'))
});

// BROWSER SYNC TASK

gulp.task('browserSync', ['css'], function() {
  browserSync.init({
      server: './app',
      open: false,
      notify: false,
      logPrefix: 'ʕ•ᴥ•ʔ'
  });
});

// WATCHING FILE TASK

gulp.task('watch', ['browserSync', 'css', 'pug', 'img-min'], function() {

  gulp.watch("app/*.html").on('change', browserSync.reload);
  gulp.watch("app/styles/*.css", ['css'], browserSync.reload);

    gulp.watch('app/pug/**/*.pug', ['pug']);
});

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

Gulp BrowserSync CSS没有刷新

0 个答案: