gulp API 简介

发布时间:2020-07-02 19:37:44 作者:珞辰
来源:网络 阅读:686

一、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...');
   });
});






推荐阅读:
  1. gulp 插件之 gulp-useref 和 gulp-if
  2. gulp 插件之 gulp-livereload

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

api 简介 gulp

上一篇:安装H3C的各种问题

下一篇:梓益C语言学习笔记之链表&动态内存&文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》