熟悉Gulp的4个API 让你成为Gulp专家

Posted 2021-04-08 前端玩法

点击上方 “公众号” 可以订阅哦！

这篇小玩就和大家分享如何使用gulp这个神器,大家多多支持多多分享给更多的人！

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

一、gulp.task

gulp 是基于task的方式来运行

定义

gulp.task(name [, deps, fn])
注册一个task, name 是task的名字，deps是可选项，就是这个task依赖的tasks, fn是task要执行的函数

示例

gulp.task('js', ,['jscs', 'jshint'], function(){ return gulp
    .src('./src/**/*.js')
    .pipe(concat('alljs'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));                 
});

提示

上例中

• jscs和jshint先运行，随后再运行js的task.

• jscs和jshint是并行执行的，而不是顺序执行

二、gulp.src

定义

gulp.src(globs[, options])

与globs 匹配的文件，可以是string或者一个数组

示例

gulp.src(['client/*.js', '!client/b*.js', 'client/c.js'])   # !是排除某些文件gulp.task('js',['jscs', 'jshint'],function(){ return gulp
    .src('./src/**/*.js', {base:'./src/'})        
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));
             
});

options.base 是指多少路径被保留，比如上面的 ./src/users/list.js 会被输出到 ./build/users/list.js

提示

如果我们需要文件保持顺序，那么出现在前面的文件就写在数组的前面

  gulp.src(['client/baby.js', 'client/b*.js', 'client/c.js'])  

上面baby.js就出现在最上面。

三、 gulp.dest

定义

gulp.dest(path[, options]) 就是最终文件要输出的路径，options一般不用

四、gulp.watch

定义

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。

示例

gulp.task('watch-js', function(){
   gulp.watch('./src/**/*.js',['jshint','jscs']); 
});

gulp.task('watch-less', function(){
 gulp.watch('./src/**/*.less',function(event){   console.log('less event'+event.type+' '+event.path)
 }); 
});

最后

gulp就是如此的简单，你只需要掌握这四个API就够了，剩下的就是熟悉相关的plugin了。

前端玩法

微信：web_html

一起玩前端

长按二维码关注