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

Posted on |

Gulp，是一个自动化任务运行工具(就是让一些如: 图片压缩，js合并，Sass 编译成 CSS，测试，重启服务器等操作，能自动运行的工具。)，和 Grunt 是同一类型的工具。表示之前没有配置过这两类的工具，只是简单的了解过。最近刚好要用到，就在各种 google 了，发现现在使用最广泛的就是 Grunt，中文的学习资料和相应的任务插件也很多。而 Gulp 貌似最近才火起来的吧，第三方插件没有 Grunt 那么多。但是个人对 Gulp 第一印象比较好，感觉写起来更加方便，更有 DSL 感觉。


gulp 一些 API 的语法

gulp.task()　gulp.src()　gulp.dest()　gulp.watch()

下面是 gulp-sass(用于将 scss 编译成 css 的插件) 插件的例子:
eg-1：

1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp');
var sass = require('gulp-sass')；

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.watch('./scss/*.scss', ['sass']);

1. task方法是gulp用于定义一个具体任务的方法。如果需要执行任务，在终端执行gulp task-name。
　task 方法的语法如:

语法：
gulp.task(name[, deps], fn)

参数：

name
　　类型：String， 指任务名，就像上述的eg-1例子的sass。

deps
　　类型：Array，指在跑当前任务时，对其它任务的依赖。也就是要执行当前任务，会先执行这些依赖的任务。如: gulp.task('demo', ['demo1', 'demo2'], function(){ });会先同时执行任务'demo1', 'demo2'，最后执行任务'demo'。
fn
　　类型：function，指运行任务时，要执行的具体操作的内容。

2. src方法是指定源文件的输入路径，pipe有点像是封闭的“流水线”，某个产品经过上一个工序处理后，就转入下一个工序去处理，直到完成。也就是将上一步的输出转化下一步的输入的中间者。
　src 方法的语法如:

语法：
gulp.src(globs[, options])

参数：

globs
　　类型：String 或 Array，指定源文件的路径，可以是单个路径，也可以是个路径数组。
　　路径匹配支持通配符：
　　　　1. app.js　　　　指定具体文件
　　　　2. js/*　　　　　匹配 js 目录下所有的文件，不包括子文件夹
　　　　3. js/*.js　　　 匹配 js 目录下所有的扩展名为 .js 的文件，不包括子文件夹
　　　　4. js/*/*.js　　匹配 js 目录下第一层子文件夹里的扩展名为 .js 的文件
　　　　5. js/**/*.js　 匹配 js 目录下所有文件夹层次下扩展名为 .js 的文件
　　　　6. !js/try.js　 不包括 try.js 文件，在前五条文件匹配模式前加!，就忽略掉相应的文件

options
　　类型：Object，有3个属性buffer，read，base。
　　　options.butter
　　　　类型：Boolean，默认：true
　　　　gulp-api 上描述到，如设置为false，返回的文件内容将会以数据流的形式体现，而不是数据
　　　　块的形式。还提示到有可能一些插件没有实现支持数据流的形式。
　　　　(表示不太明白，有待研究。-_-|||)
　　　options.read
　　　　类型：Boolean，默认：true
　　　　返回的文件内容为null，不执行读取文件操作。
　　　options.base
　　　　类型：String
　　　　设置输出路径以某个路径的某个组成部分为基础向后拼接。具体例子可以参考 gulp-api。

3. dest方法是指定被处理完的文件的输出路径，就像eg-1例子里的gulp.dest('./css')意思就是将编译完成的 css 文件保存到 /css目录中。
　dest 方法的语法如:

语法：
gulp.dest(path[, options])

参数：

path
　　类型：String 或 Function，指定输出文件的文件夹路径，可以是字符串，也可以是一个返回文件夹路径的函数。

options
　　类型：Object，有2个属性cwd，mode。
　　　options.cwd
　　　　类型：String，默认：process.cwd()
　　　　 设置输出文件夹路径的相对路径，默认为当前脚本的工作目录的路径。
　　　options.mode
　　　　类型：String，默认：0777
　　　　设置被创建文件夹的权限。

4. watch方法是用于监听文件变化，文件一修改就会执行指定的任务。在eg-1例子中，通过监听'./scss/*.scss'文件，一旦文件发生修改就会执行任务sass。
　watch 方法的语法如:

语法：
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

参数：

glob
　　类型：String 或 Array，指定源文件的路径，可以是单个路径，也可以是个路径数组。路径匹配和上述gulp.src()方法路径匹配的模式一样。

opts
　　类型：Object，有4个属性interval，debounceDelay，mode，cwd。
　　具体可以参考gulp-api这里就不一一介绍了。

tasks
　　类型：Array，监听到文件变化后，要被执行的任务的名字组成的数组。

cb(event)
　　类型：Function，监听到变化后，回调的函数。会传递出一个对象类型的event参数。
　　　event.type
　　　　类型：String，表示操作的类型：added, changed or deleted
　　　event.path
　　　　类型：String，被修改文件的路径。

gulp-nodemon 和 gulp-livereload 配置：

gulp安装

全局安装:

1
npm install -g gulp

安装在项目开发环境:

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
'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时，总结的一些东西(方便自己记忆^_^)。如果需要更详细的介绍可以看我参考的那些链接。

gulp, 你是那么美。。。

参考