使用 gulp 壓縮圖片

阿新 • • 發佈：2017-07-07

mage 可能 true 所有 fault ssi 4.2 cnblogs 提高

請務必理解如下章節後閱讀此章節：

安裝 Node 和 gulp
使用 gulp 壓縮 JS

壓縮圖片文件可降低文件大小，提高圖片加載速度。

找到規律轉換為 gulp 代碼

規律

找到 images/ 目錄下的所有文件，壓縮它們，將壓縮後的文件存放在 dist/images/ 目錄下。

gulp 代碼

一、安裝 gulp-imagemin 模塊

提示：你需要使用命令行的 cd 切換至對應目錄再進行安裝操作和 gulp 啟動操作。

在命令行輸入

npm install gulp-imagemin

安裝成功後你會看到如下信息：(安裝時間可能會比較長)

[email protected]

 */ node_modules/gulp-imagemin
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]

/*  */ ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

/*  */, [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

二、創建 gulpfile.js 文件編寫代碼

在對應目錄創建 gulpfile.js 文件並寫入如下內容：

// 獲取 gulp
var gulp = require(‘gulp‘);

// 獲取 gulp-imagemin 模塊
var imagemin = require(‘gulp-imagemin‘)

// 壓縮圖片任務
// 在命令行輸入 gulp images 啟動此任務
gulp.task(‘images‘, function () {
    // 1. 找到圖片
    gulp.src(‘images/*.*‘)
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存圖片
        .pipe(gulp.dest(‘dist/images‘))
});

// 在命令行使用 gulp auto 啟動此任務
gulp.task(‘auto‘, function () {
    // 監聽文件修改，當文件被修改則執行 images 任務
    gulp.watch(‘images/*.*)‘, [‘images‘])
});

// 使用 gulp.task(‘default‘) 定義默認任務
// 在命令行使用 gulp 啟動 images 任務和 auto 任務
gulp.task(‘default‘, [‘images‘, ‘auto‘])

三、在 images/ 目錄下存放圖片

在 gulpfile.js 對應目錄創建 images 文件夾，並在 images/ 目錄下存放圖片。

四、運行 gulp 查看效果

在命令行輸入 gulp +回車

你將看到命令行出現如下提示

gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js
[18:10:42] Starting ‘images‘...
[18:10:42] Finished ‘images‘ after 5.72 ms
[18:10:42] Starting ‘auto‘...
[18:10:42] Finished ‘auto‘ after 6.39 ms
[18:10:42] Starting ‘default‘...
[18:10:42] Finished ‘default‘ after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)

接著閱讀：使用 gulp 編譯 LESS

使用 gulp 壓縮圖片

mage 可能 true 所有 fault ssi 4.2 cnblogs 提高請務必理解如下章節後閱讀此章節：安裝 Node 和 gulp 使用 gulp 壓縮 JS 壓縮圖片文件可降低文件大小，提高圖片加載速度。找到規律轉換為 gulp 代碼規律找到 i

CocosCreator和gulp-使用tinypng批量壓縮圖片

上篇文章介紹瞭如何用gulp-imagemin外掛來自動批量壓縮CocosCreator專案的圖片資源，imagemin雖然使用方便且免費，但缺點也很明顯，就是耗時長而且壓縮比不高（壓縮後大概比原圖小10-15%）。其實還有一個更牛的壓縮神器，叫 tinypng（官網： https

c# 無損高質量壓縮圖片代碼

++ osi name source 新路 public rip erp lan 最近，項目上涉及到了圖像壓縮，發現原有的圖像壓縮功能，雖然保證了圖像的大小300K以內，但是壓縮後的圖像看的不在清晰，並且，限定了圖片的Height或者是Width。在CSDN上看到了一個

Nodejs前端服務器壓縮圖片

res back gem callback nbsp 承擔能力 true bsp Nodejs作為前端服務器，自然能承擔處理圖片的能力，使用GM for nodejs 作為圖片處理器，調用ImageMagick處理圖片使用ImageMagick var image

canvas前端壓縮圖片

參考 read ble element pre dev 轉換制圖 status 參考網上的用法，下面是利用canvas進行的圖片壓縮 <!DOCTYPE html> <html> <head> <meta charset

最簡單的方法來壓縮圖片，改變圖片大小

com post 分享圖片大小壓縮圖片 bubuko log OS 技術分享 1. 2. 3.按照百分比或像素調整即可最簡單的方法來壓縮圖片，改變圖片大小

如何有效實現前端壓縮圖片並上傳功能

res 滿足 utf boot ade 賦值 als 多次 and 　　隨著現在手機的像素越來越高，很多照片動輒幾兆甚至十幾兆，上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對於許多技術人員來說，處理起來這樣的問題往往不知道該怎麽下手，那麽下面就跟大家講解一下如何在前

Xamarin.Android 壓縮圖片並上傳到WebServices

越來越大 () exists jpeg color 文件寫入 data pen map 　　隨著手機的拍照像素越來越高，導致圖片贊的容量越來越大，如果上傳多張圖片不進行壓縮、質量處理很容易出現OOM內存泄漏問題。　　最近做了一個項目，向webservices上傳多張照片，

js壓縮圖片

ID 數據轉換 ascii碼獲得 bsp put base ase eat /** * 獲得base64 * @param {Object} obj * @param {Number} [obj.width] 圖片需要壓縮的寬度，高度會跟隨調整

壓縮圖片,直接使用大圖,在小控件上會有毛邊

pre current OS option phi osi begin CA send 使用UIImage+YYAdd.h的: - (UIImage *)imageByResizeToSize:(CGSize)size { if (size.width <=

Java 後端壓縮圖片

平滑 warn 正常 GC 繪制 java eight new wid import java.io.*;import java.util.Date;import java.awt.*;import java.awt.image.*;import javax.imageio

上傳圖片時壓縮圖片 - 前端（canvas）做法

als ase java use reac ice efi 壓縮圖片 basic HTML前端代碼： <?php $this->layout(‘head‘); ?> <?php $this->layout(‘sidebar‘); ?>

上傳圖片時壓縮圖片 - 後端做法

rep create 路徑 creat 彩色 images rom sim 不同 /** * 函數：調整圖片尺寸或生成縮略圖 v 1.1 * @param $Image 需要調整的圖片(含路徑) * @param $Dw 調整時最大寬

壓縮圖片大小的軟件怎麽使用，怎麽壓縮圖片文件

分享 ali 通過安裝使用介紹 res 幫助直接圖片的壓縮軟件怎麽使用呢？很多人不知道圖片壓縮軟件的使用方法，很多的圖片文件就會進行擱置，對於壓縮軟件來講，找到比較好的圖片壓縮軟件也是對自己的圖片文件負責，下面就為大家介紹一款圖片壓縮軟件的使用方法。 1：首先要將

批量壓縮圖片

dir var eal require 壓縮圖片 add () explorer read var images = require("images"); var fs = require("fs"); var path = "./images"; async func

megapix-image外掛使用Canvas壓縮圖片上傳 MegaPixImage.js下載

MegaPixImage.js下載地址 <!DOCTYPE html > <html> <head> <title>通過Canvas及File API縮放並上傳圖片</title> <script

怎樣壓縮圖片大小

現在從事自媒體工作的人是越來越多了，大多數自媒體人在寫文章的時候都會配圖，但是有的平臺只給上傳多少k以內的圖片，很多時候我們上傳的數碼裝置拍攝的圖片就會遇到經常上傳不了的情況，這是因為在高畫素下拍攝的圖片大小遠超過平臺可以容忍的大小，這個時候我們就要選擇去壓縮圖片，那如何高效率的壓縮圖片大小呢，今天小編就給大

VUE彈框上傳圖片+預覽+壓縮圖片

先看一下實現效果這裡彈出框我使用了一個外掛---------YDUI，一隻注重審美，且效能高效的移動端&微信UI。安裝： $ npm install vue-ydui --save 在入口檔案中配置： import

無損壓縮圖片，有沒有什麽好的在線方法

下載軟件桌面好的所有清晰度圖片壓縮圖像們的以及如今在網絡上無論是寫文章，聊天，寫網頁幾乎都離不開圖片，因為圖片可以帶動氣氛，像皮卡丘動漫類型的圖片往往都能逗人笑，但是有的圖片面積過於龐大，導致上傳至網頁或平臺內失敗，而且圖片保留至電腦或手機內過多的話，會影

android -------- 壓縮圖片檔案工具類

專案中常常遇到檔案壓縮問題，上傳檔案大小限制今天簡單的分享一點乾貨，檔案壓縮，圖片壓縮，壓縮Bitmap 主要通過尺寸壓縮和質量壓縮，以達到清晰度最優效果圖原始碼地址：

使用 gulp 壓縮圖片

規律

gulp 代碼

相關推薦