[EDIT: đã được giải quyết!]Khởi động máy chủ BrowserSync rất chậm với Gulp
Xem câu trả lời của tôi bên dưới.
[>>gốc câu hỏi sau < <]
Tôi đang sử dụng BrowserSync trong chế độ máy chủ (sử dụng nó được xây dựng trong máy chủ tĩnh) với GulpJS trên một dự án địa phương, và tất cả mọi thứ dường như được làm việc một cách chính xác ngoại trừ máy chủ BrowserSync rất chậm để khởi động. Bản thân BrowserSync dường như khởi chạy ngay lập tức khi tôi chạy Gulp, nhưng phải mất khoảng 4 đến 5 phút (và đôi khi nhiều hơn) để máy chủ khởi động và để nó trả về các URL truy cập. Trong thời gian này, mọi thứ vẫn tiếp tục chạy và BrowserSync trả lời các cuộc gọi tải lại() và như vậy, nhưng truy cập không có sẵn thông qua các URL thông thường (trong trường hợp này là localhost: 3000 và localhost: 3001). Khi các URL truy cập được trả lại, máy chủ có vẻ đã bắt đầu và việc làm mới trang của BrowserSync hoạt động tốt và thực sự rất nhanh.
Tôi đã thử một số cấu hình khác nhau của gulpfile.js, thử các cách khác nhau để khởi chạy BrowserSync, các cách tiếp cận khác nhau để gọi phương thức stream() và reload() (bao gồm thử công thức Gulp/SASS cơ bản của BrowserSync), và các số cổng khác nhau, nhưng tất cả các cấu hình đều có cùng một vấn đề. Tôi thậm chí đã thử vô hiệu hóa tường lửa và phần mềm AV (Avast) của tôi, nhưng không có gì.
Tôi đang chạy Windows 8.1, nếu điều đó có liên quan. BrowserSync được cài đặt mới cục bộ cho dự án thông qua NPM và các cài đặt cục bộ mới cho các thư mục khác có cùng một vấn đề. NPM, Ruby, Gulp và tất cả các mô-đun dường như được cập nhật. Đối với những gì nó có giá trị, tất cả các kinh nghiệm khác của tôi với Ruby, Gulp, và Node.js đã được rất trơn tru và không có vấn đề.
Tôi không thể tìm thấy bất kỳ bài đăng nào khác đề cập đến vấn đề này và bắt đầu nghĩ đây là hành vi bình thường. Điều này có bình thường không, và nếu không, có ai có ý tưởng gì để thử không? Sự chậm trễ này không phải là kết thúc của thế giới kể từ khi máy chủ BrowserSync luôn bắt đầu (cuối cùng), nhưng nó vẫn còn là một hạn chế trong công việc của tôi mà tôi muốn sửa hơn là chỉ giải quyết.
Cuối cùng, đây là gulpfile.js tôi: /* File: gulpfile.js */
var gulp = require('gulp'),
gutil = require('gulp-util');
jshint = require('gulp-jshint');
sass = require('gulp-sass');
concat = require('gulp-concat');
uglify = require('gulp-uglify');
sourcemaps = require('gulp-sourcemaps');
imagemin = require('gulp-imagemin');
browserSync = require('browser-sync').create();
gulp.task('default', ['watch'], browserSync.reload);
// JSHint
gulp.task('jshint', function() {
return gulp.src('src/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Build JS
gulp.task('build-js', function() {
return gulp.src('src/js/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/www/js/core'));
});
// Build CSS
gulp.task('build-css', function() {
return gulp.src('src/sass/**/*.{sass,scss}')
.pipe(sourcemaps.init())
.pipe(sass()).on('error', handleError)
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('public/www/css/core'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
// ImageMin
gulp.task('imagemin', function() {
return gulp.src('src/img/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('public/www/img'));
});
// Handle errors
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
// Watch function
gulp.task('watch', function() {
browserSync.init({
server: "./public/www",
//port: 3002
});
gulp.watch('src/js/**/*.js', ['jshint']);
gulp.watch('src/sass/**/*.{sass,scss}', ['build-css']);
gulp.watch('src/js/**/*.js', ['build-js']);
gulp.watch('src/img/*', ['imagemin']);
gulp.watch("public/www/css/**/*.css").on('change', browserSync.reload);
})