为什么browserync会在文件更改时多次重新加载?

时间:2016-07-15 16:11:04

标签: angularjs gulp browser-sync

我有一个angularjs的项目。所有环境都设置在具有nodejsgulp依赖关系的bower下。

我遇到问题:每次更改文件时,浏览器都会重新加载多次。

所以,我认为问题与browsersync配置有关,我该如何解决?

the image show that the process reload multiple times every time a file is changed



// ////////////////////////////////////////////////
//
// EDIT CONFIG OBJECT BELOW !!!
// 
// jsConcatFiles => list of javascript files (in order) to concatenate
// buildFilesFoldersRemove => list of files to remove when running final build
// // //////////////////////////////////////////////

var config = {
	jsConcatFilesApi: [
		'./js/initapp/*.js',
		'./js/services/*.js',
		'./js/charts/*.js',

	],
	jsConcatFilesNavigation: [
		'./js/navigation/**/*.js',

	], 
	buildFilesFoldersRemove:[
		'./build/scss/', 
		'./build/js/!(*.min.js)',
		'./build/bower.json',
		'./build/node_modules/',
		'./build/gulpfile.js',
		'./build/package.json',
		'./build/maps/',
		'./build/readme.md'
	]
};


// ////////////////////////////////////////////////
// Required taskes
// gulp build
// bulp build:serve
// // /////////////////////////////////////////////

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	sourcemaps = require('gulp-sourcemaps'),
	autoprefixer = require('gulp-autoprefixer'),
	browserSync = require('browser-sync'),
	reload = browserSync.reload,
	concat = require('gulp-concat'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	del = require('del');


// ////////////////////////////////////////////////
// Log Errors
// // /////////////////////////////////////////////

function errorlog(err){
	console.error(err.message);
	this.emit('end');
}


// ////////////////////////////////////////////////
// Scripts Tasks
// ///////////////////////////////////////////////

gulp.task('scriptsApi', function() {
  return gulp.src(config.jsConcatFilesApi)
	.pipe(sourcemaps.init())
		.pipe(concat('temp.js'))
		.pipe(uglify())
		.on('error', errorlog)
		.pipe(rename('d3AcnaDane.min.js'))		
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('./js/min/'))

    .pipe(reload({stream:true}));
});

gulp.task('scriptsNavigation', function() {
  return gulp.src(config.jsConcatFilesNavigation)
	.pipe(sourcemaps.init())
		.pipe(concat('temp.js'))
		.pipe(uglify())
		.on('error', errorlog)
		.pipe(rename('navigationAcnaDane.min.js'))		
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('./js/min/'))

    .pipe(reload({stream:true}));
});


// ////////////////////////////////////////////////
// Styles Tasks
// ///////////////////////////////////////////////

gulp.task('styles', function() {
	gulp.src('scss/**/*.scss')
		.pipe(sourcemaps.init())
			.pipe(sass({outputStyle: 'compressed'}))
			.on('error', errorlog)
			.pipe(autoprefixer({
	            browsers: ['last 3 versions'],
	            cascade: false
	        }))	
		.pipe(sourcemaps.write('../maps'))
		.pipe(gulp.dest('css'))
		.pipe(reload({stream:true}));
});


// ////////////////////////////////////////////////
// HTML Tasks
// // /////////////////////////////////////////////

gulp.task('html', function(){
    gulp.src('**/*.html')
    .pipe(reload({stream:true}));
});


// ////////////////////////////////////////////////
// Browser-Sync Tasks
// // /////////////////////////////////////////////

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// task to run build server for testing final app
gulp.task('build:serve', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});


// ////////////////////////////////////////////////
// Build Tasks
// // /////////////////////////////////////////////

// clean out all files and folders from build folder
gulp.task('build:cleanfolder', function (cb) {
	del([
		'./build/**'
	], cb);
});

// task to create build directory of all files
gulp.task('build:copy',function(){
    return gulp.src('./**/*/')
    .pipe(gulp.dest('./build/'));
});

// task to removed unwanted build files
// list all files and directories here that you don't want included
gulp.task('build:remove', function (cb) {
	del(config.buildFilesFoldersRemove, cb);
});

gulp.task('build', ['build:copy', 'build:remove']);


// ////////////////////////////////////////////////
// Watch Tasks
// // /////////////////////////////////////////////

gulp.task ('watch', function(){
	gulp.watch('scss/**/*.scss', ['styles']);
	gulp.watch('js/**/*.js', ['scriptsApi']);
	gulp.watch('js/**/*.js', ['scriptsNavigation']);
  	gulp.watch('**/*.html', ['html']);
});


gulp.task('default', ['scriptsApi','scriptsNavigation', 'styles', 'html', 'browser-sync', 'watch']);




0 个答案:

没有答案