Gulp 大口browsersync sass partials
我有以下问题,不知道我的gulpfile出了什么问题。一切正常,正在编译我的sass文件,在更改某些内容时刷新浏览器。 但是,如果我添加一个新的部分文件并将其导入my_base.scss,browsersync只会识别该部分中的更改,而不会编译整个sass文件&重新加载浏览器。有人知道如何解决这个问题吗?我想不出一个好的解决办法。 谢谢 这是我的gulpfile.jsGulp 大口browsersync sass partials,gulp,gulp-watch,browser-sync,gulp-sass,gulp-browser-sync,Gulp,Gulp Watch,Browser Sync,Gulp Sass,Gulp Browser Sync,我有以下问题,不知道我的gulpfile出了什么问题。一切正常,正在编译我的sass文件,在更改某些内容时刷新浏览器。 但是,如果我添加一个新的部分文件并将其导入my_base.scss,browsersync只会识别该部分中的更改,而不会编译整个sass文件&重新加载浏览器。有人知道如何解决这个问题吗?我想不出一个好的解决办法。 谢谢 这是我的gulpfile.js /*=============================================>>>>
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);
您好,您确定wather看到了新部分的更改吗?因为GULP手表不考虑新的文件,至少这就是我所知道的感谢您的答复!陛下如何确保gulp watch能够检测到新文件?有什么解决办法吗?谢谢!:)