Gulp-livereload、-webserver 和 -embedlr。如何一起使用它们？答案

【问题标题】：Gulp-livereload, -webserver and -embedlr. How to use them together?Gulp-livereload、-webserver 和 -embedlr。如何一起使用它们？
【发布时间】：2015-01-28 21:06:19
【问题描述】：

我试图了解如何将 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 来实现这一点。如果有，该怎么做？

【问题讨论】：

标签： javascript gulp livereload gulp-watch gulp-livereload

【解决方案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/

【讨论】：