I use gulp for create. I use browser sync for see the preview of my pages. But I can't configure gulp to reload automatically. When I make a change in the browser, I have to reload manually only with jade files. I use and compile CSS to SCSS and this if change automatically...
Which one is my error, why gulp not reload my jade or html files in the preview?
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var autoprefixer = require('gulp-autoprefixer');
var minimifyCss = require('gulp-minify-css');
// JADE
gulp.task('jade', function() {
gulp.src('./jade/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./'))
});
// SASS
gulp.task('sass', function() {
gulp.src('./sass/styles.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true
}))
.pipe(minimifyCss({
keepBreaks: true
}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
// browserSync
gulp.task('default', function() {
browserSync.init({
server: "./"
});
gulp.watch("./sass/styles.scss", ['sass']);
gulp.watch("./jade/*.jade", ['jade']);
gulp.watch("./*.html").on('change', browserSync.reload);
});
You are not including your jade or sass function in your parameters
gulp.task('default', ['sass'], ['jade'], function(){
gulp.watch("./sass/styles.scss", ['sass']);
gulp.watch("./jade/*.jade", ['jade']);
})
gulp default
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.