我有一个angularjs
的项目。所有环境都设置在具有nodejs
和gulp
依赖关系的bower
下。
我遇到问题:每次更改文件时,浏览器都会重新加载多次。
所以,我认为问题与browsersync
配置有关,我该如何解决?
// ////////////////////////////////////////////////
//
// 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']);