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‘]);
});