gulp 常用插件汇总

2017-07-26更新：图片压缩插件使用gulp-smushit，gulp-smushit压缩率比较大，gulp-imagemin 图片压缩插件压缩率不明显。

 见下图压缩率：

 

 

1、gulp安装

参照gulp官网进行安装：http://www.gulpjs.com.cn/docs/getting-started/

2、常用的插件

gulp所有插件地址：http://gulpjs.com/plugins/

（1）html压缩插件

插件地址：https://www.npmjs.com/package/gulp-htmlmin/

（2）sass编译插件

插件地址：https://www.npmjs.com/package/gulp-sass/

注意现在是执行2个任务了，同时注意配置好路径。

（3） 图片压缩插件

gulp-imagemin插件地址：https://www.npmjs.com/package/gulp-imagemin/

gulp-smushit插件地址：https://www.npmjs.com/package/gulp-smushit/

（4）css压缩插件

插件地址：https://www.npmjs.com/package/gulp-clean-css/

任务配置示例：

 

//css压缩任务
gulp.task('cssmin', function() {
//过滤掉.min.css文件
gulp.src(['./css/*.css', '!./css/*.min.css'])
.pipe(cleanCSS({
//'ie8'：IE8 兼容模式，
compatibility: 'ie8'
}))
.pipe(gulp.dest('./dist/css'));
});

 （5）JS压缩插件gulp-uglify

插件地址：https://www.npmjs.com/package/gulp-uglify/

任务配置示例：

//JS压缩任务
gulp.task('jsmin', function() {
//过滤掉.min.js文件
gulp.src(['./js/*.js','!./js/*.min.js'])
.pipe(uglify({
//支持IE8
ie8: true
}))
.pipe(gulp.dest('./dist/js'));
});

 

（6）雪碧图插件gulp-css-spriter

插件地址：https://www.npmjs.com/package/gulp-css-spriter/

在css中只需要这样写即可：

body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
transform: translate(100px,100px);
}
.a{
width: 71px;
height: 93px;
background: url(../img/sqbg-icon.png) no-repeat center;
}
.b{
width: 960px;
height: 417px;
background: url(../img/ceshi3.png) no-repeat center;
}

生成后的CSS为：

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
transform: translate(100px,100px);
}
.a {
width: 71px;
height: 93px;
background: url(../img/spritesheet.png) no-repeat center;
background-position: -0px -417px;
}
.b {
width: 960px;
height: 417px;
background: url(../img/spritesheet.png) no-repeat center;
background-position: -0px -0px;
}

自动将图片路径更换为雪碧图的spritesheet.png的路径，同时自动添加上了background-position。

另外：若不想页面中所有的png都合并为雪碧图，可以将只想合并的图片后添加?__spriter

示例代码：

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
transform: translate(100px, 100px);
}
.a {
width: 71px;
height: 93px;
background: url(../img/sqbg-icon.png?__spriter) no-repeat center;
}
.b {
width: 960px;
height: 417px;
background: url(../img/ceshi3.png) no-repeat center;
}
.c {
width: 960px;
height: 417px;
background: url(../img/product4.png?__spriter) no-repeat center;
}

生成后的css代码为：

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
transform: translate(100px, 100px);
}
.a {
width: 71px;
height: 93px;
background: url(../img/spritesheet.png) no-repeat center;
background-position: -0px -417px;
}
.b {
width: 960px;
height: 417px;
background: url(../img/ceshi3.png) no-repeat center;
}
.c {
width: 960px;
height: 417px;
background: url(../img/spritesheet.png) no-repeat center;
background-position: -0px -0px;
}

实现以上情景需要做的是修改\node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js 这个文件的40行开始的if--else if代码块为：

// background-image always has a url 且判断url是否有?__spriter后缀
if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {
transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
return cb(transformedDeclaration, declarationIndex, declarations);
}
// Background is a shorthand property so make sure `url()` is in there 且判断url是否有?__spriter后缀
else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) {
transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
if(hasImageValue) {
return cb(transformedDeclaration, declarationIndex, declarations);
}
}

如下截图：

 

 

（7）JS代码检查插件gulp-jshint

插件地址：https://www.npmjs.com/package/gulp-jshint/

同时安装jshint-stylish插件，插件地址：https://www.npmjs.com/package/tslint-stylish/

错误和警告输出为一下形式：

 （8）重命名插件gulp-rename

插件地址：https://www.npmjs.com/package/gulp-rename/

 配置文件示例：

gulp.task('jsmin', function() {
//过滤掉.min.js文件
gulp.src(['./js/*.js', '!./js/*.min.js'])
.pipe(uglify({
//支持IE8
ie8: true
}))
//修改扩展名
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/js'));
});

 （8）资源、模块复用插件gulp-file-include

插件地址：https://www.npmjs.com/package/gulp-file-include

（9）自动添加前缀gulp-autoprefixer

插件地址：https://www.npmjs.com/package/gulp-autoprefixer

 

 

以上插件组合后的整体配置文件（包含命令的顺序执行），在命令行中直接输入gulp执行即可： 

 

var gulp = require('gulp');
//HTML压缩插件
var htmlmin = require('gulp-htmlmin');
//SASS编译插件
var sass = require('gulp-sass');
//图片压缩插件
var imagemin = require('gulp-imagemin');
//PNG压缩插件
var imageminPngquant = require('imagemin-pngquant');
//CSS压缩插件
var cleanCSS = require('gulp-clean-css');
//雪碧图合并插件
var spriter = require('gulp-css-spriter');
//js压缩插件
var uglify = require('gulp-uglify');
//添加前缀插件
var autoprefixer = require('gulp-autoprefixer');
//图片压缩插件
var smushit = require('gulp-smushit');
//js校验插件
var jshint = require('gulp-jshint');
//重命名插件
var rename = require("gulp-rename");
//图片压缩中减少重复压缩
var cache = require('gulp-cache');
//模板复用
var fileinclude = require('gulp-file-include');
//html压缩任务
gulp.task('html', function() {
return gulp.src('./*.html')
//资源复用插件
        .pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
//html压缩插件
        .pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./dist'))
});
//sass编译任务--包括scss编译、雪碧图合并、添加前缀、压缩和重命名任务
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sass().on('error', sass.logError))
//雪碧图合并
        .pipe(spriter({
//这是雪碧合成的图
'spriteSheet': './dist/img/scssSpriteSheet.png',
//css引用的图片路径
'pathToSpriteSheetFromCSS': '../img/scssSpriteSheet.png'
}))
//添加前缀
        .pipe(autoprefixer({
//浏览器市场占有率参考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
//配置参考：https://github.com/postcss/autoprefixer
browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
//是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
//        transform: rotate(45deg);
cascade: false
}))
//css压缩
        .pipe(cleanCSS({
//'ie8'：IE8 兼容模式，
compatibility: 'ie8'
}))
//修改扩展名
        .pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css'));
});
//监控文件任务
gulp.task('watch', function() {
//监控 scss 文件，如果有修改，则执行 sass 任务
gulp.watch('./css/*.scss', ['sass']);
//监控 js 文件，如果有修改，则执行 scripts 任务
gulp.watch('./js/*.js', ['scripts']);
//监控 css 文件，如果有修改，则执行 css 任务
gulp.watch('./css/*.css', ['css']);
//监控 图片 文件，如果有修改，则执行 imagemin 任务
gulp.watch('./img/*.{jpg,png}', ['imagemin']);
//监控 图片 文件，如果有修改，则执行 imagemin 任务
gulp.watch('./*.html', ['html']);
});
//图片压缩任务--使用gulp-imagemin插件
//gulp.task('imagemin', function() {
//    gulp.src('./img/*')
//        .pipe(imagemin({
//            progressive: true,
//            svgoPlugins: [{
//                removeViewBox: false
//            }], //不要移除svg的viewbox属性
//            use: [imageminPngquant()] //使用pngquant深度压缩png图片的imagemin插件
//        }))
//        .pipe(gulp.dest('dist/img'))
//});
//更改压缩插件使用gulp-smushit
gulp.task('imagemin', function() {
return gulp.src('./img/*.{jpg,png}')
.pipe(cache(smushit({
//显示压缩率
verbose: true
})))
.pipe(gulp.dest('dist/img'));
});
//css任务--雪碧图合并、添加前缀、压缩、重命名
gulp.task('css', function() {
//过滤掉.min.css文件
return gulp.src(['./css/*.css', '!./css/*.min.css'])
//雪碧图合并
        .pipe(spriter({
//这是雪碧合成的图
'spriteSheet': './dist/img/spritesheet.png',
//css引用的图片路径
'pathToSpriteSheetFromCSS': '../img/spritesheet.png'
}))
//添加前缀
        .pipe(autoprefixer({
//浏览器市场占有率参考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
//配置参考：https://github.com/postcss/autoprefixer
browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
//是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
//        transform: rotate(45deg);
cascade: false
}))
//css压缩
        .pipe(cleanCSS({
//'ie8'：IE8 兼容模式，
compatibility: 'ie8'
}))
//修改扩展名
        .pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css'));
});
//scripts任务--包含压缩和重命名
gulp.task('scripts', function() {
//过滤掉.min.js文件
return gulp.src(['./js/*.js', '!./js/*.min.js'])
.pipe(uglify({
//支持IE8
ie8: true
}))
//修改扩展名
        .pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js'));
});
//js校验任务--jshint
gulp.task('lint', function() {
return gulp.src('./js/*.js')
.pipe(jshint())
//使用了tslint-stylish插件
.pipe(jshint.reporter("jshint-stylish"));
});
//串行方式运行任务:做好依赖
gulp.task('default', ['sass', 'css', 'scripts', 'imagemin', 'html', 'watch']);

 

 说明：

（1）gulp的排除模式：

 

// 使用数组的方式来匹配多种文件
gulp.src(['*.js','!b*.js']) // 匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) // 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

 

（2）gulp 对于 one after one 的任务链，需要加 return

 

 

注意：

（1）配置好文件路径。

（2）安装相关插件 npm i 插件名 --save-dev。

以上插件的安装命令为：

npm install --save-dev gulp
npm install gulp-htmlmin --save-dev
npm install gulp-sass --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-css-spriter --save-dev
npm install gulp-uglify --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-smushit --save-dev
npm install gulp-jshint --save-dev
npm install gulp-rename --save-dev
npm install gulp-cache --save-dev
npm install gulp-file-include --save-dev

（3）所有的文件命名不能出现中文字符。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368893.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Nmap介绍

Nmap介绍

1.Nmap介绍 Nmap用于列举网络主机清单、管理服务升级调度、监控主机或服务运行状况。Nmap可以检测目标机是否在线、端口开放情况、侦测运行的服务类型及版本信息、侦测操作系统与设备类型等信息。 1.1 Zenmap Zenmap是Nmap官方提供的图形界面，通常随Nmap的安装包发布…
阅读更多...
使用Maven安装本地jar

使用Maven安装本地jar

1.问题与选择 Maven是一种非常通用的工具，其可用的公共存储库首屈一指。 但是，总会有一个不在任何地方托管的工件，或者托管该工件的存储库有依赖的风险，因为当您需要它时，它可能不会启动。 发生这种情况时，…
阅读更多...
转：.NET面试题汇总（三）

转：.NET面试题汇总（三）

原文地址：http://www.cnblogs.com/yuan-jun/p/6600692.html 1、简述 private、 protected、 public、 internal 修饰符的访问权限。private : 私有成员, 在类的内部才可以访问。protected : 保护成员，该类内部和继承类中可以访问。public : 公共成员&…
阅读更多...
matlab 多文件编程,是否有可能在MATLAB中为每个文件定义多个函数，并从该文件外部访问它们？...

matlab 多文件编程,是否有可能在MATLAB中为每个文件定义多个函数，并从该文件外部访问它们？...

m文件(即主函数 )中的第一个函数在调用m文件时被调用。 主函数不需要与m文件具有相同的名称，但为了清晰起见，它应该是这样 。 当function和文件名称不同时，必须使用文件名称来调用主函数。m文件中的所有后续函数(称为本地函数 (或旧术语中的“…
阅读更多...
简单的Gradle Web应用程序

简单的Gradle Web应用程序

Gradle通过“ war”和“ jetty”插件轻松支持Java Web应用程序。 本教程将向您展示如何快速创建一个简单的Java Servlet Web应用程序。 我们的基本项目结构将是： basic-websrcmainjavacomcodetutrHelloWorldServlet.javawebappWEB-INFweb.xml首先，创建一…
阅读更多...
SD/MMC相关寄存器的介绍

SD/MMC相关寄存器的介绍

1.SD卡内部架构 在熟悉SD/MMC相关寄存器之前，我们先来看看SD卡的内部架构是怎么样的，如下图所示： 2.SD/MMC相关寄存器的介绍 从上图中总结出：SD卡内部有7个寄存器. 一、OCR,CID,CSD和SCR寄存器保存卡的配置信息; 二、RCA寄存器保存…
阅读更多...
【模板】OI常用模板（待补充）

【模板】OI常用模板（待补充）

//PS：最近修改日期：2017-11-07　　20:41:44 首先感觉这种模板类的东西写了还是很有意义的，毕竟时不时的可以拿出来借鉴一下。 现在因为刚开始写这一类的东西，所以说还不是很详细，若有读者感觉可以补充，欢迎…
阅读更多...
form中action属性后面?传递参数 获取不到

form中action属性后面?传递参数 获取不到

1 $p_id $_REQUEST[p_id]; 2 3 echo "<h1>您将更新商品编号为<span>$p_id</span>的商品信息 <a hreflistproduct.php>查看所有</a></h1> 4 <form actionupdateproduct.do.php?p_id$p_id methodget> 5 商品名称&#xff…
阅读更多...
apche 禁止运行php,学习猿地-apache如何禁止执行php

apche 禁止运行php,学习猿地-apache如何禁止执行php

apache禁止执行php的方法&#xff1a;首先新建一个“.htaccess”文件&#xff1b;然后复制代码内容“Order allow,deny”到“.htaccess”文件中&#xff1b;最后将该文件直接放到网站根目录里即可。apache禁止执行php的方法&#xff1a;第一种禁止上传目录运行php的方法如果你用…
阅读更多...
Apache Camel 2.11发布

Apache Camel 2.11发布

上周Apache Camel 2.11发布了。 这篇博客文章总结了最引人注目的新功能和改进。 有关详细说明&#xff0c;请参见Camel 2.11发行说明 。 1&#xff09;新组件 与往常一样&#xff0c;每个新发行版都包含许多新组件&#xff0c;这些组件由我们庞大的用户群贡献。 谢谢你们。 例…
阅读更多...
linux分区满了，如何进行扩容

linux分区满了，如何进行扩容

转自&#xff1a;https://blog.csdn.net/valage/article/details/73332147 图片中可以看到挂载点“/”的利用率移到100%&#xff0c;空间不够&#xff0c;所以要对其进行分区。 1. 先进入虚拟机设置里增大磁盘空间 注意&#xff1a;将25改成50&#xff0c;以扩大空间。这里…
阅读更多...
RDA DEBUG

RDA DEBUG

DEBUG寄存器&#xff1a;word 0xa0000010 word 0xa0000010 1　　//debug开 word 0xa0000010 0　　//debug关 当然也可以按模块打开/关闭debug信息&#xff0c;如 DBGCFG_KMF/DBGCFG_UMF/DBGCFG_MENU/DBGCFG_TUNER模块等。 所以大家在使用过程中要按源文件所在的模块加打印信息&…
阅读更多...
DIV CSS布局-固定页面开度布局

DIV CSS布局-固定页面开度布局

DIV CSS布局中主要CSS属性介绍&#xff1a; Float: Float属性是DIV CSS布局中最基本也是最常用的属性&#xff0c;用于实现多列功能&#xff0c;我们知道<div>标签默认一行只能显示一个&#xff0c;而使用Float属性可以实现一行显示多个div的功能&#xff0c;最直接解释…
阅读更多...
php获取网页js中的json,从php获取json数据使用js读取显示到网页笔记

php获取网页js中的json,从php获取json数据使用js读取显示到网页笔记

//json与数组转换$array array("username" > "hellojson","age" > 23,"sex">"M");//定义php数组$resjson_encode($array);//var_dump($res);echo $res;//将结果输出到页面?>HTML代码$(function(){$(document)…
阅读更多...
BZOJ.1023.[SHOI2008]cactus仙人掌图(DP)

BZOJ.1023.[SHOI2008]cactus仙人掌图(DP)

题目链接 类似求树的直径&#xff0c;可以用(类似)树形DP求每个点其子树(在仙人掌上就是诱导子图)最长链、次长链&#xff0c;用每个点子节点不同子树的 max{最长链}max{次长链} 更新答案。(不需要存次长链&#xff0c;求解过程中先更新ans&#xff0c;然后再更新最长链即可) 设…
阅读更多...
Spring Java配置

Spring Java配置

我发现许多我认识的Spring开发人员仍然不了解或使用Spring Java Configuration&#xff08;aka JavaConfig&#xff09;。 Spring 3.0引入了此功能&#xff0c;该功能使Spring可以完全用Java进行配置-不再需要XML&#xff01; 我真的很喜欢使用JavaConfig&#xff0c;因为&…
阅读更多...
纯 CSS 实现波浪效果！

纯 CSS 实现波浪效果！

一直以来&#xff0c;使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式&#xff0c;实现贝塞尔曲线&#xff0c;额&#xff0c;暂时是没有很好的方法。 当然&#xff0c;借助其他力量&#xff08;SVG、CANVAS&#xff09…
阅读更多...
Mysql 数据库（三）

Mysql 数据库（三）

一、数值类型 1、整数类型&#xff1a;应用场景&#xff0c;存放年龄&#xff0c;等级&#xff0c;id或者各种号码等等 TINYINT&#xff1a;1个字节存放&#xff0c;有符号范围&#xff1a;-128到127&#xff0c;没有符号范围&#xff1a;0&#xff0c;255 。 SMALLINT&#xf…
阅读更多...
Thonny -- 简洁的 python 轻量级 IDE

Thonny -- 简洁的 python 轻量级 IDE

Thonny目前是 树莓派 上 默认的 Python 开发环境。 该 IDE 是 Institute of Computer Science of University of Tartu &#xff08;爱沙尼亚 的 塔尔图大学 计算机科学院&#xff09;开发的。 最近 yvivid 也体验了一下 Thonny 的开发环境&#xff0c;网站地址为 http://thonn…
阅读更多...
如何造成内存泄漏

如何造成内存泄漏

这将是一个相当邪恶的职位-当您确实希望使某人的生活陷入困境时&#xff0c;您将在谷歌上搜索。 在Java开发领域&#xff0c;内存泄漏只是您在这种情况下会引入的错误类型。 为您的受害者保证几天甚至几周的办公室不眠之夜。 我们将在这篇文章中描述两次泄漏。 两者都很容易理…
阅读更多...
最新文章

Copyright @ 2022~2023