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
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 任务回调函数
简单的入门就讲到这里,后续会写一篇实践的教程