gulp-express не работает livereload

javascript node.js express gulp

80 просмотра

1 ответ

4432 Репутация автора

Следуя части использования спецификаций gulp-express, я пытаюсь настроить сервер экспресс-разработки с livereload. У меня есть отдельные задачи, которые делают uglification javascript, преобразовывают scss в css и минимизируют html, поэтому мне нужно только запустить сервер из моей папки dist.

Пока все работает, кроме livereload (браузер не перезагружается при изменениях css).

Мое глоточное задание:

gulp.task('server', function() {
    server.run(['main.js'],[],[1337]);
    gulp.watch(['/dist/**/*.html'], server.notify);
    gulp.watch(['/dist/**/*.css'], server.notify);
    gulp.watch(['/dist/**/*.js'], server.notify);
    gulp.watch(['/dist/assets/images/*.*'], server.notify);
});

main.js:

// packages
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
var path = require('path');

//app configuration
    // body parser
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    //CORS requests
    app.use(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
        next();
    });
    //log all requests to console
    app.use(morgan('dev'));

app.use(express.static(__dirname + '/dist'));
//catchall route
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

//start the server
app.listen(1337);
console.log('Running on port 1337!');

При запуске сервера gulp я получаю следующее сообщение в консоли:

livereload [tiny-lr] прослушивает 35729 ... Запуск через порт 1337!

Я могу загрузить страницу в браузере, но она не будет автоматически обновляться при изменении кода.

Что я делаю неправильно?

Автор: Miha Šušteršič Источник Размещён: 19.07.2016 08:46

Ответы (1)


0 плюса

409 Репутация автора

Вы в пути, чтобы решить свою проблему, я знаю, что этому посту уже 9 месяцев, но если он кому-нибудь пригодится, я опубликую решение, оно работает для меня, и у меня возникла та же проблема, что и у вас, это было мое решение :

gulp.task('webserver', function() {
    var server = gls(['app.js','public', 3000], undefined, {});
    server.start();

  //Watch files
  gulp.watch([paths.images], function (file) {
      gulp.start('custom-images');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.scripts], function (file) {
     gulp.start('custom-js');
     server.notify.apply(server, [file]);
  });
  gulp.watch([paths.custom_styles], function (file) {
    gulp.start('custom-styles');
    server.notify.apply(server, [file]);
  });
  gulp.watch([paths.templates], function (file) {
      gulp.start('custom-templates');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.index], function (file) {
      gulp.start('usemin');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.build_index], function (file) {
      gulp.start('convert-index');
      server.notify.apply(server, [file]);
  });
});

Как вы видите, проблема в том, насколько я понимаю, что вам нужно передать функцию обратного вызова в gulp.watch () и затем вызвать server.notify.apply (server, [file]) , обратите внимание, что вы передаете сервер и файл, который вы изменили, я полагаю, это потому, что вам нужно сообщить liveReload, что это файл, который вы изменили. Надеюсь, это поможет, ура. Зигфрид

Я только что нашел это, и я думаю, что это тоже отличное решение: https://stackoverflow.com/a/27488331/4613549

Автор: sigfried Размещён: 08.05.2017 10:00
Вопросы из категории :
32x32