Gulp

自动化构建工具, 简单的配置, 复杂的效果

gulp 是运行在 node.js 环境上的工具, 没安装 node.js查看安装方法

全局环境

npm install --global gulp

项目依赖模块

npm install --save-dev gulp

gulpfile.js

在项目下创建 gulpfile.js , gulpfile.js 是项目的 gulp 配置, 所有工程化的配置都是由它完成

//导入 gulp 模块
var gulp = require('gulp');

//定义一个默认的任务
gulp.task('default', function() {
  	console.log("hello gulp");
});

运行

打开终端, 进入到项目目录, 执行 gulp

创建任务 task

使用 task 可以添加一个自定义任务

// 定义一个任务
// 第一个参数为任务名称
// 第二个参数为执行任务时执行的函数
gulp.task('name', function() {
  	//TODO
});

读取文件资源 src

gulp.src 可以接收一个字符串,也可以接收一个数组,数组用来读取多个文件 gulp.src 可以接受 glob 语法 具体的可以参考 glob 文档

//读取指定的单个文件
gulp.src('path/a.filename');
//读取指定的多个文件
gulp.src([
	'path/a.filename',
	'path/b.filename'
]); 

管道 pipe

管道好比工厂里的流水线,上游处理好后交给下游继续处理

gulp.src('glob')
	.pipe('其它任务1') 
	.pipe('其它任务2');

输出 dest

gulp.src('glob')
	.pipe(gulp.dest('path/')); //输出到指定目录

监听 watch

#监听文件, 当文件发生变化时该执行任务
gulp.watch('glob',['任务名称']);