CODEWITHSUNDEEP
javascriptnode.jsexpressgulp
Corey
Corey

Reputation: 45

running gulp & express simultaneously

Set up Gulp, set up node, express. I'm running gulp, it's watching my tasks. Set up express, it's running on port 3001, where Gulp is 3000 by default?

I go to localhost:3000, I see my index.html, I go to localhost:3001 (the express port) and I also see index.html, but without CSS. What is going on here and how can I work with both on one port? Is it possible? Do I just keep gulp and node server running? Very new to js.

Here's files:

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

Upvotes: 1

Views: 2270

Answers (3)

Shanoor
Shanoor

Reputation: 13682

You have to run browser-sync in proxy mode:

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

Now, run server.js first and then gulp, and you'll have only one server running (browser-sync will give you the URL to use).

Upvotes: 1

Supun Wijerathne
Supun Wijerathne

Reputation: 12948

I think https://www.npmjs.com/package/gulp-express is the exact solution for you.

Upvotes: 0

Steven Petryk
Steven Petryk

Reputation: 683

Your express server is serving out of a directory named public, but BrowserSync is serving app. Try renaming public to app in server.js:

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...")
    })

By the way, Gulp is not a server. It doesn't make sense to say it defaults to a port. BrowserSync, a live-reloading server, is being run by Gulp, which is a simple task runner.

Upvotes: 1

Related Questions