gulp - Gulp Serve - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
What is Serve in Gulp?
- Gulp Serve provide connect-server functionality using connect.static method
- Gulp Serve a folder over HTTP and reload the page when the change occurs
- Gulp Serve mechanism works even if the browser does not support WebSockets
- Gulp Serve can capture console output from the client-side and is transmitted to the back-end for display.
- Gulp Serve supports CSS injection and the proxy requests are arriving at certain URLs to other servers.
Install
- There is a syntax which is used for the installation of the Server in Gulp
Syntax:
npm i --save-dev gulp-serve
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Methods of Serve in Gulp
There are four methods to compile the files while using Serve in Gulp and they are
Method 1:
var gulp = require('gulp');
var serve = require('gulp-serve');
gulp.task('serve', serve('public'));
gulp.task('serve-build', serve(['public', 'build']));
gulp.task('serve-prod', serve({
root: ['public', 'build'],
port: 80,
middleware: function(req, res) {
// custom optional middleware
}
}));
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- This method is done with HTTPS enabled which is done using built-in key and certificate for localhost
Method 2:
var gulp = require('gulp');
var serve = require('gulp-serve');
gulp.task('serve', serve('public'));
gulp.task('serve-build', serve(['public', 'build']));
gulp.task('serve-prod', serve({
root: ['public', 'build'],
port: 443,
https: true,
middleware: function(req, res) {
}
}));
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- This method is Serve with the own script file
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Method 3:
gulp.task('serve', function() {
var server = gls.new('myapp.js');
serve.start();
var serve = gls.new(['--harmony', 'myapp.js']);
serve.start();
gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {
serve.notify.apply(server, [file]);
});
gulp.watch('myapp.js', server.start.bind(server)); //restart my server
gulp.watch('myapp.js', function() {
serve.start.bind(server)()
});
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- The method is done to custom serve with gls
Method 4:
gulp.task('serve', function() {
var serve = gls([gls.script, 'static', 8000]);
serve.start();
var serve = gls('myapp.js', undefined, 12345);
var promise = server.start();
promise.then(function(result) {
//log, exit, re-start, etc...
});
var serve = gls('myapp.coffee');
serve.start('node_modules/coffee-script/bin/coffee');
gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {
serve.notify.apply(serve, [file]);
});
gulp.watch('myapp.js', serve.start.bind(server));
gulp.watch('myapp.js', function() {
serve.start.bind(server)()
});
});