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({//支持IE8ie8: 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({//支持IE8ie8: 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/autoprefixerbrowsers: ['> 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/autoprefixerbrowsers: ['> 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({//支持IE8ie8: 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)所有的文件命名不能出现中文字符。
gulp 常用插件汇总相关推荐
- gulp常用插件总结
近期在学习使用gulp,通过写这篇总结文章,让自己加深对gulp常用插件的印象. 1. gulp-refresh 插件地址:gulp-refresh 注:1.该插件需要配合Chrome浏览器的扩展程序 ...
- Flarum常用插件汇总
flarum常用插件汇总 基础的命令(ps:针对docker安装,首先要进入flarum安装的目录下执行) docker exec -ti flarum extension require ***** ...
- wordpress常用插件汇总
WordPress之所以能成为目前最具人气的独立博客程序,除了无数爱好者为它开发的主题外,源源不断的插件支持也是重要的原因之一.wordpress的强大,也是在于无数爱好者源源不断的主题和插件. wo ...
- VSCode常用插件汇总
这篇博客主要是我使用vscode过程中的插件汇总,使用了这么长时间,总想有个总结,也方便日后查看,这里我将我使用的插件分为基础.框架.工具三个类型. 官网地址 VSCode插件官网地址,里面有很多的插 ...
- grasshopper elk插件_Grasshopper常用插件汇总
Grasshopper插件除了个别为收费版,其余均为免费版,为了方便大家使用,本文整理了一些常用插件. (1)Anemone 循环插件,常用来做分形结构体 (2)Cocoon 使用Marching C ...
- sublime Text Vue中常用插件汇总说明
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
- burpsuit常用插件汇总
一.商店下载: 1.403 Bypass (也可以github下载)pro用户专享 2.Autorize -- 强大的越权自动化测试工具 3.AutoRepeater -- AutoRepeater可 ...
- vscode 常用插件汇总
简介 为了更高的提高开发效率,一款好的IDE不可或缺的需要一些插件来支撑. 插件介绍 1.GitLens 根据鼠标在代码文件位置,显示对应 Git 提交记录. 2.vscode-icons 不同类型的 ...
- Asset Store上常用的40个Unity插件汇总——进阶开发者必备Unity插件
上篇文章着重介绍了Unity Asset Store(Unity资源商店)上一些超棒的资源与素材. unity老司机的资源推荐与常用插件汇总合集 - 简书 Unity插件资源购买小技巧 - 简书 本篇 ...
最新文章
- JDK源码研究Jstack,JMap,threaddump,dumpheap的原理
- 民间的 Pokémon 知识图谱
- 动态代理——》AOP —— Spring 中的 AOP||AOP 相关术语||学习 spring 中的 AOP 要明确的事
- JDBC——入门知识【转】
- Codeforces Round #268 (Div. 1) C. Hack it! 数位dp + 构造数位
- SqlServer数据库 性能监视器 打开路径、添加监控参数 等详解
- python netsnmp与pysnmp
- swoole php 微信推送,基于thinkphp5、swoole和easywechat微信模板消息推送
- 如何下载安装Python
- Ubuntu apt/apt-get安装sqliteman出现“E: 无法定位软件包”解决方案
- 人像抠图处理百度API接口调用
- 为什么我选择移民新西兰?
- 利用PS如何进行精细抠图
- 纯C语言编程实现数独解法
- 六度分离(hdu1869,floyd最短路)
- 创建主键报错:Incorrect column specifier for column ‘id‘
- Android中PopupWindow遮罩层的设置
- 九招使用 Telegram必学,使用Telegram 必看实用功能
- 按住crtl单击MyEclipse的方法没有跳转的解决办法
- ubuntu 20.04 设置DNS
热门文章
- python phpstudy_Java、python及phpstudy的环境配置
- Atlas Of Cardiovascular Emergencies 心血管急症图集
- Dev-C++安装教程附免费安装包资源
- iospython开发工具_使用Python开发iOS程序
- C语言 | 哈夫曼(haffman)算法实现数据的解压缩(源代码)
- Matlab | 数字信号处理:Matlab语言的基本使用方法(matlab代码版)
- mysql怎么用游标修改数据,如何使用mysql 游标?
- 高性能交易系统设计原理
- python xlwt写入数据超过范围限制_python的xlwt不能正确写入以及缓冲区问题
- tensorflow测试gpu_如何检验 tensorflow-gpu 安装成功 ?