gulp-nodemon 和 gulp-livereload 配置

一、gulp 安装

1. 全局安装:

Shell代码


npm install -g gulp

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

Shell代码


npm install gulp --save-dev

二、gulp-nodemon 和 gulp-livereload 安装

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

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

安装:

Shell代码


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

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

三、gulpfile.js 配置

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

Js代码


'use strict';

//引入 gulp 和 nodemon livereload 插件

var gulp = require('gulp');

var nodemon = require('gulp-nodemon');

var livereload = require('gulp-livereload');

// 一些文件的路径

var paths = {

client: [

'client/javascripts/**/*.js',

'client/stylesheets/**/*.css'

],

server: {

index: 'app.js'

}

};

// nodemon 的配置

var nodemonConfig = {

script : paths.server.index,

ignore : [

"tmp/**",

"public/**",

"views/**"

],

env : {

"NODE_ENV": "development"

}

};

// 使用 nodemone 跑起服务器

gulp.task('serve', ['livereload'], function() {

return nodemon(nodemonConfig);

});

// 当客户端被监听的文件改变时，刷新浏览器

gulp.task('livereload', function() {

livereload.listen();

var server = livereload();

return gulp.watch(paths.client, function(event) {

// server.changed(event.path);

livereload.changed(event.paht);

});

});

// develop 任务， 同时开启 serve、livereload 任务

gulp.task('develop', ['serve', 'livereload']);

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

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