gulp-nodemon 和 gulp-livereload 配置

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

一、gulp 安装

1. 全局安装:

npm install -g gulp

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

npm install gulp --save-dev

二、gulp-nodemon 和 gulp-livereload 安装

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

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

安装:

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

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

三、gulpfile.js 配置

在工程的目录下，新建 gulpfile.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);
    });
});

// develop 任务， 同时开启 serve、livereload 任务
gulp.task('develop', ['serve', 'livereload']);

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