gulp学习

本文介绍了gulp.js的基本API如gulp.src(), gulp.dest(), gulp.task(), gulp.watch()等的使用方法,并列举了一些常用的gulp插件,如文件压缩、重命名、合并等。

中文文档:http://www.gulpjs.com.cn/docs/api/

 

一、gulp的API

1 gulp.src();

这个方法是用来获取流的,但这个流里的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。

其语法为:

  gulp.src(globs[, options]);

 

2 gulp.dest();

gulp.dest()方法是用来写文件的。

其语法为:

  gulp.dest(path[,options])

 

3 gulp.task()

这个方法用来定义任务,内部使用的是Orchestrator

其语法为:

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

 

4 gulp.watch()

这个方法用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。

其语法为

gulp.watch(glob[, opts], tasks)





二、pipe方法

将文件流导入到gulp的插件或者api方法中;

 

 

三、一些常用的gulp插件

1 自动加载插件

gulp-load-plugins安装:npm install --save-dev gulp-load-plugins

 

2 重命名插件

gulp-rename安装:npm install --save-dev gulp-rename

 

3 js文件压缩

gulp-uglify安装:npm install --save-dev gulp-uglify

 

4 css文件压缩

gulp-minify-css安装:npm install --save-dev gulp-minify-css

 

5 html文件压缩

gulp-minify-html安装:npm install --save-dev gulp-minify-html

 

6 js代码检查

gulp-jshint安装:npm install --save-dev gulp-jshint

 

7 文件合并

gulp-concat安装:npm install --save-dev gulp-concat

 

8 less和sass的编译

less使用gulp-less安装:npm install --save-dev gulp-less

sass使用gulp-sass安装:npm install --save-dev gulp-sass

 

9 图片压缩

gulp-imagemin,安装:npm install --save-dev gulp-imagemin

 

10 自动刷新

gulp-livereload,安装:npm install --save-dev gulp-livereload

转载于:https://www.cnblogs.com/yzg1/p/4881793.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值