简单使用gulp四个API和常用模块
2017-10-17 22:22
375 查看
API
gulp一共四个API,执行任务;找到文件的路径;输出文件路径;监听gulp.task
ulp.src
gulp.dest
gulp.watch
No1 :gulp.task()
执行任务,task(‘任务名称’,[任务数组],fn)No2:gulp.src()
简单理解就是根据路径找到对应的文件,src(‘路径’[,可选参数]);可以被pipe的到其他插件中No3:gulp.dest()
简单理解:输出到对应路径,能被pipe进来,dest(path[,options])No4:gulp.watch()
简单理解:监听路劲文件的变化,执行相应的任务。gulp.watch(glob[, opts], tasks)第三方模块的使用
在当前项目中添加该模块,该模块在gulp上的官网上可以找到利用npm安装,输入命令:cnpm i -D【模块名称】
启动文件gulpfile.js中引入模块
No1:gulp-connect,
实时加载,实现无需刷新浏览器就能执行,一般结合监听一同使用
//基本使用 var gulp = require('gulp'), var html = require('gulp-connect'); //copy-html任务已被监听 gulp.task('copy-html',()=>{ return gulp.src('index.html') .pipe(gulp.dest('dist/')) .pipe(connect.reload()); }) gulp.task('server',()=>{ connect.server({ root: 'dist', //服务器根目录 port: 8080, //端口号 livereload: true//实时加载 }) })
No2:gulp-htmlmin,
压缩html文件
9a59
//基本使用 var options = { collapseWhitespace:true//压缩html } gulp.src('index.html') .pipe(htmlmin(options)); //参考http://www.ydcss.com/archives/20/comment-page-1#comments
No3:gulp-less,
实时编译less文件
相关文章推荐
- Asible常用的模块和简单的playbook使用
- Nodejs进阶:核心模块Buffer常用API使用总结
- 对PopupWindow常用API的简单封装,几行代码就搞定PopupWindow弹窗,使用Builder模式,链式调用,像使用AlertDialog 一样
- sigar模块之python api简单的使用--获取cpu信息
- 使用gulp相关插件进行api的跨域访问并监控文件的变化的简单处理
- perl 常用模块使用例子
- 简单实用的新闻模块常用效果
- 在JSP中使用Session制作简单的登录模块
- JavaScript 简单DOM API的简单使用
- perl的expect和xml模块简单使用
- JDom 常用api 及 一般的使用
- 宏模块的简单使用
- 使用CUDA驱动API的简单例子
- perl 常用模块使用例子 (转载)
- Perl常用模块使用例子5
- perl 常用模块使用例子
- vs2005简单的使用控件,实现网站常用的任意文本超链接
- perl 常用模块使用例子
- drupal6中定义并使用自己自定义模块的api
- JSP简单登录模块使用Session