Question

我试图弄清楚如何通过Gulp提供我的文件，而不会干扰节点进程。

我正在使用nodemon运行节点，所以我必须执行：nodemon server.js然后它开始运行，我必须自己输入浏览器并输入localhost:3000以查看我的页面正在运行。

这是我的server.js文件的一部分

var express = require('express');
mongoose.connect('localhost'); // LOCAL ENV

var app = express();

app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

我有一个等待连接的MongoDB。

现在在我的gulp文件中我有这个：

var gulp = require('gulp');
var sass = require('gulp-sass');
var csso = require('gulp-csso');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();

var templateCache = require('gulp-angular-templatecache');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  gulp.src('public/stylesheets/style.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(csso())
    .pipe(gulp.dest('public/stylesheets'))
    .pipe(browserSync.stream());
});

gulp.task('compress', function() {
  gulp.src([
    'public/vendor/angular.js',
    'public/vendor/*.js',
    'public/app.js',
    'public/services/*.js',
    'public/controllers/*.js',
    'public/filters/*.js',
    'public/directives/*.js'
  ])
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(gulp.dest('public'));
});

gulp.task('templates', function() {
  gulp.src('public/views/**/*.html')
    .pipe(templateCache({ root: 'views', module: 'MyApp' }))
    .pipe(gulp.dest('public'));
});

gulp.task('watch', function() {
  var reload = browserSync.reload;
  gulp.watch('public/stylesheets/*.scss', ['sass']).on('change', reload);
  gulp.watch(['public/index.html', 'public/views/**/*.html'], ['templates']).on('change', reload);
  gulp.watch(['public/app.js', 'public/**/*.js',
              '!public/app.min.js', '!public/templates.js',
              '!public/vendor'], ['compress']).on('change', reload);
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
  browserSync.init({
      server: "./public",
      port: 3000 // THIS OPENS ON 3001 BECAUSE NODE HAS THAT PORT BUSY
  });
});

gulp.task('default', ['sass', 'compress', 'templates', 'serve', 'watch']);

这是我的Gulpfile.js，当我运行$ gulp时，它会在localhost:3001中打开，因为Node已经将端口3000占用了。

我这样做是因为我希望Gulp管理我文件的更改，然后在有新代码的情况下重新加载浏览器。它正在这样做，每次发生变化时，它都会在端口3001上重新启动，但问题是我无法看到来自页面中数据库的任何内容。如果我更改为localhost:3000，我可以看到来自数据库的所有内容，但如果文件发生更改，我无法重新加载页面。

我做错了什么？

Gulp和Node在不同的端口

0 个答案: