gulp插件

時間  2019-11-18
標籤 gulp 插件 欄目 JavaScript 简体版
原文   原文鏈接

gulp教程之gulp-livereload
gulp-livereload拯救F5！當監聽文件發生變化時，瀏覽器自動刷新頁面。【事實上也不全是徹底刷新，例如修改css的時候，不是整個頁面刷新，而是將修改的樣式植入瀏覽器，很是方便。】特別是引用外部資源時，刷新整個頁面真是費時費力。javascript

安裝：命令提示符執行 cnpm install gulp-livereload --save-devcss

 

gulp教程之gulp-autoprefixer
使用gulp-autoprefixer根據設置瀏覽器版本自動處理瀏覽器前綴。使用她咱們能夠很瀟灑地寫代碼，沒必要考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時，就能充分體現它的優點。例如兼容性不太好的flex佈局。】html

安裝：命令提示符執行 cnpm install gulp-autoprefixer --save-devjava

配置gulpfile.jsgit

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文件，減小網絡請求。github

安裝：命令提示符執行 cnpm install gulp-concat --save-devweb

配置gulpfile.jsnpm

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文件，減少文件大小。gulp

安裝：命令提示符執行 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/style.css?rev=@@hash">
<script src="js/js-one.js?rev=@@hash"></script>
<script src="js/js-two.js"></script>
</head>
<body>
<div>hello, world!</div>
<img src="img/test.jpg?rev=@@hash" alt="" />
<script src="js/js-three.js?rev=@@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']);
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程