Gulp.js浏览器同步不会重新加载我的浏览器
Gulp浏览器同步不会重新加载我的浏览器。 当我点击保存我的项目时，它生成一切正常。 我的浏览器闪烁，并在右上angular显示“连接到浏览器同步”。 它不会加载更改。 当我手动刷新刷新时，它会加载更改。 我一直在咕噜咕噜的文件，并没有发现任何错误。 有什么build议？
Gulp.js文件：
var $ = require('gulp-load-plugins')(); var argv = require('yargs').argv; var browser = require('browser-sync'); var gulp = require('gulp'); var panini = require('panini'); var rimraf = require('rimraf'); var sequence = require('run-sequence'); var sherpa = require('style-sherpa'); // Check for --production flag var isProduction = !!(argv.production); // Port to use for the development server. var PORT = 8000; // Browsers to target when prefixing CSS. var COMPATIBILITY = ['last 2 versions', 'ie >= 9']; // File paths to various assets are defined here. var PATHS = { assets: [ 'src/assets/**/*', '!src/assets/{img,js,scss}/**/*' ], sass: [ 'bower_components/foundation-sites/scss', 'bower_components/motion-ui/src/' ], javascript: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/what-input/what-input.js', 'bower_components/foundation-sites/js/foundation.core.js', 'bower_components/foundation-sites/js/foundation.util.*.js', // Paths to individual JS components defined below 'bower_components/foundation-sites/js/foundation.abide.js', 'bower_components/foundation-sites/js/foundation.accordion.js', 'bower_components/foundation-sites/js/foundation.accordionMenu.js', 'bower_components/foundation-sites/js/foundation.drilldown.js', 'bower_components/foundation-sites/js/foundation.dropdown.js', 'bower_components/foundation-sites/js/foundation.dropdownMenu.js', 'bower_components/foundation-sites/js/foundation.equalizer.js', 'bower_components/foundation-sites/js/foundation.interchange.js', 'bower_components/foundation-sites/js/foundation.magellan.js', 'bower_components/foundation-sites/js/foundation.offcanvas.js', 'bower_components/foundation-sites/js/foundation.orbit.js', 'bower_components/foundation-sites/js/foundation.responsiveMenu.js', 'bower_components/foundation-sites/js/foundation.responsiveToggle.js', 'bower_components/foundation-sites/js/foundation.reveal.js', 'bower_components/foundation-sites/js/foundation.slider.js', 'bower_components/foundation-sites/js/foundation.sticky.js', 'bower_components/foundation-sites/js/foundation.tabs.js', 'bower_components/foundation-sites/js/foundation.toggler.js', 'bower_components/foundation-sites/js/foundation.tooltip.js', 'src/assets/js/**/!(app).js', 'src/assets/js/app.js' ] }; // Delete the "dist" folder // This happens every time a build starts gulp.task('clean', function(done) { rimraf('dist', done); }); // Browser Sync wrapper task // allows for proper injection of css files gulp.task('reload', function(cb) { browser.reload(); cb(); }); // Copy files out of the assets folder // This task skips over the "img", "js", and "scss" folders, which are parsed separately gulp.task('copy', function() { return gulp.src(PATHS.assets) .pipe(gulp.dest('dist/assets')); }); // Copy page templates into finished HTML files gulp.task('pages', function() { return gulp.src('src/pages/**/*.{html,hbs,handlebars}') .pipe(panini({ root: 'src/pages/', layouts: 'src/layouts/', partials: 'src/partials/', data: 'src/data/', helpers: 'src/helpers/' })) .pipe(gulp.dest('dist')); }); gulp.task('pages:reset', function(cb) { panini.refresh(); gulp.run('pages', cb); }); gulp.task('styleguide', function(cb) { sherpa('src/styleguide/index.md', { output: 'dist/styleguide.html', template: 'src/styleguide/template.html' }, cb); }); // Compile Sass into CSS // In production, the CSS is compressed gulp.task('sass', function() { var uncss = $.if(isProduction, $.uncss({ html: ['src/**/*.html'], ignore: [ new RegExp('^meta\..*'), new RegExp('^\.is-.*') ] })); var minifycss = $.if(isProduction, $.minifyCss()); return gulp.src('src/assets/scss/app.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ includePaths: PATHS.sass }) .on('error', $.sass.logError)) .pipe($.autoprefixer({ browsers: COMPATIBILITY })) .pipe(uncss) .pipe(minifycss) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/css')) .pipe(browser.reload({stream: true})); }); // Combine JavaScript into one file // In production, the file is minified gulp.task('javascript', function() { var uglify = $.if(isProduction, $.uglify() .on('error', function (e) { console.log(e); })); return gulp.src(PATHS.javascript) .pipe($.sourcemaps.init()) .pipe($.concat('app.js')) .pipe(uglify) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/js')); }); // Copy images to the "dist" folder // In production, the images are compressed gulp.task('images', function() { var imagemin = $.if(isProduction, $.imagemin({ progressive: true })); return gulp.src('src/assets/img/**/*') .pipe(imagemin) .pipe(gulp.dest('dist/assets/img')); }); // Build the "dist" folder by running all of the above tasks gulp.task('build', function(done) { sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done); }); // Start a server with LiveReload to preview the site in gulp.task('server', ['build'], function() { browser.init({ server: 'dist', port: PORT }); }); // Build the site, run the server, and watch for file changes gulp.task('default', ['build', 'server'], function() { gulp.watch(PATHS.assets, ['copy', 'reload']); gulp.watch(['src/pages/**/*.html'], ['pages', 'reload']); gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']); gulp.watch(['src/assets/scss/**/*.scss'], ['sass']); gulp.watch(['src/assets/js/**/*.js'], ['javascript', 'reload']); gulp.watch(['src/assets/img/**/*'], ['images', 'reload']); gulp.watch(['src/styleguide/**'], ['styleguide', 'reload']); }); 谢谢你 – 阿道夫
我通过ghimball在github上修复了zurb / foundation-sites。 基础6.1.1的gulp.js文件存在问题。 Github问题页面： https : //github.com/zurb/panini/issues/10#issuecomment-172692241解释更多。 用以下代码replace我的gulp.js文件修复了这个问题。
新gulp.js：
var $ = require('gulp-load-plugins')(); var argv = require('yargs').argv; var browser = require('browser-sync'); var gulp = require('gulp'); var panini = require('panini'); var rimraf = require('rimraf'); var sequence = require('run-sequence'); var sherpa = require('style-sherpa'); // Check for --production flag var isProduction = !!(argv.production); // Port to use for the development server. var PORT = 8000; // Browsers to target when prefixing CSS. var COMPATIBILITY = ['last 2 versions', 'ie >= 9']; // File paths to various assets are defined here. var PATHS = { assets: [ 'src/assets/**/*', '!src/assets/{img,js,scss}/**/*' ], sass: [ 'bower_components/foundation-sites/scss', 'bower_components/motion-ui/src/' ], javascript: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/what-input/what-input.js', 'bower_components/foundation-sites/js/foundation.core.js', 'bower_components/foundation-sites/js/foundation.util.*.js', // Paths to individual JS components defined below 'bower_components/foundation-sites/js/foundation.abide.js', 'bower_components/foundation-sites/js/foundation.accordion.js', 'bower_components/foundation-sites/js/foundation.accordionMenu.js', 'bower_components/foundation-sites/js/foundation.drilldown.js', 'bower_components/foundation-sites/js/foundation.dropdown.js', 'bower_components/foundation-sites/js/foundation.dropdownMenu.js', 'bower_components/foundation-sites/js/foundation.equalizer.js', 'bower_components/foundation-sites/js/foundation.interchange.js', 'bower_components/foundation-sites/js/foundation.magellan.js', 'bower_components/foundation-sites/js/foundation.offcanvas.js', 'bower_components/foundation-sites/js/foundation.orbit.js', 'bower_components/foundation-sites/js/foundation.responsiveMenu.js', 'bower_components/foundation-sites/js/foundation.responsiveToggle.js', 'bower_components/foundation-sites/js/foundation.reveal.js', 'bower_components/foundation-sites/js/foundation.slider.js', 'bower_components/foundation-sites/js/foundation.sticky.js', 'bower_components/foundation-sites/js/foundation.tabs.js', 'bower_components/foundation-sites/js/foundation.toggler.js', 'bower_components/foundation-sites/js/foundation.tooltip.js', 'src/assets/js/**/!(app).js', 'src/assets/js/app.js' ] }; // Delete the "dist" folder // This happens every time a build starts gulp.task('clean', function(done) { rimraf('dist', done); }); // Copy files out of the assets folder // This task skips over the "img", "js", and "scss" folders, which are parsed separately gulp.task('copy', function() { return gulp.src(PATHS.assets) .pipe(gulp.dest('dist/assets')); }); // Copy page templates into finished HTML files gulp.task('pages', function() { return gulp.src('src/pages/**/*.{html,hbs,handlebars}') .pipe(panini({ root: 'src/pages/', layouts: 'src/layouts/', partials: 'src/partials/', data: 'src/data/', helpers: 'src/helpers/' })) .pipe(gulp.dest('dist')) .on('finish', browser.reload); }); gulp.task('pages:reset', function(done) { panini.refresh(); gulp.run('pages'); done(); }); gulp.task('styleguide', function(done) { sherpa('src/styleguide/index.md', { output: 'dist/styleguide.html', template: 'src/styleguide/template.html' }, function() { browser.reload; done(); }); }); // Compile Sass into CSS // In production, the CSS is compressed gulp.task('sass', function() { var uncss = $.if(isProduction, $.uncss({ html: ['src/**/*.html'], ignore: [ new RegExp('^meta\..*'), new RegExp('^\.is-.*') ] })); var minifycss = $.if(isProduction, $.minifyCss()); return gulp.src('src/assets/scss/app.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ includePaths: PATHS.sass }) .on('error', $.sass.logError)) .pipe($.autoprefixer({ browsers: COMPATIBILITY })) .pipe(uncss) .pipe(minifycss) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/css')) .pipe(browser.reload({ stream: true })); }); // Combine JavaScript into one file // In production, the file is minified gulp.task('javascript', function() { var uglify = $.if(isProduction, $.uglify() .on('error', function (e) { console.log(e); })); return gulp.src(PATHS.javascript) .pipe($.sourcemaps.init()) .pipe($.concat('app.js')) .pipe(uglify) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/js')) .on('finish', browser.reload); }); // Copy images to the "dist" folder // In production, the images are compressed gulp.task('images', function() { var imagemin = $.if(isProduction, $.imagemin({ progressive: true })); return gulp.src('src/assets/img/**/*') .pipe(imagemin) .pipe(gulp.dest('dist/assets/img')) .on('finish', browser.reload); }); // Build the "dist" folder by running all of the above tasks gulp.task('build', function(done) { sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done); }); // Start a server with LiveReload to preview the site in gulp.task('server', ['build'], function() { browser.init({ server: 'dist', port: PORT }); }); // Build the site, run the server, and watch for file changes gulp.task('default', ['build', 'server'], function() { gulp.watch(PATHS.assets, ['copy']); gulp.watch(['src/pages/**/*'], ['pages']); gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']); gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']); gulp.watch(['src/assets/js/**/*.js'], ['javascript']); gulp.watch(['src/assets/img/**/*'], ['images']); gulp.watch(['src/styleguide/**'], ['styleguide']); });
感谢上面的代码浏览器同步再次工作 – 谢谢gakimball！