gulp API 简介

Posted 2020-10-03

一、gulp API 简介

            gulp 本身能做的事情非常少，主要是通过插件来提供各种功能，gulp 本身只提供了4个非常简洁的 API, 掌握这4个 API 你就基本掌握了 gulp 的全部。

                    1、gulp.src(globs[, options])

                    2、gulp.dest(path[, options])

                    3、gulp.task(name[, deps], fn)

                    4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

二、gulp.src(globs[, options])

                说明：返回当前指定文件流至可用插件。

                globs：需要处理的源文件匹配符路径。类型(必填)：String or StringArray。

                    通配符路径匹配示例：

                            1、"src/index.js": 指定具体文件；

                            2、"{}": 匹配多个属性。例：src/{a,b}.js(包含 a.js 和 b.js 文件)  src/*.{jpg,png,gif}(包含 src 下的所有 jpg/png/gif 文件)；

                            3、"!": 排除指定文件。例：!src/index.js(不包含 src 下的 index.js 文件)；

                            4、"*.scss": * 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有 scss 文件；

                            5、"**/*.scss": 匹配当前目录及其子目录下的所有 scss 文件；

                            6、"*.+(scss|sass)": + 号后面会跟着圆括号，里面的元素用 | 分割，匹配多个选项。这里将匹配 scss 和 sass 文件;

                options：类型(可选)：Object，有3个属性 buffer、read、base。

                            1、options.buffer：类型：Boolean  默认：true 设置为 false，将返回 file.content 的流并且不缓冲文件，处理大文件时非常有用；

                            2、options.read：类型：Boolean  默认：true 设置 false，将不执行读取文件操作，返回null；

                            3、options.base：类型：String  设置输出路径以某个路径的某个组成部分为基础向后拼接；

示例：

gulp.src([‘js/*.js‘,‘css/*.css‘,‘*.html‘])   // 使用数组的方式来匹配多种文件
gulp.src([‘src/*.js‘,‘!src/b*.js‘])  // 匹配所有js文件，但排除掉以 b 开头的 js 文件gulp.src([‘!src/b*.js‘,‘src/*.js‘])  // 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
gulp.src(‘src/js/**/*.js‘, { base: ‘src‘ })  // 保留 src 路径后的所有路径名称
gulp.src([‘less/**/*.less‘,‘!less/{extend,page}/*.less‘])  // 匹配 less 目录下和子目录下的所有 less 文件，但排除 less 目录下 extend 和 page 目录下的所有 less 文件

三、gulp.dest(path[, options])

                说明：dest 方法是指定处理完后文件输出的路径。

                path： 类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可。

                options：类型(可选)：Object，有2个属性 cwd、mode。

                            1、options.cwd：类型：String  默认：process.cwd()：前脚本的工作目录的路径，只在所给的输出目录是相对路径时候有效；

                            2、options.mode：类型：String  默认：0777 指定被创建文件夹的权限；

PS：我们给 gulp.dest() 传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名。要想改变文件名，可以使用 gulp-rename 插件。

示例：

 // 最终生成的文件路径为 dist/foot.js/jquery.js，而不是 dist/foot.js
gulp.src(‘script/jquery.js‘)    
        .pipe(gulp.dest(‘dist/foot.js‘));
        
 // 最后生成的文件路径为 dist/**/*.js
 // 如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js
gulp.src(‘script/**/*.js‘)    // 有通配符开始出现的那部分路径为 **/*.js
        .pipe(gulp.dest(‘dist‘)); 

 // 最后生成的文件路径为 dist/avalon.js      
gulp.src(‘script/avalon/avalon.js‘)  // 没有通配符出现的情况    
        .pipe(gulp.dest(‘dist‘));  
        
// 假设匹配到的文件为 script/util/underscore.js
// 则最后生成的文件路径为 dist/util/underscore.js
gulp.src(‘script/**/underscore.js‘)   // 有通配符开始出现的那部分路径为 **/underscore.js
        .pipe(gulp.dest(‘dist‘)); 

// 假设匹配到的文件为 script/zepto.js        
//则最后生成的文件路径为 dist/zepto.js         
gulp.src(‘script/*‘)  // 有通配符出现的那部分路径为  *         
        .pipe(gulp.dest(‘dist‘)); 
        
//设该模式匹配到了文件 app/src/css/normal.css 
// 用 dist 替换掉 base 路径，最终得到 dist/css/normal.css  
gulp.src(‘app/src/**/*.css‘)   // 此时 base 的值为 app/src,也就是说它的 base 路径为 app/src                 .pipe(gulp.dest(‘dist‘));

// 假设匹配到的文件为 script/lib/jquery.js
// 生成的文件路径为 build/jquery.js
gulp.src(‘script/lib/*.js‘)   // 没有配置 base 参数，此时默认的 base 路径为 script/lib
        .pipe(gulp.dest(‘build‘)); 
        
 // 假设匹配到的文件为 script/lib/jquery.js    
 // 此时生成的文件路径为 build/lib/jquery.js  
gulp.src(‘script/lib/*.js‘, {base:‘script‘}) // 配置了 base 参数，此时 base 路径为 script
        .pipe(gulp.dest(‘build‘)); 

四、gulp.task(name[, deps], fn)

                说明：task 方法定义一个 gulp 任务。

                name：类型(必填)：String，指定任务的名称（不应该有空格）。

                deps：类型(可选)：StringArray，该任务依赖的任务（注意：被依赖的任务需要返回当前任务的事件流），为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。

                fn：类型(必填)：Function，该任务调用的插件操作。

示例：

// 定义一个没有依赖的任务
gulp.task(‘css‘, function () {
    return gulp.src([‘less/style.less‘])
        .pipe(less())
        .pipe(gulp.dest(‘./css‘));
});

// 定义一个有依赖的任务
gulp.task(‘mincss‘, [‘css‘], function () {          // 执行完 css 任务后再执行 mincss 任务
    return gulp.src([‘css/*.css‘])
        .pipe(minifyCss())
        .pipe(gulp.dest(‘./dist/css‘));
});

// 定义一个有多个依赖的默认任务
gulp.task(‘default‘, [‘css‘,‘concat‘,‘minifyCss‘]);  // 只要执行 default 任务就相当于把 "css"，"concat"，"minifyCss" 这三个任务都执行了

五、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

                说明：watch 方法是用于监听文件变化，文件一修改就会执行指定的任务。

                glob：需要处理的源文件匹配符路径。类型(必填)：String or StringArray。

                opts：类型(可选)：Object，为一个可选的配置对象，通常不需要用到。

                tasks：类型(必填)：StringArray，需要执行的任务的名称数组。

                cb(event)：类型(可选)：Function 每个文件变化执行的回调函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type 属性为变化的类型，可以是 added, changed, deleted；path 属性为发生变化的文件的路径。

示例：

gulp.task(‘watch-less‘, function () {
    gulp.watch(‘less/**/*.less‘, [‘css‘]);
});

gulp.task(‘watch-js‘, function () {
    gulp.watch(‘js/**/*.js‘, function (event) {
        // 输出发生改变文件的一些信息
        console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
    });
});

本文出自 “珞辰的博客” 博客，转载请与作者联系！