Gulp 重新加载不起作用答案

【问题标题】：Gulp reload doesn't workGulp 重新加载不起作用
【发布时间】：2016-04-25 09:54:47
【问题描述】：

我想在我的工作流程中使用 gulp reload，但我遇到了麻烦。当我在命令行中通过“gulp”命令启动时，我有服务器连接，但是当我进入浏览器时，出现“Cannot GET /” 它是什么，我该如何解决这个问题？请帮忙。

我有下一个 gulpfile.js:

  /**
 * Created by adm on 4/24/2016.
 */
var gulp = require('gulp'),
    rename = require('gulp-rename'),
    minifyCSS = require('gulp-minify-css'),
    notify = require("gulp-notify"),
    livereload = require('gulp-livereload'),
    connect = require('gulp-connect');

/*----------Local Server connect----------*/
gulp.task('connect', function() {
    connect.server({
        root: 'traning_js_skils',
        livereload: true
    });
});

/*----------HTML----------*/
gulp.task('html', function () {
    gulp.src('./src/index.html')
        .pipe(connect.reload());
});

/*----------CSS----------*/
gulp.task('css', function() {
    return gulp.src('css/*.css')
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename('common.min.css'))
        .pipe(gulp.dest('testfiles/'))
        .pipe(livereload());
        /*.pipe(connect.reload());*/
        /*.pipe(notify('Done!'))*/
});

/*----------Watch----------*/
gulp.task('watch', function () {
    livereload();
    gulp.watch('css/*.css', ['css']);
    gulp.watch('index.html', ['html']);
});

gulp.task('default', ['css', 'watch', 'connect']);

这是我的项目结构：

【问题讨论】：

可以给你的项目目录结构截图吗？
当然可以。看上面，我添加了我的产品结构。如果这很重要，我的项目在 angularjs 上工作，并且在我使用节点静态服务器获取 json 数据之前。也许是 node-static 和 gulp connect 之间的一些冲突？
如果您要提供的 index.html 是根目录中的那个，那么我看到的唯一策略就是根目录：'traning_js_skils' Livereload 可能正在搜索目录 traning_js_skils/traning_js_skils？尝试将“./”放在根配置中
非常感谢！您的提示改变了我的情况，错误“Cannot GET /”消失了。我刚开始使用 gulp，这就是为什么我会犯这样的错误。但是当我更改我的 css 文件时，我的索引页面仍然没有重新加载。可能是什么原因？

标签： gulp gulp-livereload gulp-connect

【解决方案1】：

我把完整的答案放在这里：

所以对于根。

如果您的 index.html 文件是主目录中的文件。将根配置设置为 ./

connect.server({
        root: './',
        livereload: true
    });

用于重新加载。

我不使用 livereload 但在文档中我可以看到这个

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

可能是您缺少 .listen()

【讨论】：

是的，真的，它解决了我的问题。非常感谢您的帮助，您对我很有帮助。