- gulp-htmlmin:壓縮html文件
- gulp-imagemin:壓縮圖片
- imagemin-pngquant:深度壓縮png圖片
- gulp-cache:只壓縮修改的圖片
- gulp-minify-css:壓縮CSS文件
- gulp-make-css-url-version:給css文件引用文件加版本號(文件MD5)
- gulp-rev-append:通過正則(?:href|src)=”(.*)[?]rev=(.*)[“]查找並給指定鏈接填加版本號(默認根據文件MD5生成,因此文件未發生改變,此版本號將不會變)
- gulp-uglify:使用gulp-uglify壓縮javascript文件,減小文件大小
- gulp-concat:使用gulp-concat合併javascript文件,減少網絡請求
- gulp-autoprefixer:根據設置瀏覽器版本自動處理瀏覽器前綴。使用她我們可以很瀟灑地寫代碼,不必考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時,就能充分體現它的優勢。例如兼容性不太好的flex佈局。】
- gulp-less:
- gulp-livereload:當監聽文件發生變化時,瀏覽器自動刷新頁面。【事實上也不全是完全刷新,例如修改css的時候,不是整個頁面刷新,而是將修改的樣式植入瀏覽器,非常方便。】特別是引用外部資源時,刷新整個頁面真是費時費力。
詳細講解以上命令:
- gulp-htmlmin:壓縮html文件
- 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 checked/>
- 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'));
- });
2.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'));
- });
3.imagemin-pngquant:深度壓縮png圖片
- var gulp = require('gulp'),
- 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()] //使用pangquant深度壓縮png圖片的imagemin插件
- }))
- .pipe(gulp.dest('dist/img'));
- });
4.gulp-cache:只壓縮修改的圖片
- var gulp = require('gulp'),
- 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'));
- });
5.gulp-minify-css:壓縮CSS文件;gulp-make-css-url-version:給css文件引用文件加版本號(文件MD5)
- var gulp = require('gulp'),
- cssmin = require('gulp-minify-css');
- gulp.task('testCssmin',function(){
- gulp.src('src/css/*.css')
- .pipe(cssver()) //給css文件引用文件加版本號(文件MD5)
- .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'));
- });
6.gulp-rev-append:通過正則(?:href|src)=”(.*)[?]rev=(.*)[“]查找並給指定鏈接填加版本號(默認根據文件MD5生成,因此文件未發生改變,此版本號將不會變)
- var gulp = require('gulp');
- var rev = require('gulp-rev-append');
- gulp.task('testRev',function(){
- gulp.src('src/html/html3.html')
- .pipe(rev())
- .pipe(gulp.dest('dist/html'))
- });
- gulp
7.uglify:使用gulp-uglify壓縮javascript文件,減小文件大小
- var gulp = require('gulp'),
- uglify = require('gulp-uglify');
- gulp.task('jsmin',function(){
- gulp.src(['src/js/*.js','!dist/js/**/{test1,test2}.js'])
- .pipe(uglify({
- mangle:{toplevel:true} ,//類型:Boolean 默認:true 是否修改變量名
- compress: true, //類型:Boolean 默認:true 是否完全壓縮
- //preserveComments: 'all' //保留所有註釋 ?????
- }))
- .pipe(gulp.dest('dist/js'));
- });
8.gulp-concat:使用gulp-concat合併javascript文件,減少網絡請求
- 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'));
- });
9.gulp-autoprefixer:根據設置瀏覽器版本自動處理瀏覽器前綴。使用她我們可以很瀟灑地寫代碼,不必考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時,就能充分體現它的優勢。例如兼容性不太好的flex佈局。】
- var gulp = require('gulp'),
- autoprefixer = require('gulp-autoprefixer');
- gulp.task('testAutoFx',function(){
- gulp.src('src/css/css3.css')
- .pipe(autoprefixer({
- browsers:['last 5 versions','Android >= 4.0'],
- cascade:true, //是否美化屬性值 默認:true 像這樣:
- //-webkit-transform: rotate(45deg);
- // transform: rotate(45deg);
- remove:true //是否去掉不必要的前綴 默認:true
- }))
- .pipe(gulp.dest('dist/css'));
- //gulp-autoprefixer的browsers參數詳解 (傳送門):
- /*
- last 2 versions: 主流瀏覽器的最新兩個版本;
- last 1 Chrome versions: 谷歌瀏覽器的最新版本;
- last 2 Explorer versions: IE 的最新兩個版本;
- last 3 Safari versions: 蘋果瀏覽器最新三個版本;
- Firefox >=20: 火狐瀏覽器的版本大於或等於20;
- ios 7:IOS7版本;
- Firefox ESR: 最新ESR版本的火狐;
- > 5%:全球統計有超過5%的使用率;
- */
//各瀏覽器的標識:
/*
Android: for Android WebView;
BlackBerry or bb: for Blackberry browser;
Chrome: for Google Chrome;
Firefox or ff: for Mozilla Firefox;
Explorer or ie: for Internet Explorer;
iOS or ios_saf: for iOS Safari;
Opera: for Opera;
Safari: for desktop Safari;
OperaMobile or op_mob: for Opera Mobile;
OperaMini or op_mini: for Opera Mini;
ChromeAndroid or and_chr;
FirefoxAndroid or and_ff: for Firefox for Android;
ExplorerMobile or ie_mob: for Internet Explorer Mobile.
*/
});
10gulp-less;gulp-livereload:當監聽文件發生變化時,瀏覽器自動刷新頁面。【事實上也不全是完全刷新,例如修改css的時候,不是整個頁面刷新,而是將修改的樣式植入瀏覽器,非常方便。】特別是引用外部資源時,刷新整個頁面真是費時費力。
- var gulp = require('gulp'),
- var less = require('gulp-less'),
- livereload = require('gulp-livereload');
- gulp.task('less',function(){
- gulp.src('src/less/*.less')
- .pipe(less())
- .pipe(gulp.dest('src/css'))
- .pipe(livereload());
- });