Question

的说明操作了

我的gulpfile.js代码：

let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;

gulp.task('server', ['css'], function() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });

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

// 编译Sass
gulp.task('css', function() {  // 任务名
  return gulp.src('src/sass/a.scss')  // 目标 sass 文件
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest('dist/sass/'))  // 目标目录
    // .pipe(reload({stream: true}))
    .pipe(browserSync.stream());
});

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

当我更新sass文件时，似乎会立即更新css文件，但broswer无法重新加载。

和命令行显示：

似乎cli无法连接到broswer？

===

问题已解决，我的html文件没有正文标记，请参阅https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582

Answer 1

我发布了你的GULP文件......你可以看到我使用

gulp-webserver

它只需要reload:true作为你的方面工作：

“use strict”;

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json"); // make sure bundleconfig.json doesn't contain any comments
var livereload = require('gulp-livereload');

var changed = require('gulp-changed');
var stripDebug = require('gulp-strip-debug');
var minifyHTML = require('gulp-minify-html');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');
var ngAnnotate = require('gulp-ng-annotate');
var templateCache = require('gulp-angular-templatecache');
var webserver = require('gulp-webserver'); //<-- YOU HAVE TO INSTALL IT MAYBE WITH NPM (npm install --save -dev gulp-webserver)

// THESE IS THE TASK FOR WEB SERVER AND RELOAD
gulp.task('webserver', function () {
    gulp.src('')
        .pipe(webserver({
            host: 'localhost', // <-- IF YOU PUT YOUR IP .. YOU CAN WATCH IT FROM OTHER devices
            port: 80,
            livereload: true,
            directoryListing: true,
            open: true,
            fallback: 'index-dev.html'
        }));
});



// Task to process Index page with different include ile based on enviroment
gulp.task('html-dev', function () {
    return gulp.src('Index.html')

         .pipe(preprocess({ context: { NODE_ENV: 'dev', DEBUG: true } })) //To set environment variables in-line 
         .pipe(rename({ suffix: '-dev' }))
         .pipe(gulp.dest(''));
});

// Task to process Index page with different include ile based on enviroment

gulp.task('html-prod', function () {
    return gulp.src('Index.html')

        .pipe(preprocess({ context: { NODE_ENV: 'prod', DEBUG: false } })) //To set environment variables in-line 
        .pipe(rename({ suffix: '-prod' }))
        .pipe(gulp.dest(''));
});


// CSS concat, auto-prefix, minify, then rename output file
gulp.task('minify-css', function () {
    var cssPath = { cssSrc: ['./app/view/assets/content/css/styles-default.css', './app/view/assets/content/css/styles-theme-1.css', './app/view/assets/content/css/styles-theme-2.css', '!*.min.css', '!/**/*.min.css'], cssDest: './app_build/content_build/css' };

    return gulp.src(cssPath.cssSrc)
     // .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app_build/content_build/css/*.css -r']))
    //  .pipe(concat('styles.css'))
      .pipe(autoprefix('last 2 versions'))
      .pipe(minifyCSS())
      .pipe(rename({ suffix: '.min' }))
      .pipe(gulp.dest(cssPath.cssDest));
});


// Lint Task
gulp.task('lint', function () {
    var jsPath = { jsSrc: ['./app/app.js', './app/controller/*.js', './app/view/utils/directives/*.js', './app/model/services/*.js'] };
    return gulp.src(jsPath.jsSrc)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//SASS task
gulp.task('sass', function () {
    var sassPath = {
        cssSrc: ['./app/view/assets/content/css/*.scss'], cssDest: './app/view/assets/content/css'
    };
    gulp.src(sassPath.cssSrc)
      .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app/view/assets/content/css/*.css -r']))
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest(sassPath.cssDest))
      .pipe(livereload());
});


gulp.task('cache', function () {
    return gulp.src('./app/view/template/**/*.html')
      .pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/template' }))
      .pipe(gulp.dest('./app/view/template'))
      .pipe(livereload());
});

gulp.task('cache-directives', function () {
    return gulp.src('./app/view/utils/directives/template/**/*.html')
      .pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/utils/directives/template' }))
      .pipe(gulp.dest('./app/view/utils/directives/template'))
      .pipe(livereload());
});


gulp.task("min:js", function () {
    var tasks = getBundles(".js").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
             .pipe(ngAnnotate({
                 remove: true,
                 add: true,
                 single_quotes: false
             }))
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

//gulp.task("min:css", function () {
//    var tasks = getBundles(".css").map(function (bundle) {
//        return gulp.src(bundle.inputFiles, { base: "." })
//            .pipe(concat(bundle.outputFileName))
//            .pipe(cssmin())
//            .pipe(gulp.dest("."));
//    });
//    return merge(tasks);
//});

gulp.task("min:html", function () {
    var tasks = getBundles(".html").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest("."));
        //.pipe(livereload());
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("min", ["clean", "min:js", "minify-css", 'html-dev', "cache", "cache-directives"]);
gulp.task("default", ["watch", "webserver"]);
gulp.task("watch", function () {
     livereload.listen();

    // watch for JS error
    gulp.watch(['./app/app.js', './app/controllers/*.js', './app/directives/*.js', './app/services/*.js'], ['lint']);

    // min js
    getBundles(".js").forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    //watch for SASS changes
    gulp.watch('./app/view/assets/content/css/scss/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/scss/settings/*.scss', ['sass']);
    gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/base/*.scss', ['sass']);
    gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/modules/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/Hover-master/scss/*.scss', ['sass']);

    //gulp.watch('./app/view/assets/content/css/*.css', ['minify-css']);
    //watch for PREPROCCESS x PROD
    gulp.watch('Index.html', ['html-prod']);
    //watch for PREPROCCESS x DEV
    gulp.watch('Index.html', ['html-dev']);
    //watch for TEMPLATE CACHE
    gulp.watch('./app/view/template/**/*.html', ['cache']);
    gulp.watch('./app/view/utils/directives/template/**/*.html', ['cache-directives']);

});

function getBundles(extension) {
    return bundleconfig.filter(function (bundle) {
        return new RegExp(extension).test(bundle.outputFileName);
    });
}

Answer 2

问题已解决，我的html文件没有正文标记，请参阅https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582

使用gulp和browser-sync进行文件更新时，broswer无法重新加载

2 个答案: