gulp插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp插件相关的知识，希望对你有一定的参考价值。
gulp教程之gulp-livereload
gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。
安装：命令提示符执行 cnpm install gulp-livereload --save-dev
gulp教程之gulp-autoprefixer
使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】
安装：命令提示符执行 cnpm install gulp-autoprefixer --save-dev
配置gulpfile.js
var gulp = require(‘gulp‘), autoprefixer = require(‘gulp-autoprefixer‘); gulp.task(‘testAutoFx‘, function () { gulp.src(‘src/css/index.css‘) .pipe(autoprefixer({ browsers: [‘last 2 versions‘, ‘android >= 4.0‘], cascade: true, //是否美化属性值 默认：true 像这样： //-webkit-transform: rotate(45deg); // transform: rotate(45deg); remove:true //是否去掉不必要的前缀 默认：true })) .pipe(gulp.dest(‘dist/css‘)); });
gulp教程之gulp-concat
使用gulp-concat合并javascript文件，减少网络请求。
安装：命令提示符执行 cnpm install gulp-concat --save-dev
配置gulpfile.js
var gulp = require(‘gulp‘), concat = require(‘gulp-concat‘); gulp.task(‘testConcat‘, function () { gulp.src(‘src/js/*.js‘) .pipe(concat(‘all.js‘))//合并后的文件名 .pipe(gulp.dest(‘dist/js‘)); });
gulp教程之gulp-uglify
使用gulp-uglify压缩javascript文件，减小文件大小。
安装：命令提示符执行 cnpm install gulp-uglify --save-dev
配置gulpfile.js
var gulp = require(‘gulp‘), uglify = require(‘gulp-uglify‘); gulp.task(‘jsmin‘, function () { gulp.src(‘src/js/index.js‘) .pipe(uglify()) .pipe(gulp.dest(‘dist/js‘)); });
压缩多个js文件
var gulp = require(‘gulp‘), uglify = require(‘gulp-uglify‘); gulp.task(‘jsmin‘, function () { gulp.src([‘src/js/index.js‘,‘src/js/detail.js‘]) //多个文件以数组形式传入 .pipe(uglify()) .pipe(gulp.dest(‘dist/js‘)); });
匹配符“!”，“*”，“**”，“{}”
var gulp = require(‘gulp‘), uglify= require(‘gulp-uglify‘); gulp.task(‘jsmin‘, function () { //压缩src/js目录下的所有js文件 //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹） gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘]) .pipe(uglify()) .pipe(gulp.dest(‘dist/js‘)); });
指定变量名不混淆改变
var gulp = require(‘gulp‘), uglify= require(‘gulp-uglify‘); gulp.task(‘jsmin‘, function () { gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘]) .pipe(uglify({ //mangle: true,//类型：Boolean 默认：true 是否修改变量名 mangle: {except: [‘require‘ ,‘exports‘ ,‘module‘ ,‘$‘]}//排除混淆关键字 })) .pipe(gulp.dest(‘dist/js‘)); });
gulp-uglify其他参数 更多参数参考：https://github.com/terinjokes/gulp-uglify#user-content-options
var gulp = require(‘gulp‘), uglify= require(‘gulp-uglify‘); gulp.task(‘jsmin‘, function () { gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘]) .pipe(uglify({ mangle: true,//类型：Boolean 默认：true 是否修改变量名 compress: true,//类型：Boolean 默认：true 是否完全压缩 preserveComments: ‘all‘ //保留所有注释 })) .pipe(gulp.dest(‘dist/js‘)); });
gulp教程之gulp-rev-append
使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存。
安装：命令提示符执行 cnpm install gulp-rev-append --save-dev
配置html页面引用
gulp-rev-append 插件将通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）
<!doctype html> <html> <head> <link rel="stylesheet" href="css/[email protected]@hash"> <script src="js/[email protected]@hash"></script> <script src="js/js-two.js"></script> </head> <body> <div>hello, world!</div> <img src="img/[email protected]@hash" alt="" /> <script src="js/[email protected]@hash"></script> </body> </html>
配置gulpfile.js
基本使用（给页面引用url添加版本号，以清除页面缓存）
var gulp = require(‘gulp‘),
rev = require(‘gulp-rev-append‘);
gulp.task(‘testRev‘, function () {
gulp.src(‘src/html/index.html‘)
.pipe(rev())
.pipe(gulp.dest(‘dist/html‘));
});
gulp教程之gulp-minify-css【gulp-clean-css】
使用gulp-minify-css压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。重要：gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致。
安装：命令提示符执行 cnpm install gulp-minify-css --save-dev
基本使用
var gulp = require(‘gulp‘),
cssmin = require(‘gulp-minify-css‘);
gulp.task(‘testCssmin‘, function () {
gulp.src(‘src/css/*.css‘)
.pipe(cssmin())
.pipe(gulp.dest(‘dist/css‘));
});
gulp-minify-css 最终是调用clean-css，其他参数查看这里
var gulp = require(‘gulp‘),
cssmin = require(‘gulp-minify-css‘);
gulp.task(‘testCssmin‘, function () {
gulp.src(‘src/css/*.css‘)
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: ‘ie7‘,//保留ie7及以下兼容写法 类型：String 默认：‘‘or‘*‘ [启用兼容模式； ‘ie7‘：IE7兼容模式，‘ie8‘：IE8兼容模式，‘*‘：IE9+兼容模式]
keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: ‘*‘
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest(‘dist/css‘));
});
给css文件里引用url加版本号（根据引用文件的md5生产版本号），像这样：
var gulp = require(‘gulp‘), cssmin = require(‘gulp-minify-css‘); //确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev] cssver = require(‘gulp-make-css-url-version‘); gulp.task(‘testCssmin‘, function () { gulp.src(‘src/css/*.css‘) .pipe(cssver()) //给css文件里引用文件加版本号（文件MD5） .pipe(cssmin()) .pipe(gulp.dest(‘dist/css‘)); });
若想保留注释，这样注释即可：
/*! Important comments included in minified output. */
gulp教程之gulp-imagemin
使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片），很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！
安装：命令提示符执行 cnpm install gulp-imagemin --save-dev
基本使用
var gulp = require(‘gulp‘), imagemin = require(‘gulp-imagemin‘); gulp.task(‘testImagemin‘, function () { gulp.src(‘src/img/*.{png,jpg,gif,ico}‘) .pipe(imagemin()) .pipe(gulp.dest(‘dist/img‘)); });
gulp-imagemin其他参数 具体参看
var gulp = require(‘gulp‘), imagemin = require(‘gulp-imagemin‘); gulp.task(‘testImagemin‘, function () { gulp.src(‘src/img/*.{png,jpg,gif,ico}‘) .pipe(imagemin({ optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 })) .pipe(gulp.dest(‘dist/img‘)); });
深度压缩图片
var gulp = require(‘gulp‘), imagemin = require(‘gulp-imagemin‘), //确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev] pngquant = require(‘imagemin-pngquant‘); gulp.task(‘testImagemin‘, function () { gulp.src(‘src/img/*.{png,jpg,gif,ico}‘) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性 use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 })) .pipe(gulp.dest(‘dist/img‘)); });
只压缩修改的图片。压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取（C:\\Users\\Administrator\\AppData\\Local\\Temp\\gulp-cache）。
var gulp = require(‘gulp‘), imagemin = require(‘gulp-imagemin‘), pngquant = require(‘imagemin-pngquant‘), //确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev] cache = require(‘gulp-cache‘); gulp.task(‘testImagemin‘, function () { gulp.src(‘src/img/*.{png,jpg,gif,ico}‘) .pipe(cache(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] }))) .pipe(gulp.dest(‘dist/img‘)); });
gulp教程之gulp-htmlmin
使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。
安装：命令提示符执行 cnpm install gulp-htmlmin --save-dev
基本使用
var gulp = require(‘gulp‘), htmlmin = require(‘gulp-htmlmin‘); gulp.task(‘testHtmlmin‘, function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; gulp.src(‘src/html/*.html‘) .pipe(htmlmin(options)) .pipe(gulp.dest(‘dist/html‘)); });
更多压缩【参数】请查看 https://github.com/kangax/html-minifier [html-minifer docs]
gulp教程之gulp-less
使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。
安装：命令提示符执行 cnpm install gulp-less --save-dev
基本使用
var gulp = require(‘gulp‘), less = require(‘gulp-less‘); gulp.task(‘testLess‘, function () { gulp.src(‘src/less/index.less‘) .pipe(less()) .pipe(gulp.dest(‘src/css‘)); });
编译多个less文件
var gulp = require(‘gulp‘), less = require(‘gulp-less‘); gulp.task(‘testLess‘, function () { gulp.src([‘src/less/index.less‘,‘src/less/detail.less‘]) //多个文件以数组形式传入 .pipe(less()) .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css以及detail.css });
匹配符“!”，“*”，“**”，“{}”
var gulp = require(‘gulp‘), less = require(‘gulp-less‘); gulp.task(‘testLess‘, function () { //编译src目录下的所有less文件 //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹） gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) .pipe(less()) .pipe(gulp.dest(‘src/css‘)); });
调用多模块（编译less后压缩css）
var gulp = require(‘gulp‘), less = require(‘gulp-less‘), //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev] cssmin = require(‘gulp-minify-css‘); gulp.task(‘testLess‘, function () { gulp.src(‘src/less/index.less‘) .pipe(less()) .pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘})) .pipe(gulp.dest(‘src/css‘)); });
当less有各种引入关系时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改
var gulp = require(‘gulp‘), less = require(‘gulp-less‘), //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev] sourcemaps = require(‘gulp-sourcemaps‘); gulp.task(‘testLess‘, function () { gulp.src(‘src/less/**/*.less‘) .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write()) .pipe(gulp.dest(‘src/css‘)); });
监听事件（自动编译less）
若每修改一次less，就要手动执行任务，显然是不合理的，所以当有less文件发生改变时使其自动编译
var gulp = require(‘gulp‘), less = require(‘gulp-less‘); gulp.task(‘testLess‘, function () { gulp.src([‘src/less/*.less‘,‘!src/less/extend/{reset,test}.less‘]) .pipe(less()) .pipe(gulp.dest(‘src/css‘)); }); gulp.task(‘testWatch‘, function () { gulp.watch(‘src/**/*.less‘, [‘testLess‘]); //当所有less文件发生改变时，调用testLess任务 });
异常处理
当编译less时出现语法错误或者其他异常，会终止watch事件，通常需要查看命令提示符窗口才能知道，这并不是我们所希望的，所以我们需要处理出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。
var gulp = require(‘gulp‘), less = require(‘gulp-less‘); //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber notify = require(‘gulp-notify‘), plumber = require(‘gulp-plumber‘); gulp.task(‘testLess‘, function () { gulp.src(‘src/less/*.less‘) .pipe(plumber({errorHandler: notify.onError(‘Error: <%= error.message %>‘)})) .pipe(less()) .pipe(gulp.dest(‘src/css‘)); }); gulp.task(‘testWatch‘, function () { gulp.watch(‘src/**/*.less‘, [‘testLess‘]); });
以上是关于gulp插件的主要内容，如果未能解决你的问题，请参考以下文章