我尝试了解如何将 gulp 与这些有用且流行的插件一起使用。我有的有:
- 在 localhost:8000 上运行 go(lang) 服务器
- app文件夹下的静态/本地html文件,服务器使用它们来形成页面
- 同目录下的scss文件,转成css后自动加上前缀
这是我的 gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload');
// "./" - it's "app" directory
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(watch('./*.scss'))
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(gulp.dest('./'));
});
所以我需要的是:
- 监视 html、css/scss 文件的更改并在 localhost:8000(Chrome 的打开选项卡)上重新加载
- 如果不需要使用那就太好了:
- livereload chrome 插件
- expressjs框架
- 如果直接打开html页面,则重新加载,就像没有服务器的文件一样
我读到可以通过使用gulp-embedlr和gulp-webserver来实现这一点。如果可以,该怎么做?
最佳答案
好吧,我找到的最好的解决方案是使用 Gulp + BrowserSync!这是一个很好的解决方案。
这是我的gulpfile.js的代码:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('browserSync', function() {
browserSync({
//logConnections: false,
//logFileChanges: false,
notify: false,
open: false,
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('watch', function() {
gulp.watch('./css/*.scss', ['sass']);
gulp.watch('./*.html', reload);
});
gulp.task('default', ['watch', 'sass', 'browserSync']);
解释上面的代码没有任何意义。只需阅读以下内容:http://www.browsersync.io/docs/gulp/
关于javascript - Gulp-livereload、-webserver 和 -embedlr。如何一起使用它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28202389/