Gulp の 快速入门

Gulp概要

Gulp一种流式自动化工具，在构建前端应用是非常给力的哟

---

Gulp快速应用

1. Gulp前置条件

Gulp是基于node的，所以要先安装node

• 初始化项目

  mkdir sunshine_gulp
  cd sunshine_gulp
  npm init

npm init会创建package.json文件，package.json中存储所有关于项目的依赖信息

2. Gulp安装

• 全局安装

  npm install -g gulp-cli
  

• 在项目里安装，并保存在devDependencies

  npm install gulp --save-dev
  

  安装完成之后查看package.json

package.json.png

3. Gulp任务

gulp是流式自动化工具，任务是核心，下面就来看看gulp下的任务是如何编写的

3.1 gulpfile.js

gulpfile.js是gulp的编译脚本，类似c语言中的makefile

3.2 引入gulp

var gulp = require('gulp');

require会在node_module中寻找gulp目录，并加载对应的类库到工程中

3.3 编写第一个任务

3.3.1 简单任务

定义任务A，并打印Task A is run

gulp.task('A', function() {
  console.log('Task A is run');
});

运行任务A

gulp A

>> Task A is run

通过以上两端脚本可以发现定义任务和运行任务都是通过gulp这个指令

• gulp.task(taskname, fn) 用于定义一个任务, 其中taskname是任务名，fn是任务回调函数
• gulp taskname 用于执行一个指定的任务

3.3.2 依赖任务

假设有一个任务B是需要依赖任务A的，那么任务B该怎么定义呢？

gulp.task('B', ['A'], function() {
  console.log('Task B is run');
});

运行任务B

gulp B

>> Task A is run
   Task B is run

通过以上两端脚本可以发现定义依赖任务，是通过传递一个依赖数组，那么定义任务的表达式就可以抽象为

• gulp task(taskname, dependencies, fn)

  taskname 任务名

  dependencies 依赖任务（前置任务）

  fn 任务回调函数

简单的入门就讲到这里，后续会写一篇实践的教程