Gulp-livereload， -webserver and -embedlr.如何将它们一起使用

Question

我试图了解如何在这些有用且流行的插件中使用gulp。我有：

• 在本地主机上运行的 go（lang） 服务器：8000
• 应用程序文件夹下的静态/本地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 的打开标签页）上重新加载
• 如果不需要使用，那就太好了：
  • 实时加载铬插件
  • ExpressJS框架
• 重新加载HTML页面，如果它直接打开就像没有服务器的文件一样

我已经读到可以通过使用gulp-embedlr和gulp-webserver来实现这一点。如果是这样，该怎么做？

Answer 1

好的，我找到的最佳解决方案是使用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/