世界上最伟大的投资就是投资自己的教育

gulp 使用指南

随风发布于2017-02-124120 次阅读

1. 介绍

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目

利用gulp可以轻易地实现，比如 css 压缩，把 coffee 转化成 js，压缩图片等任务。

2. 安装

按照官方的指令，使用如下命令即可安装。

npm install gulp-cli -g
npm install gulp -D

3. 使用

在使用之前可以先用npm init初始化一个项目。

所有的 task 只要放在一个文件中，这个文件叫gulpfile.js。

比如放个最简单的：

var gulp = require('gulp');

// default是默认的方法，运行gulp命令时会找到这个方法。
gulp.task('default', function() {
  // place code for your default task here
  console.log('gulp')
});

然后键入gulp命令。

输出如下:

[14:43:31] Using gulpfile ~/codes/koa-app/gulpfile.js
[14:43:31] Starting 'default'...
gulp
[14:43:31] Finished 'default' after 134 μs

4. 一个实例

现在来加一个实例，使用 gulp + babel 来转化一下 es6 的语法为 es5。

我们要使用 gulp 的插件，gulp 有好多插件，这个实例我们使用的是gulp-babel。

首先安装一下这个插件。

npm install --save-dev gulp-babel babel-preset-es2015

把gulpfile的内容用如下的内容代替。

const gulp = require('gulp');
const babel = require('gulp-babel');

// gulp.src会指定源文件，然后通过pipe函数把内容传给下个处理方法，最后gulp.dest是输出处理后的文件内容。
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

新建src/app.js文件，内容如下:

(i) => i + 1 //ES5

使用了 es6 的语法，我们运行一下gulp命令，看能不能转化成功。

输出如下:

// dist/app.js
"use strict";

(function (i) {
  return i + 1;
}); //ES6

是成功的！

https://github.com/gulpjs/gulp/blob/master/docs/API.md 这里列出了所有的gulp的 api 方法，比如gulp.src可以接些什么样的参数，gulp.dest能怎么用之类的，都可以通过这里查到。

5. watch

每次一改源码文件 (src/app.js) 内容，就要重新运行gulp命令，这样会好烦的。

如果每次一改源码文件 (src/app.js) 内容，就可以自动运行gulp命令就好了。

有的，gulp，提供了一个命令，叫gulp.watch。

我们把gulpfile内容改造如下:

const gulp = require('gulp');
const babel = require('gulp-babel');

// 定义了普通方法es6
gulp.task('es6', () => {
  return gulp.src('src/app.js')
        .pipe(babel({
          presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('default', () => {
  gulp.watch('src/app.js', ['es6']);
});

// The default task (called when you run `gulp` from cli)
// gulp.task('default', ['es6'])