Gulp入门教程

WEB前端 Gulp教程、Nodejs学习 2017年8月25日

Gulp是一个前端构建工具，API也非常简单，学习起来很容易，Gulp使用的是NodeJS中pipe()管道来读取和操作数据，速度更快。Gulp上手非常快，使用起来也非常的方便。Gulp的运行流程很简单：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到Gulp的插件中，最后把处理后的流再通过pipe方法导入到gulp.dest()。下面雷雪松详细的讲解下Gulp如何使用。

1、Gulp安装
在当前项目中安装gulp，加–save-dev参数则表示开发时的依赖，会安装在package.json文件的devDependencies中。
[cc lang=”javascript” escaped=”true”]npm install gulp[/cc]

2、Gulp配置文件gulpfile.js，执行gulp test便会执行test任务，输入hello gulp!
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.task(‘test’,function(){
console.log(‘hello gulp!’);
});[/cc]

3、Gulp API详解: gulp.src()、gulp.dest()、gulp.task()、gulp.watch()
a、gulp.src() 
通过提供的匹配模式传入一个字符串或者数组指定源文件。gulp通配符路径匹配示例：
“*”：匹配所有文件 例：src/*.less(包含src下的所有less文件)
“**”：匹配0个或多个子文件夹 例：src/**/*.less(包含src的0个或多个子文件夹下的less文件)
“{}”：匹配多个属性 例：src/{a,b}.less(包含a.less和b.less文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)
“!”：排除文件 例：!src/a.less(不包含src下的a.less文件)
[cc lang=”javascript” escaped=”true”]var gulp = require(‘gulp’);
gulp.src([‘js/*.js’,’css/*.css’])[/cc]

b、gulp.dest()
最终写入的目标文件夹，如果某文件夹不存在，将会自动创建它。
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.src(‘js/app.js’)
.pipe(gulp.dest(‘.dist’));[/cc]

c、gulp.task()
定义一个gulp任务，gulp不制指定任务则默认执行default任务。
[cc lang=”javascript” escaped=”true”]
//定义一个，依赖的dep的demo任务
var gulp = require(‘gulp’);
gulp.task(‘demo’, [‘dep’], function() {
// Do something
});[/cc]

d、gulp.watch()
用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.watch(‘js/**/*.js’, [‘reload’]);[/cc]

来源：Gulp入门教程