前端开发构建工具---Gulp介绍

What is gulp?

gulp 是一个基于Nodejs的任务运行器(合并、压缩、编译等任务)，类似Grunt，但gulp的原则是保持简单，使任务文件更像代码而不是配置。

Why gulp?

易用： 代码优于配置的原则拆分复杂的任务使其简单化，编写出易读的任务程序并保持可控性

易学：核心API少，易于上手
高效：基于流的操作无需将输出写入临时文件，加快构建速度
高质量：插件编写遵从单一责任原则------插件很简单并且只做一件事情

How to use?

首先安装gulp

$ npm install gulp

$ cd project_path
$ npm install gulp --save-dev  //添加项目开发依赖

接下来介绍4个核心API：

gulp.task(name[, deps], fn) 建立任务
gulp.src(glob [, options]) 返回可读文件流
gulp.dest(path) 返回可写文件流

gulp.watch(glob [, opts], tasks) 监视文件变化并且运行相应任务

这里以几个基本任务(合并、重命名、压缩js文件)为例：

1、安装相应插件：

$ npm install gulp-concat --save-dev  //合并插件
 $ npm install gulp-rename --save-dev  //重命名插件
 $ npm install gulp-uglify--save-dev  //js压缩插件

2、编写gulpfils.js：

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('process-scripts', function() {
    return gulp.src('src/scripts/*.js')  // 获取src/scripts/文件夹下的所有js文件
    .pipe(concat('main.js'))  // 合并后的文件命名为main.js
    .pipe(gulp.dest('dest/scripts/'))  // 输出main.js到desc/scripts文件夹下
    .pipe(rename({suffix: '.min'}))  // 重命名main.js为main.js.min
    .pipe(uglify())  // 压缩main.js.min
    .pipe(gulp.dest('dest/scripts/'))  //<span style="font-family: Arial, Helvetica, sans-serif;"> 输出main.js到/desc/scripts文件夹下</span>
})

3、运行任务：

$ gulp