Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Improving your Gulp Task Pipelines The Development Pipeline in Depth

BRAEDEN PLEIN
BRAEDEN PLEIN
16,234 Points
Posted by BRAEDEN PLEIN
BRAEDEN PLEIN
16,234 Points

Why add the new task ''serve"? Wouldn't it do the same thing if you just ran the task "watchFiles"?

Is it just unnecessary code or was there a distinct purpose for this?

Azriel Garcia
Azriel Garcia
6,881 Points

Exactly what I was thinking but maybe they will add more to that serve task in the following video is my guess

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I would expect the serve task to run a local webserver.

Here's how you can achieve that with another gulp plugin and a couple extra lines of code:

First, install gulp-connect:

npm install --save-dev gulp-connect

Then, require it in our gulpfile.js:

'use strict';

var gulp    = require('gulp'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify'),
    rename  = require('gulp-rename'),
    sass    = require('gulp-sass'),
    maps    = require('gulp-sourcemaps'),
    del     = require('del'),
    connect = require('gulp-connect');

Then, also in gulpfile.js, update our serve task to include a callback function that will start the server (in this case, on port 3000, just for consistency):

gulp.task('serve', ['watchFiles'], function(){
  connect.server({port: 3000});
});

That's it! You'll see the message Server started http://localhost:3000 and you can of course view that in a browser, just like before.

Daniel Breen
Daniel Breen
14,943 Points
Daniel Breen
Daniel Breen
14,943 Points

That's interesting, but it still seems like more work. I use live-server rather than http-server which automatically watches the entire directory for changes.

Is there an advantage to using http-server over live-server?

Also, was it ever explained why to serve to port 3000? If not, what's a good reason?

Note: I should add that I think this is the most well done Treehouse course I've gone through. Great, great job @Huston. I also went through Angular basics. You have a good understanding of what us newbies can comprehend.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I haven't used live-server, but generally if you've ever thought 'this should be easier' with anything in JavaScript, someone has already made a module/plugin for that!

I don't think there'd be any advantage unless there are particular dependencies that affect each.

I think the port 3000 is just an arbitrary choice that had become quite common, as long as you avoid the port numbers used for anything else.