gulp-nodemon 和 gulp-livereload 配置

一、gulp 安装

1. 全局安装:

1. npm install -g gulp

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

1. npm install gulp --save-dev

二、gulp-nodemon 和 gulp-livereload 安装

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

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

安装:

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

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

三、gulpfile.js 配置

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

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

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

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