Как вызвать сервер ExpressJs в gulpfile?

0

Okey, поэтому у меня есть функциональный проект с угловым выражением. Я пытаюсь получить работу экспресс-проекта с глотком, но после того, как я начну использовать свой собственный экспресс-сервер с помощью gulp, я не могу получить звонки, пробираясь от db до просмотра и угловой остановки работы.

Что я делаю неправильно? Мой серверный код прослушивает src-код. Должно быть так? или он должен прослушивать gulp-compiled public-code?

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var jshint = require('gulp-jshint');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var environments = require('gulp-environments');
var nodemon = require('gulp-nodemon');


gulp.task('lint', function() {
  return gulp.src('./src/app/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('scripts', function(){
    return gulp.src('./src/**/*.js')
            .pipe(uglify())
            .pipe(concat('vendor.min.js'))
            .pipe(gulp.dest('./public/'));
});

gulp.task('browserify', function() {
    // Grabs the app.js file
    return browserify('./src/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('./public/'));
})

gulp.task('copy', ['browserify','scss'], function() {
    gulp.src(['./src/**/*.html','./src/**/*.css'])
        .pipe(gulp.dest('./public'))
        .pipe(browserSync.stream())
});

gulp.task('scss', function() {
    gulp.src('./src/assets/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./src/assets/stylesheets/'));
});

gulp.task('build',['lint', 'scss', 'copy', 'scripts']);

gulp.task('server', ['build'], function() {
    // configure nodemon
    nodemon({
        // the script to run the app
        script: './server/bin/www',
        // this listens to changes in any of these files/routes and restarts the application
        watch: ["server/bin/www", "server/app.js"],
        ext: 'js'
        // Below i'm using es6 arrow functions but you can remove the arrow and have it a normal .on('restart', function() { // then place your stuff in here }
    }).on('restart', function(){
    gulp.src('./server/bin/www')
      // I've added notify, which displays a message on restart. Was more for me to test so you can remove this
      .pipe(notify('Running the start tasks and stuff'));
  });
});




gulp.task('default', ['server'], function(){
    gulp.watch("./src/**/*.*", ["build"]);
    gulp.watch("./public/**/*.*").on('change', browserSync.reload);
});

Консоль html: Ошибка при сборе: [$ injector: modulerr]

<!DOCTYPE html>
<html ng-app="nodeTodo">
  <head>
    <title>Todo App - with Node + Express + Angular + PostgreSQL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- styles -->
     <script src="../public/main.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="stylesheets/style.css" rel="stylesheet" media="screen">
  </head>
  <body ng-controller="mainController">

    <div class="container">

      <div class="header">
        <h1>Todo App</h1>
        <hr>
        <h1 class="lead">Node + Express + Angular + PostgreSQL</h1>
      </div>

      <div class="todo-form">
        <form>
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="Enter text..." ng-model="formData.text">
          </div>
          <button type="submit" class="btn btn-primary btn-lg btn-block" ng-click="createTodo()">Add Todo</button>
        </form>
      </div>

      <br>

      <div class="todo-list">
        <ul ng-repeat="todo in todoData">
          <li><h3><input class="lead" type="checkbox" ng-click="deleteTodo(todo.id)">&nbsp;{{ todo.text }}</li></h3><hr>
        </ul>
      </div>

    </div>

    <!-- scripts -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>

  </body>
</html>
Теги:
express
gulp

1 ответ

0

Вот как я это делаю, хорошо служил мне месяцами :)

var gulp = require('gulp'),
      nodemon = require('gulp-nodemon'),
      plumber = require('gulp-plumber'),
      livereload = require('gulp-livereload');
    var path = require("path");
    var tsc = require('gulp-typescript');
    gulp

    .task('develop', function () {

      livereload.listen();
      livereload({ start: true })
      nodemon({
           execMap: {
          js: 'node --debug'
        },
        script: 'app.js',
        ext: 'html ts js',
        stdout: false,
        debug:true
      }).on('readable', function () {
        this.stdout.on('data', function (chunk) {
          if(/^Express server listening on port/.test(chunk)){
            livereload.changed(__dirname);
          }
        });
        this.stdout.pipe(process.stdout);
        this.stderr.pipe(process.stderr);
      });
    });

    gulp.task('default', ['develop']);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню