Question

我已经设置了我的wordpress网站的本地副本，并且挂钩了Gulp来编译.less，JS等。当我保存我的.php时，浏览器会更新，但是当我保存.less文件时，.css被编译，但浏览器没有更新。

当我在不同的网站上使用同一个gulp文件时，它完全可以正常工作。

任何人都可以告诉我什么可能阻止BrowserSync更新css更改（但html / php更改更新正常），并会影响某些网站，但不会影响其他网站？（我使用的是OSX Yosemite＆amp; Chrome浏览器FYI）。

这是我的gulpfile：

＆＃13;

/* config */
var PROXY_ADDR = 'playitinteractive.dev',
	ASSET_PATH = 'html/wp-content/themes/playitinteractive/assets';
	
var globs = {
	js: [
		ASSET_PATH + '/js/src/**/*.js',
	],
	less: [
		ASSET_PATH + 'css/less/**/*.less',
	],
	files: [
		'**/.htaccess',
		'**/*.+(html|php|jpg|jpeg|gif|png)',
	],
};
var dests = {
	js:   ASSET_PATH + '/js',
	less: ASSET_PATH + '/css',
}

/* includes */
var gulp         = require('gulp'),
	gutil        = require('gulp-util'),
	rename       = require('gulp-rename'),
	
	// watching
	browserSync  = require('browser-sync'),
		
	// js
	concat       = require('gulp-concat'),
	uglify       = require('gulp-uglify'),
	ngAnnotate   = require('gulp-ng-annotate'),
	
	// css
	less         = require('gulp-less'),
	autoprefixer = require('gulp-autoprefixer'),
	minifyCss    = require('gulp-minify-css');


/* tasks */
gulp
	// build
	.task('js', function(){
		return gulp.src(globs.js)
			.pipe(concat('base.js'))
			.pipe(ngAnnotate())
			.pipe(gulp.dest(dests.js))
			
			.pipe(rename({suffix: '.min'}))
			.pipe(uglify())
			.pipe(gulp.dest(dests.js))
			
			.pipe(browserSync.reload({stream:true}));
	})
	.task('less', function(){
		return gulp.src(globs.less.concat(['!' + ASSET_PATH + '/less/**/*.inc.less']))
			.pipe(less())
			.pipe(autoprefixer('last 2 versions'))
			.pipe(minifyCss())
			.pipe(gulp.dest(dests.less))
			
			.pipe(browserSync.reload({stream:true}));
	})
	.task('build', ['js','less'])
	
	
	// watch
	.task('js.watch', ['js'], function(){
		gulp.watch(globs.js, ['js']);
	})
	.task('less.watch', ['less'], function(){
		gulp.watch(globs.less, ['less']);
	})
	.task('watch', ['js.watch','less.watch'], function(){
		browserSync.init({
			files: globs.files,
			proxy: PROXY_ADDR,
			watchOptions: {debounce: 400},
			ghostMode: false,
			notify: false,
			open: !! gutil.env.open, // call `gulp --open` to start gulp and also open a new browser window
		});
	})
	
	// default
	.task('default', ['watch'])

＆＃13;

{
  "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"
  }
}

＆＃13;

Answer 1

发现问题 - gulp在观看.css / .less更改时没有重新加载页面（它只是实时更新特定文件） - 在我的主题文件夹styles.css中加载了我的实际.css

@import url（“assets / css / base.css”）;

由于页面没有刷新所有文件，因此@import从未将新的base.css加载到自身。

为了解决这个问题，我添加了第二个gulp-concat任务来手动将base.css添加到文件而不是@import规则（第二个concat不会缩小，从而保留主题信息）。

Gulp中的BrowserSync正在重新加载浏览器，但实时流css不会更新浏览器

1 个答案: