gulp常用插件 一

前言

如果你已经在项目中引入了gulp,那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个,分别用于开发和生产。 * 以下模块地址均为官网地址,如果觉得请求地址慢,可以访问淘宝镜像的包说明地址,http://npm.taobao.org/ * 以下模块介绍顺序不分先后,代码仅供参考,亲测可用。 * 所有的模块使用都需要require引入,如果下面代码有遗漏请自觉加入。

gulp-less

  • 模块地址:https://www.npmjs.com/package/gulp-less/
  • 安装 $ npm install gulp-less --save-dev
  • 使用场景:开发完成之后利用任务自动将开发代码编译
  • 使用 var less = require('gulp-less'); gulp.task('lessCompile', function () { return gulp.src('src/less/style.less') .pipe(less()) //less编译 .pipe(gulp.dest('dist/css')); //编译为同名的文件,不需要单独命名样式文件 });

gulp-rename

  • 模块地址:https://www.npmjs.com/package/gulp-rename/
  • 安装 $ npm install gulp-rename --save-dev
  • 使用场景:区别于开发文件或者追加版本号等,入参有path:子属性有dirname,basename ,prefix,suffix,extname。可以通过字符串,方法以及hash三种方式。个人建议使用最后一个最方便,fn的最强大。
  • 使用 var rename = require('gulp-rename'); gulp.src("./src/main/text/hello.txt", { base: process.cwd() }) //第一种方式 .pipe(rename({ dirname: "main/text/ciao", basename: "aloha", prefix: "bonjour-", suffix: "-hola", extname: ".md"})) //第二种方式 .pipe(rename(function (path) { path.dirname += "/ciao"; path.basename += "-goodbye"; //支持更灵活的定义 })

gulp-clean-css

  • 模块地址:https://www.npmjs.com/package/gulp-clean-css/
  • 安装 $ npm install gulp-clean-css --save-dev
  • 使用场景:导出到生产之前需要压缩样式表 配置说明:
  1. advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
  2. compatibility: ‘ie7′,//保留ie7及以下兼容写法 类型:String 默认:”or’‘ [启用兼容模式; ‘ie7’:IE7兼容模式,’ie8’:IE8兼容模式,’‘:IE9+兼容模式]
  3. keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
  4. keepSpecialComments: ‘*’//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
  • 使用 var cleanCSS = require('gulp-clean-css'); gulp.task('cleanCss', function () { return gulp.src('src/less/style.less') .pipe(cleanCSS()) //压缩css文件 });

gulp del

  • 模块地址:http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/
  • 安装 $ npm install gulp del --save-dev
  • 使用场景:删除指定路径的文件,删除管道中的文件(需要vinylPaths模块的安装),如果是整 个文件夹内容清空/*.如果是包括文件夹删除,直接文件目录即可,如/**/*
  • 使用 var del=require('del'),vinylPaths = require('vinyl-paths'); //删除指定路径的文件 gulp.task("clean:css",function(cb){ del(['dist/css/*.css', '!dist/css/*min.css'], cb);}) //删除管道中的文件 gulp.task("del-less",function(){ return gulp.src('src/less/demo.less') .pipe(vinylPaths(del)) })

gulp-uglify

  • 模块地址:https://www.npmjs.com/package/gulp-uglify
  • 安装 $ npm install gulp-uglify --save-dev
  • 使用场景:脚本上线之前完成压缩工作
  • 使用 var uglify = require('gulp-uglify'); gulp.task('js', function () { return gulp.src('src/js/*.js') .pipe(uglify()) });

gulp-concat

  • 模块地址:https://www.npmjs.com/package/gulp-concat
  • 安装 $ npm install gulp-concat --save-dev
  • 使用场景:web优化,合并文件减少http请求,同类型的文件才可以合并,比如css可以合并,js可以合并等。
  • 使用 var fileConcat = require('gulp-concat'); gulp.task('fileConcat', function () { return gulp.src('src/js/*.js') .pipe(concat("combine.js")) //可以控制合并生成的文件 });

gulp copy

  • 不需要安装任何模块,因为本身gulp的文件流管道机制支持文件拷贝
  • 使用场景:复制相关的文件结构到生产目录,比如页面文件。因为页面文件中的都是相对目录,所以当css以及js使用为产出地址时,要求页面等必备的希望产品的也放到产出目录。
  • 使用 gulp.task("copyhtmldir",function(){ return gulp.src(['src/html/*\*/\*']) .pipe(gulp.dest('dist/html')) })

gulp-imagemin

  • 模块地址:https://www.npmjs.com/package/gulp-imagemin
  • 安装 $ npm install gulp-imagemin --save-dev
  • 使用场景:上线之前对不必要的高精度图片进行压缩,避免不必要的高清图片。优化加载速度,提升页面性能,配置项为json类型。
    1. optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
    2. progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
    3. interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
    4. multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
  • 使用 var imgmin=require("gulp-imagemin"); gulp.task("imgmin",function(){ return gulp.src('src/images/*') .pipe(imgmin()) .pipe(gulp.dest("dist/images"))})

gulp-autoprefixer

  • 模块地址:https://www.npmjs.com/package/gulp-autoprefixer
  • 安装 $ npm install gulp-autoprefixer --save-dev
  • 使用场景:不熟悉厂商前缀的开发者可以在开发完成之后利用此模块一次性追加前缀,可以灵活配置前缀需求的浏览器列表。
    1. browsers:[] (定义使用的浏览器版本)
    2. cascade : true (定义对属性进行对齐操作),默认true
    3. remove : true (去掉不必要的前缀) ,默认true
  • 使用 //直接对管道文件操作 .pipe(autoprefixer({ browsers:["last 5 versions"], cascade:true, remove:true}))
  • 相关文档地址:[gulp设置autoprefixer][1]

gulp-load-plugins

  • 模块地址:https://www.npmjs.com/package/gulp-load-plugins
  • 安装 $ npm install gulp-load-plugins --save-dev
  • 使用场景:所有gulp集成的模块插件如果前面有gulp- 开头并且在package.json中有依赖注入,那么不需要重复声明变量,可以直接用$.name使用,后面多单词从第二个词开始首字母需要大写。
  • 使用 var $ = require('gulp-load-plugins')(); $.rename //等效于下面的写法 var rename=require('gulp-rename'); rename

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

Linux lsof 命令的实用案例

lsof 简介 lsof(list open files)是一个列出当前系统中所有打开文件的工具 Linux中一切皆文件,所以在系统中,被打开的文件可以是普...

6868
来自专栏Java帮帮-微信公众号-技术文章全总结

Java中数据库连接池原理机制详解【面试+提高】

Java中数据库连接池原理机制详解 【面试+提高】 连接池的基本工作原理 1、基本概念及原理 由上面的分析可以看出,问题的根源就在于对数据库连接资源的低...

7228
来自专栏行者常至

(Java)请求方式之GET、POST 浅析

·不同的请求方式不仅仅在数据传输时会有所不同,在表单提交及服务器端处理时也会采用不同的方式。而区分不同种类的请求方式也会使得浏览器采用不同的缓存方式处理后续请求...

1452
来自专栏小樱的经验随笔

把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败 在python3中调用会成功,但是调用不能成功的解决方案

把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败 在python3中调用会成功,但是调用不能成功 解决办法是: 在该文件夹下加入空文件_...

2985
来自专栏性能与架构

nginx 缓存机制

Nginx缓存的基本思路 利用请求的局部性原理,将请求过的内容在本地建立一个副本,下次访问时不再连接到后端服务器,直接响应本地内容 Nginx服务器启动后,会对...

8266
来自专栏云计算教程系列

如何在CentOS 7上安装和配置scponly

scponly是匿名FTP的安全替代品。它使管理员能够设置具有受限远程文件访问权限且无法访问交互式shell的安全用户帐户。

1590
来自专栏运维小白

Linux基础(day76)

20.31 expect脚本同步文件 expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 #!/usr/bin/expect set p...

3318
来自专栏技术博文

关于inodes占用100%的问题及解决方法

系统:Centos;一般的Linux系统也可以用这种方法。 情况描述:今天session文件写入时,写入不了,而且连接到服务器上开启服务都开不了,起始以为磁盘空...

3859
来自专栏云计算教程系列

如何在CVM上设置SSH仅作文件传输

SFTP代表SSH File Transfer Protocol。顾名思义,这是一种使用加密SSH连接将文件传输到服务器的安全方式。尽管名称如此,但它与FTP(...

2125
来自专栏云霄雨霁

Java--进程和线程基本概念

2136

扫码关注云+社区

领取腾讯云代金券