Gulp

What is Gulp?

• Gulp is advertised as streaming build system that does the job of Minification, Compilation, Watcher of File Changes etc and can be compared to grunt.

What are Environment Prerequistes?

• Gulp should be installed Globally using the command npm install gulp -g that we can access the local Glup Files using the Command Line  Commands.
• The Project Directory we are working should have Gulp Configuration File and Gulp installed within [whihc can be done by using the command npm install gulp].

How Gulp Works overall?

    We execute the Project running on Gulp using the command gulp. This would invoke the globally installed gulp and make it to search for the Gulp Configuration File [gulp.js] located locally within Project directory.

   Gulp.js then loads the locally installed gulp to achieve the Gulp tasks configured within.


Sample Gulp File to Live Reload the html files and also to host the files in the Server by invoking the index.html file as the StartUp

1. var gulp = require('gulp');
2. var express = require('express');
3. var lr = require('tiny-lr')();
4. 
   
5. gulp.task('serve',function(){
6.   var app = express();
7.   app.use(require('connect-livereload')());
8.   app.use(express.static(__dirname));
9.   app.listen(4000);
10. });
11. 
    
12. gulp.task('liveReload',function(){
13. lr.listen(35729);
14. });
15. 
    
16. gulp.task('default',['serve','liveReload'], function () {
17.   gulp.watch('*',notifyLivereload);
18.   gulp.watch('*.js',notifyLivereload);
19. });
20. 
    
21. 
    
22. // Notifies livereload of changes detected
23. // by `gulp.watch()`
24. function notifyLivereload(event) {
25. 
    
26.   // `gulp.watch()` events provide an absolute path
27.   // so we need to make it relative to the server root
28.   var fileName = require('path').relative(__dirname, event.path);
29. 
    
30.   lr.changed({
31.     body: {
32.       files: [fileName]
33.     }
34.   });
35. }