browsersync + gulp 不注入 css - 仅重新加载
browsersync + gulp not injecting css - only reloading
我最近开始使用 BrowserSync,我遵循了他们的 gulp guide 并做了一些调整来解决我遇到的一些问题,但是现在虽然它可以工作,但它似乎每次都重新加载页面而不是注入 CSS.
我的 gulp 文件:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
gulp.task('scripts', function() {
return gulp.src([
'js/dev/main/**/*.js',
// We have to set the bootstrap lines separately as some need to go before others
'js/dev/bootstrap/alert.js',
'js/dev/bootstrap/collapse.js',
'js/dev/bootstrap/tooltip.js',
'js/dev/bootstrap/popover.js',
'js/dev/bootstrap/tab.js',
'js/dev/bootstrap/transition.js',
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'));
});
gulp.task('uglify', ['scripts'], function() {
return gulp.src('js/scripts.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('./js'));
});
// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
browserSync.reload();
done();
});
/* Creates the standard version */
gulp.task('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
});
/* Creates the minified version */
gulp.task('css-minify', ['styles'], function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact' // Options: nested, expanded, compact, compressed
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(cleanCSS({
advanced: false,
aggressiveMerging: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'));
});
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "bmmedia.dev",
host: 'bmmedia.dev',
// port: 5000,
browser: "chrome",
});
});
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});
gulp.task('default', ['js-watch', 'css-minify']);
注意我的 watch
任务,这是我最近所做的更改,因为我遇到了指定的问题 , and I solved it with ,但是现在虽然它工作正常,但似乎只是重新加载,而不是注入。
我能做些什么来解决这个问题吗?
编辑:
我刚刚意识到它每次都在重新加载,因为每次有变化时我都是 运行 js-watch
,甚至 .scss
文件,所以我将其更改为:
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
但是现在它不会在 .scss
文件更改时注入或重新加载。
我相信我已经修复了它...
我的watch
任务我改为:
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
然后在我的 styles
任务中,我更改了这一行:
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
至:
.pipe(browserSync.stream());
不确定为什么找不到 CSS 更改,我所知道的是它现在似乎可以工作了。
您也可以尝试只看编译后的输出文件。
Dest/css/styles.css
Dest/js/my.js
对 sass / js 模块的任何更改都会反映在最终的 css / js 输出文件中。浏览器重新加载只会在 css/js 编译完成时触发,而不是在 sass /js 包编译时尝试重新加载。
另外,看看 Gulp-更新的。如果最终输出文件 (dest/css/styles.css) 相对于生成它的文件 (src/sass/**.scss).
这对于图像也非常方便(不需要在每次构建时缩小它们,只有更新时才需要)也可以添加仅在发生更改时才需要执行的任何其他检查。
我最近开始使用 BrowserSync,我遵循了他们的 gulp guide 并做了一些调整来解决我遇到的一些问题,但是现在虽然它可以工作,但它似乎每次都重新加载页面而不是注入 CSS.
我的 gulp 文件:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
gulp.task('scripts', function() {
return gulp.src([
'js/dev/main/**/*.js',
// We have to set the bootstrap lines separately as some need to go before others
'js/dev/bootstrap/alert.js',
'js/dev/bootstrap/collapse.js',
'js/dev/bootstrap/tooltip.js',
'js/dev/bootstrap/popover.js',
'js/dev/bootstrap/tab.js',
'js/dev/bootstrap/transition.js',
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'));
});
gulp.task('uglify', ['scripts'], function() {
return gulp.src('js/scripts.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('./js'));
});
// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
browserSync.reload();
done();
});
/* Creates the standard version */
gulp.task('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
});
/* Creates the minified version */
gulp.task('css-minify', ['styles'], function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact' // Options: nested, expanded, compact, compressed
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(cleanCSS({
advanced: false,
aggressiveMerging: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'));
});
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "bmmedia.dev",
host: 'bmmedia.dev',
// port: 5000,
browser: "chrome",
});
});
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});
gulp.task('default', ['js-watch', 'css-minify']);
注意我的 watch
任务,这是我最近所做的更改,因为我遇到了指定的问题
我能做些什么来解决这个问题吗?
编辑:
我刚刚意识到它每次都在重新加载,因为每次有变化时我都是 运行 js-watch
,甚至 .scss
文件,所以我将其更改为:
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
但是现在它不会在 .scss
文件更改时注入或重新加载。
我相信我已经修复了它...
我的watch
任务我改为:
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
然后在我的 styles
任务中,我更改了这一行:
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
至:
.pipe(browserSync.stream());
不确定为什么找不到 CSS 更改,我所知道的是它现在似乎可以工作了。
您也可以尝试只看编译后的输出文件。
Dest/css/styles.css
Dest/js/my.js
对 sass / js 模块的任何更改都会反映在最终的 css / js 输出文件中。浏览器重新加载只会在 css/js 编译完成时触发,而不是在 sass /js 包编译时尝试重新加载。
另外,看看 Gulp-更新的。如果最终输出文件 (dest/css/styles.css) 相对于生成它的文件 (src/sass/**.scss).
这对于图像也非常方便(不需要在每次构建时缩小它们,只有更新时才需要)也可以添加仅在发生更改时才需要执行的任何其他检查。