2015-01-20 2 views
2

Я установил локальную копию своего сайта Wordpress и подключился к Gulp для компиляции .less, JS и т. Д. Когда я сэкономлю свое. php обновляет браузер, но когда я сохраняю файл .less, компиляция .css компилируется, но браузер не обновляется.BrowserSync в Gulp перезагружает браузер, но в прямом эфире css не обновляет браузер

Когда я использую этот же файл gulp на другом сайте, все работает отлично.

Может ли кто-нибудь сказать мне, что может блокировать BrowserSync от обновления css изменений (но html/php меняет обновление в порядке), и повлияет на некоторые сайты, но не на другие? (Я использую OSX Yosemite & Chrome браузера FYI).

Вот мой gulpfile:

/* config */ 
 
var PROXY_ADDR = 'playitinteractive.dev', 
 
\t ASSET_PATH = 'html/wp-content/themes/playitinteractive/assets'; 
 
\t 
 
var globs = { 
 
\t js: [ 
 
\t \t ASSET_PATH + '/js/src/**/*.js', 
 
\t ], 
 
\t less: [ 
 
\t \t ASSET_PATH + 'css/less/**/*.less', 
 
\t ], 
 
\t files: [ 
 
\t \t '**/.htaccess', 
 
\t \t '**/*.+(html|php|jpg|jpeg|gif|png)', 
 
\t ], 
 
}; 
 
var dests = { 
 
\t js: ASSET_PATH + '/js', 
 
\t less: ASSET_PATH + '/css', 
 
} 
 

 
/* includes */ 
 
var gulp   = require('gulp'), 
 
\t gutil  = require('gulp-util'), 
 
\t rename  = require('gulp-rename'), 
 
\t 
 
\t // watching 
 
\t browserSync = require('browser-sync'), 
 
\t \t 
 
\t // js 
 
\t concat  = require('gulp-concat'), 
 
\t uglify  = require('gulp-uglify'), 
 
\t ngAnnotate = require('gulp-ng-annotate'), 
 
\t 
 
\t // css 
 
\t less   = require('gulp-less'), 
 
\t autoprefixer = require('gulp-autoprefixer'), 
 
\t minifyCss = require('gulp-minify-css'); 
 

 

 
/* tasks */ 
 
gulp 
 
\t // build 
 
\t .task('js', function(){ 
 
\t \t return gulp.src(globs.js) 
 
\t \t \t .pipe(concat('base.js')) 
 
\t \t \t .pipe(ngAnnotate()) 
 
\t \t \t .pipe(gulp.dest(dests.js)) 
 
\t \t \t 
 
\t \t \t .pipe(rename({suffix: '.min'})) 
 
\t \t \t .pipe(uglify()) 
 
\t \t \t .pipe(gulp.dest(dests.js)) 
 
\t \t \t 
 
\t \t \t .pipe(browserSync.reload({stream:true})); 
 
\t }) 
 
\t .task('less', function(){ 
 
\t \t return gulp.src(globs.less.concat(['!' + ASSET_PATH + '/less/**/*.inc.less'])) 
 
\t \t \t .pipe(less()) 
 
\t \t \t .pipe(autoprefixer('last 2 versions')) 
 
\t \t \t .pipe(minifyCss()) 
 
\t \t \t .pipe(gulp.dest(dests.less)) 
 
\t \t \t 
 
\t \t \t .pipe(browserSync.reload({stream:true})); 
 
\t }) 
 
\t .task('build', ['js','less']) 
 
\t 
 
\t 
 
\t // watch 
 
\t .task('js.watch', ['js'], function(){ 
 
\t \t gulp.watch(globs.js, ['js']); 
 
\t }) 
 
\t .task('less.watch', ['less'], function(){ 
 
\t \t gulp.watch(globs.less, ['less']); 
 
\t }) 
 
\t .task('watch', ['js.watch','less.watch'], function(){ 
 
\t \t browserSync.init({ 
 
\t \t \t files: globs.files, 
 
\t \t \t proxy: PROXY_ADDR, 
 
\t \t \t watchOptions: {debounce: 400}, 
 
\t \t \t ghostMode: false, 
 
\t \t \t notify: false, 
 
\t \t \t open: !! gutil.env.open, // call `gulp --open` to start gulp and also open a new browser window 
 
\t \t }); 
 
\t }) 
 
\t 
 
\t // default 
 
\t .task('default', ['watch']) 
 
\t

{ 
 
    "devDependencies": { 
 
    "browser-sync": "^1.3.0", 
 
    "gulp": "^3.8.6", 
 
    "gulp-autoprefixer": "0.0.8", 
 
    "gulp-concat": "^2.3.4", 
 
    "gulp-less": "^1.3.3", 
 
    "gulp-minify-css": "^0.3.7", 
 
    "gulp-ng-annotate": "^0.2.0", 
 
    "gulp-rename": "^1.2.0", 
 
    "gulp-uglify": "^0.3.1", 
 
    "gulp-util": "^3.0.0" 
 
    } 
 
}

+0

Вы можете проверить, какова фактическая версия браузера-синхронизации, которую вы используете? Последний - 1.9.1. и это документы не отображают синтаксис 'browserSync.init'. – Heikki

+0

http://www.browsersync.io/docs/gulp/ – Heikki

ответ

1

Найденные проблемный глоток не перезагружать страницу при просмотре .css/.less изменения (это только обновления в реальном времени, что конкретный файл) - в моей основной папке темы styles.css загрузил мой фактический .css wit h

@import url ("assets/css/base.css");

Поскольку страница не обновляет все файлы, этот @import никогда не загружал новый base.css в себя.

Чтобы исправить это, я добавил вторую задачу gulp-concat, чтобы вручную добавить base.css в файл вместо правила @import (второй concat не уменьшает, тем самым сохраняя информацию о теме).

Смежные вопросы