[英]Gulp Live Reload Not Working
I am having issues trying to get LiveReload working with Gulp Connect plugin. 我在尝试使LiveReload与Gulp Connect插件配合使用时遇到问题。
Below is my gulpfile.js 下面是我的gulpfile.js
I have my html files in same directory as gulpfile.js and all sass files are imported into /sass/styles.scss from same folder (smacss) and other partial files in /sass/modules/*.scss 我的html文件与gulpfile.js位于同一目录中,所有sass文件都从同一文件夹(smacss)导入到/sass/styles.scss中,而其他文件则位于/sass/modules/*.scss中
Help appreciated 感谢帮助
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
gulp.task('connect', function(){
connect.server({
root: '.',
livereload: true
});
});
// keeps gulp from crashing for scss errors
gulp.task('sass', function () {
return gulp.src('./sass/*.scss')
.pipe(sass({ errLogToConsole: true }))
.pipe(gulp.dest('./css'));
});
gulp.task('livereload', function (){
gulp.src('.')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('.', ['livereload']);
});
gulp.task('default', ['connect', 'watch', 'sass']);
Not sure if your root path is working here. 不知道您的根路径是否在这里工作。 Can you try
root: './'
or just root: '/'
maybe ? 您可以尝试使用
root: './'
还是仅使用root: '/'
?
And the gulp.watch
and gulp.src
might need files path instead of directory path. 而且
gulp.watch
和gulp.src
可能需要文件路径而不是目录路径。 Can you try gulp.src('./*')
and gulp.watch('./*')
maybe ? 您可以尝试
gulp.src('./*')
和gulp.watch('./*')
吗?
This ended up working for me: 最终为我工作:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
// POST CSS
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var connect = require('gulp-connect');
gulp.task('myStyles', function () {
var processors = [
cssnext()
];
gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: '../sass'
}))
.pipe(gulp.dest('css'))
.pipe(connect.reload());
});
gulp.task('connect', function() {
connect.server({
livereload: true
});
});
gulp.task('watchMyStyles', function() {
gulp.watch('sass/*.scss', ['myStyles']);
});
gulp.task('default', ['watchMyStyles', 'connect']);
gulp.task('server', [ 'connect']);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.