Question

Okey所以我有一个功能性的angular-expressjs项目。我试着用gulp来快速完成项目工作，但是在我开始使用我自己的快速服务器之后我就无法通过数据从谷视频到视图并且角度停止工作。

我做错了什么？我的服务器代码监听src代码。应该这样吗？还是应该听gulp编译的公共代码？

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 console：未捕获错误：[$ 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>

Answer 1

我就是这样做的，几个月来我一直很好:)

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']);

如何调用ExpressJs服务器到gulpfile？

1 个答案: