gulp-nodemon 和 gulp-livereload 配置

  一、gulp 安装

    1. 全局安装:

Shell代码  

1. npm install -g gulp  

    2. 安装在项目开发环境:

Shell代码  

1. npm install gulp --save-dev  

   

    二、gulp-nodemon 和 gulp-livereload 安装

    gulp-nodemon 是重启服务器的插件。

    gulp-livereload 后端控制前端同步刷新，不过需要依赖 chrome 插件 LiveReload

 

    安装:

Shell代码  

1. npm install gulp-nodemon gulp-livereload --save-dev  

    为了能让服务器可以控制 chrome 自动刷新，需要安装 LiveReload 插件。

    

   

   三、gulpfile.js 配置

    在工程的目录下，新建 gulpfile.js 文件。如下简单的配置:

     

Js代码  

1. 'use strict';  
2.   
3. //引入 gulp 和 nodemon livereload 插件  
4. var gulp       = require('gulp');  
5. var nodemon    = require('gulp-nodemon');  
6. var livereload = require('gulp-livereload');  
7.   
8. // 一些文件的路径  
9. var paths = {  
10.     client: [  
11.     'client/javascripts/**/*.js',  
12.     'client/stylesheets/**/*.css'  
13.     ],  
14.     server: {  
15.         index: 'app.js'  
16.     }  
17. };  
18.   
19. // nodemon 的配置  
20. var nodemonConfig = {  
21.     script : paths.server.index,  
22.     ignore : [  
23.         "tmp/**",  
24.         "public/**",  
25.         "views/**"  
26.     ],  
27.     env    : {  
28.         "NODE_ENV": "development"  
29.     }  
30. };  
31.   
32. // 使用 nodemone 跑起服务器  
33. gulp.task('serve', ['livereload'], function() {  
34.     return nodemon(nodemonConfig);  
35. });  
36.   
37.   
38. // 当客户端被监听的文件改变时，刷新浏览器  
39. gulp.task('livereload', function() {  
40.     livereload.listen();  
41.     var server = livereload();  
42.     return gulp.watch(paths.client, function(event) {  
43.         // server.changed(event.path); 
44.         livereload.changed(event.paht); 
45.     });  
46. });  
47.   
48. // develop 任务， 同时开启 serve、livereload 任务  
49. gulp.task('develop', ['serve', 'livereload']);  

 

 

    这里只是分享了关于 gulp-nodemon 与 gulp-livereload 插件的使用。更多 gulp api语法可以查看笔者博文:

    Gulp API 初探和 gulp-nodemon gulp-livereload 配置

转载于:https://www.cnblogs.com/chris-oil/p/5118041.html