Nodejs 最近看了下gulp.js，着实不错

Nodejs 最近看了下gulp.js，着实不错

Gulp.js 学习笔记

Gulp.js 是一个类似于 Grunt 的自动化构建工具。相比于 Grunt 的配置文件较为复杂，Gulp.js 通过简单的几个函数就能完成任务定义和执行。本文将介绍如何使用 Gulp.js 进行一些基本操作，并展示一些实际项目中常用的模块。

Gulp.js 的一个简单示例

首先，我们来看一个最基础的 Gulp.js 任务定义：

// gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
    // 注册一个默认任务
    console.log("Hello, Gulp!");
});

这段代码定义了一个默认任务 default，当运行 gulp 命令时，会输出 “Hello, Gulp!”。

使用管道（Pipe）进行文件处理

Gulp.js 的一大特点是支持管道（pipe），这使得文件处理流程变得非常清晰。下面是一个具体的例子，展示了如何使用 Gulp.js 对 JavaScript 文件进行压缩和合并：

/*
gulpfile.js for my Ros project
2014/02/23
*/
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var size = require('gulp-size');

var filePath = {
    appScriptPath: {
        src: 'app/scripts/**/*.js',
        dest: 'app/build/js'
    }
}

gulp.task('default', function() {
    return gulp.src(filePath.appScriptPath.src)
        .pipe(uglify()) // 压缩 JavaScript 文件
        .pipe(concat('main.js')) // 合并所有压缩后的文件为 main.js
        .pipe(gulp.dest(filePath.appScriptPath.dest)); // 输出到目标目录
});

这段代码首先读取 app/scripts 目录下的所有 .js 文件，然后依次进行压缩、合并，并最终输出到 app/build/js 目录下。

实际项目中需要的模块

在实际项目中，我们经常需要处理大量的文件，这时增量编译就显得尤为重要。Gulp 提供了一些模块来实现这一功能，例如 gulp-changed 和 gulp-cached。

增量编译：gulp-changed

var gulp = require('gulp');
var changed = require('gulp-changed');
var ngmin = require('gulp-ngmin'); // 只作为示例

var SRC = 'src/*.js';
var DEST = 'dist';

gulp.task('default', function () {
    gulp.src(SRC)
        .pipe(changed(DEST)) // 配置 DEST 目录
        .pipe(ngmin()) // 只对发生变化的文件进行 ngmin 处理
        .pipe(gulp.dest(DEST));
});

这段代码展示了如何使用 gulp-changed 模块只处理发生变化的文件。这样可以显著提高构建效率。

总结

Gulp.js 通过简洁的 API 和强大的管道功能，使得文件处理变得更加高效和易于维护。希望这些示例能帮助你快速上手 Gulp.js，并在实际项目中发挥其强大的功能。

哪货好用？