Javascript 吞下livereload、-webserver和-EmbeddelR。如何将它们一起使用?
我试图了解如何将gulp与这些有用且流行的插件一起使用。以下是我所拥有的:Javascript 吞下livereload、-webserver和-EmbeddelR。如何将它们一起使用?,javascript,gulp,livereload,gulp-watch,gulp-livereload,Javascript,Gulp,Livereload,Gulp Watch,Gulp Livereload,我试图了解如何将gulp与这些有用且流行的插件一起使用。以下是我所拥有的: 本地主机上运行的go(lang)服务器:8000 app文件夹下的静态/本地html文件,服务器用于形成页面 同一目录下的scss文件,这些文件转换为css,然后自动刷新 这是我的gulpfile.js: var gulp = require('gulp'), sass = require('gulp-sass'), watch = require('gulp-watch'), autopre
- 本地主机上运行的go(lang)服务器:8000
- app文件夹下的静态/本地html文件,服务器用于形成页面
- 同一目录下的scss文件,这些文件转换为css,然后自动刷新
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文件的更改,并在本地主机上重新加载:8000(chrome的“打开”选项卡)
- 如果不需要使用,那就太好了:
- livereload chrome插件
- expressjs框架
- 重新加载html页面,如果它直接打开,就像没有服务器的文件一样
我已经读到,通过使用gulp embeddelr和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']);
解释上面的代码没有意义。请阅读以下内容: