Server in Gulp and Grunt

Question

I’ve been doing some research, but I don’t think I’m asking the right questions. I want to use Gulp instead of Grunt but how do I run a "Grunt server" using Gulp? Because Gulp’s watch has nothing to do with using a certain access port?

My problem with Grunt is configuration. It’s impossible to make it work I’ve given up. Gulp runs nice but I can’t find this command. Actually, I don’t even know if he exists.. Can someone take that question away from me?

Answer 1

Yes, the method watch of Gulp tells it to watch the changes that occur in the files or directories passed for it to perform a certain task when there is.

The command grunt server actually performs a task with the name server which is available through some plugin, usually the Grunt-contrib-connect which is used for that purpose.

A plugin equivalent to it in Gulp would be the Gulp-connect. To use it you need to have the Gulp CLI installed globally and also installed locally in your project directory and also the plugin.

To do this run the command inside the folder of your project (after installing Gulp globally) :

npm install --save-dev gulp gulp-connect

Then just create the file gulpfile.js. I’ll assume you already have your file package.json created, if do not use the command npm init and follow the instructions given by him to do so.

In your file gulpefile.js just call the plugin using the require nodejs and create the task responsible for starting the server by following the plugin documentation:

var gulp    = require('gulp'), // Faz a chamada do gulp
connect = require('gulp-connect'); // Faz a chamada do plugin gulp-connect responsável por iniciar o servidor

gulp.task('server', function() {  // Criamos uma tarefa chamada 'server' responsável por iniciar o servidor na porta 8888
  connect.server({
    port: 8888 // A porta onde o servidor estará disponível 
  });
});

gulp.task('default', ['server']); // Aqui temos a terefa padrão que é executada ao rodar o comando gulp no terminal

Then just run the command gulp in the terminal inside the directory of your project and it will perform the tasks, in this case to start the server.

In my example folder I created a file index.html with a simple message to really know if the server is working or not, and as expected you can see running in the following image:

You can read the plugin documentation for more details and other functions that it can perform such as Livereload.