[英]Gulp-sass and Browser Sync
I am not sure if the problem is browser-sync but that would be my best bet. 我不确定问题是否与浏览器同步,但这是我最好的选择。 My problem is I am using gulp to automate my workflow for the first time.
我的问题是我第一次使用gulp来自动化我的工作流程。 And when I "gulp things" it runs it opens a new webpage with my project like it should, but when I change anything in my SASS file it does not updates it, even if I hit the refresh key, the only way for me to refresh it is to re-gulp everything.
当我“吞噬”它运行时,它会像我应有的项目一样打开一个新网页,但是当我更改SASS文件中的任何内容时,即使我按了刷新键,它也不会更新它,这是我的唯一方法刷新它是重新吞噬一切。
I have all the dependecies updated. 我已经更新了所有的依赖。 I am using Jekyll also.
我也在使用Jekyll。 And some other gulp-plugins.
以及其他一些gulp插件。
Heres my gulpfile.js: 这是我的gulpfile.js:
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
cp = require('child_process'),
jade = require('gulp-jade'),
bourbon = require('bourbon').includePaths;
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll";
return cp.spawn(pl, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'js', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: [bourbon],
onError: browserSync.notify
}).on('error', sass.logError))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}));
});
/**
* Compile Jade
*/
gulp.task('jade', function() {
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
});
/*
** JS Task
*/
gulp.task('js', function() {
return gulp.src('assets/js/common.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('common.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(gulp.dest('_site/js'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
where are your sass files? 你的sass文件在哪里?
the bit at the bottom - 'watch' is probably where the problem is. 底部的位-“手表”可能是问题所在。
I think you need to add where your sass folder is. 我认为您需要添加sass文件夹所在的位置。 Assuming it is _sass then maybe adding it to the 3rd gulp.watch line like this would work.
假设它是_sass,则可以像这样将其添加到gulp.watch的第三行。
gulp.watch(['*.html','_sass/*', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
This code sets up your watches. 此代码设置您的手表。 But only the js changes are set to notify browser sync:
但是,仅将js更改设置为通知浏览器同步:
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
Tell gulp watch to notify browser sync on sass change: 告诉gulp watch在sass更改时通知浏览器同步:
gulp.watch('assets/css/**/*.sass', ['sass']).on("change", browserSync.reload);
But really you want to run 'sass' on sass changes, and then notify browserSync on css changes: 但实际上您想对sass更改运行“ sass”,然后在css更改时通知browserSync:
gulp.watch('assets/css/**/*.css').on("change", browserSync.reload);
gulp.watch('assets/css/**/*.sass', ['sass'])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.