Question

设置Gulp，设置节点，表达。我正在跑步，看着我的任务。设置快递，它在端口3001上运行，Gulp默认为3000？

我去localhost：3000，我看到我的index.html，我去localhost：3001（快递端口），我也看到index.html，但没有CSS。这里发生了什么，我如何在一个端口上同时使用它们？可能吗？我只是保持gulp和节点服务器运行吗？非常新的js。

这是文件：

的package.json

{
  "name": "hour-hour",
  "version": "0.0.1",
  "private": true,
  "description": "Find the best local happy hours and drink specials near you.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Corey Maret",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.12.3",
    "del": "^2.2.0",
    "express": "^4.13.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "gulp-uglify": "^1.5.3",
    "jshint": "^2.9.2"
  },
  "dependencies": {
    "express": "^4.13.4",
    "express-handlebars": "^3.0.0",
    "gulp-plumber": "^1.1.0"
  }
}

server.js

var express = require('express'),
    app = express();
var router = express.Router();

    app.use(express.static('public'));
    app.get('/', function (req, res) {
        res.sendfile(__dirname + '/index.html');
    });

    app.listen(3001, function() {
        console.log('I\'m Listening...')
    })

gulpfile

/* Required */

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');

/* Scripts Task */

gulp.task('scripts', function(){
    gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
    .pipe(plumber())
    .pipe(rename({suffix:'.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'))
    .pipe(reload({stream:true}));
});

/* Sass Task */
gulp.task('sass', function(){
    return gulp.src('app/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('app/css'))
    .pipe(reload({stream:true}));
});

/* HTML Task */

gulp.task('html', function(){
    gulp.src('app/**/*.html')
    .pipe(plumber())
    .pipe(reload({stream:true}));
});

/* Browser-Sync Task */

gulp.task('browser-sync', function(){
    browserSync.init({
        server:{
            baseDir: "./app/"
        }
    });
});

/* Watch Task */

gulp.task('watch', function(){
    gulp.watch('app/js/**/*.js', ['scripts']);
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/**/*.html', ['html']);
})

/* Default */

gulp.task('default', ['scripts', 'sass', 'html', 'browser-sync', 'watch']);

Answer 1

您必须在proxy mode中运行browser-sync：

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "localhost:3001"
    });
});

现在，首先运行server.js然后gulp，并且您只运行一个服务器（浏览器同步将为您提供要使用的URL）。

Answer 2

您的快速服务器服务于名为public的目录，但BrowserSync正在服务app。尝试在server.js中将public重命名为app：

var express = require('express'),
    app = express();
var router = express.Router();

    app.use(express.static('app'));
    app.get('/', function (req, res) {
        res.sendfile(__dirname + '/index.html');
    });

    app.listen(3001, function() {
        console.log("I'm Listening...")
    })

顺便说一下，Gulp 不是服务器。说默认为端口是没有意义的。 BrowserSync是一个实时重装服务器，由Gulp运营，这是一个简单的任务运行。

Answer 3

我认为https://www.npmjs.com/package/gulp-express是您的确切解决方案。

跑步和吞咽同时表达

3 个答案: