gulp基础使用方法记录

一、开始

使用 gulp，需知道 4 个 API：

**gulp.task():**用来定义任务,

格式：gulp.task(name[, deps], fn)

name 为任务名

deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
　　　　　　　　 fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.src()：用来读取文件,

格式：gulp.src(globs[, options])，

globs 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
　　　　　　　　 options 为可选参数。通常情况下我们不需要用到。

gulp.dest()：用来写文件的：,

格式：gulp.dest(path[,options])

path 为写入文件的路径
　　　　　　　　　 options 为一个可选的参数对象，通常我们不需要用到

**gulp.watch()**：用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等,

格式：gulp.watch(glob[, opts], tasks)

glob 为要监视的文件匹配模式，规则和用法与 gulp.src()方法中的 glob 相同。
　　　　　　　　　 opts 为一个可选的配置对象，通常不需要用到
　　　　　　　　 　 tasks 为文件变化后要执行的任务，为一个数组

二、实例

需要先安装 gulp
npm install -g gulp
手动建立一个 gulpfile.js 文件，作为入口，
初始化，引入 gulp 　　
npm init;
npm install –save-dev gulp;
然后在 gulpfile.js 写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var gulp = require('gulp');

var plugins = require('gulp-load-plugins')();

var src = {
 js: 'js/*.js',
 html: './*.html',
 css: 'css/*css',
 img: 'img/**'
}

var buildGulp = {
 // html 打包
 buildHtml: () => {
     gulp.src(src.html)
     .pipe(plugins.minifyHtml())
     .pipe(gulp.dest('./dist'));
 },
 // css 打包
 buildCss: () => {
     gulp.src(src.css)
     .pipe(plugins.minifyCss())
     .pipe(gulp.dest('dist/css'));
 },
 // js 打包
 buildJs: () => {
     gulp.src(src.img)
     .pipe(plugins.imagemin())
     .pipe(gulp.dest('dist/img'));
 },
 // img打包
 buildImg: () => {
     gulp.src(src.js)
     .pipe(plugins.uglify())
     .pipe(gulp.dest('dist/js'));
 },
};

gulp.task('default',function(){
 gulp.start('build')
});

gulp.task('build', function(){
 for ( var i in buildGulp){
     buildGulp[i]();
 }
});

我们用 gulp-uglify 压缩 js, gulp-minify-css 压缩 css, gulp-minify-html 压缩 html，gulp-imagemin 压缩图片

为避免在文件头部引入依赖时过去冗长，引入 gulp-load-plugins 来从 package.json 中引入依赖，通过调用实例中的方法来加载依赖，加载方式为按需加载

最后执行 gulp，会从名称为 default 的 task 开始执行，打包文件，输出的文件由 gulp.dest 设置在 dist 目录下