Невозможно использовать gulp (с gulp-connect-php и gulp-browser-sync) с несколькими проектами
Я недавно начал использовать gulp и у меня хороший рабочий процесс, но когда я добавлял gulpfile в новый проект, каждый раз, когда я запускаю gulp
из исходного каталога проекта, он обслуживает самый новый проект, и я понятия не имею, что я сделал.
Это должно быть соответствующее содержимое моего файла gulpfile:
var gulp = require('gulp');
/* etc. */
gulp.task('default', function(callback) {
runSequence(['connect-sync'],
callback
)
});
gulp.task('connect-sync', function() {
connect.server({
base: 'app' /* tried ./app */
}, function (){
browserSync({
injectChanges: true,
proxy: '127.0.0.1:8000'
});
});
gulp.start('sass');
gulp.start('watch');
});
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sourcemaps.init())
.pipe(sass()) // Passes it through a gulp-sass
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('app/css')) // Outputs it in the css folder
.pipe(browserSync.stream({match: '**/*.css'}));
});
// Watchers
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/css/**/*.css', ['css']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/*.php', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('css', function() {
return gulp.src('app/css/**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
Если я изменю proxy
вариант что-то вроде proxy: '127.0.0.1:4000
процесс не завершается и просто останавливается:
[14:02:41] Using gulpfile ~/original_project/gulpfile.js
[14:02:41] Starting 'default'...
[14:02:41] Starting 'connect-sync'...
[14:02:41] Starting 'sass'...
[14:02:41] Starting 'watch'...
[14:02:41] Finished 'watch' after 27 ms
[14:02:41] Finished 'connect-sync' after 52 ms
[14:02:41] Finished 'default' after 54 ms
[Tue Apr 12 14:02:42 2016] Failed to listen on 127.0.0.1:8000 (reason: Address already in use)
[Tue Apr 12 14:02:42 2016] 127.0.0.1:53340 [200]: /
[14:02:42] Finished 'sass' after 287 ms
[14:02:42] Starting 'css'...
[BS] [info] Proxying: http://127.0.0.1:4000
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://10.180.90.37:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://10.180.90.37:3001
-------------------------------------
[BS] 7 files changed (bootstrap.min.css, font-awesome.min.css, main.css, normalize.css, pe-icon-7-stroke.css, responsive.css, style.css)
[14:02:42] Finished 'css' after 568 ms
Я не уверен, что что-то не так, но буквально единственное изменение - попытка выбрать другой порт. Я просто подумал, что задача автоматически выберет доступный порт, если тот в конфигурации используется, но я понятия не имею, как теперь использовать gulp с несколькими проектами.
В моем файле hosts нет настройки vhost для порта 8000 или чего-либо другого, что могло бы помешать, поэтому не должно быть никаких конфликтов.
Документы Browsersync говорят Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.
поэтому я не уверен, почему мои существующие настройки когда-либо работали для любого проекта.
ОБНОВИТЬ
Я еще раз взглянул на документы gulp-connect-php и попробовал вот это:
gulp.task('connect-sync', function() {
connect.server({
base: 'app',
port: 4000
}, function (){
browserSync({
injectChanges: true,
proxy: '127.0.0.1:4000'
});
});
gulp.start('sass');
gulp.start('watch');
});
но я бы предпочел избегать жесткого кодирования портов, если это возможно.
Изменение любого из sass теперь внедряет и перезагружает страницу, а не просто впрыскивает, CSS все еще, кажется, впрыскивает нормально без перезагрузки.