gulp前端自動化常用插件彙總

来源:http://www.cnblogs.com/mengfangui/archive/2017/07/24/7230109.html
-Advertisement-
Play Games

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({
            //支持IE8
            ie8: 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({
            //支持IE8
            ie8: true
        }))
        //修改擴展名
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/js'));
});

 

 

以上插件的整體配置文件為： 

 

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');  

//html壓縮任務
gulp.task('htmlmin', function() {
    return gulp.src('./*.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/autoprefixer
            browsers: ['> 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']);
});

//圖片壓縮任務--使用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/autoprefixer
            browsers: ['> 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({
            //支持IE8
            ie8: 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', ['watch','sass','css','scripts','imagemin','htmlmin']);

 

 

 

 

註意配置好文件路徑、安裝相關插件。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於JS中數組的分析操作
    JS數組的基礎操作代碼： <script type="text/javascript"> 數組的三種定義 var arr1 = new Array(); var arr3 = Array(1,2,3.5,4,'5',false); var arr2 = [1,2,3,4,'5',"aa",true] ...
  • ReactNative 互動朋友圈API設計
    開啟第一版本的迭代設計，互動朋友圈API設計，上篇文章公佈了我們的初稿原型圖設計。 該APP類似微信朋友圈，添加好用功能類似微博添加好友的那種關註與被關註的形式。運營形式類似於快手！ 互動朋友圈API設計 一、登錄 請求地址：http://192.168.2.8020/api/Login 請求方式： ...
  • pc端的企業網站（IT修真院test9）詳解一個響應式完成的pc端項目
    一：引入bootstrap框架 昨天一直被bootstrap柵格系統折磨。 why? 我本來想一邊碼字，一邊學習柵格佈局的。but不成功。這時我頭腦已經昏了。 下午，我查看了bootstrap的官網，帶著我的問題：究竟怎麼使用bootstrap的框架呢？ 發現問題一：我原先外部引入的bootstra ...
  • ES6關於Unicode的相關擴展
    [1]概述 [2]大括弧表示 [3]字元編解碼 [4]for...of [5]normalize() [6]U修飾符 ...
  • 在原有的日期上添加天數輸出添加後的日期_js
    開始編碼工作也有段時間了，想想沒有留下點什麼，有點遺憾。學到的一些經驗，寫寫，分享一下。也給自己整理一下。 今天分享一下，在原有的日期上添加天數輸出添加後的日期。開始做的時候，簡單的思路是，直接用new Date()，得到的本地時間再在new Date().getDate();再加上對應的天數。 這 ...
  • 小型 Web 頁項目打包優化方案
    背景 目前團隊中新的 Web 項目基本都採用了 Vue 或 React ，加上 RN，這些都屬於比較重量級的框架，然而對於小型 Web 頁面，又顯得過大。早期的一些項目則使用了較原始的 HTML 頁面構建技術，但業務邏輯基本無法復用。 近半年做過幾個小型 Web 頁面，在不斷學習前端知識的同時，也在 ...
  • 跨域的那些事兒
    前言 最近做項目的時候遇到了一些跨域問題，雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁項目剛上線完，寫篇文章總結下。 造成跨域的兩種策略 瀏覽器的同源策略會導致跨域，這裡同源策略又分為以下兩種 DOM同源策略：禁止對不同源頁面DOM進行操作。這裡主要場景是iframe跨域 ...
  • jqueryUI
    jQuery UI是以jQuery為基礎的代碼庫。包含底層用戶交互、動畫、特效、和可更換主題的可視控制項。我們可以直接用它來構建具有很好交互性的web應用程式。 jQueryUI網址：http://jqueryui.com 常用的jqueryUI插件：Draggable 1、設置數值的滑動條 1 <! ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類