首页 > 其他 > 详细

gulp-nodemon 和 gulp-livereload 配置

时间:2016-01-10 11:38:45      阅读:183      评论:0      收藏:0      [点我收藏+]

  一、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.     });  
  45. });  
  46.   
  47. // develop 任务, 同时开启 serve、livereload 任务  
  48. gulp.task(‘develop‘, [‘serve‘, ‘livereload‘]);  

 

 

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

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

gulp-nodemon 和 gulp-livereload 配置

原文:http://www.cnblogs.com/chris-oil/p/5118041.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!