一鍵自動生成圖片 ——帶你玩轉grunt-responsive-images + imagemagick + grunt（windows版）

乾貨滿滿，前方高能:

這可能是Udacity史上最詳細的圖片自動生成教程！

在Udacity的前端入門課程中的課程12 單位，格式和環境：圖片的壓縮、優化和自動化一節中，介紹了如何使用插件去自動的生成不同解析度，不同壓縮比的圖片。在本節課中，給出了各類不同的插件的文檔和材料，遺憾的是，並沒有一條線，系統的將這些工具串起來，讓他們發揮應有的作用。而且據我了解，撲面而來的大量插件，文檔和學習材料，把很多同學搞暈，讓他們在此處卡住，並且由於最終的項目就算不掌握這一部分，也可以做完項目，因此很多同學繞過了這一部分知識的掌握。但是只要做好一次設置之後，grunt-responsive-images + imagemagick確實能夠非常快速有效的做到一鍵自動化的生成不同解析度的，不同壓縮比的圖片，從而讓我們在生成圖片方面節約大量的時間和精力。但是經過一周的跌跌撞撞之後，終於，這條線顯現出來了。在此，分享給後來者。下面，就讓我帶領大家開始圖片自動生成之旅吧~

一、 理清關係： node.js npm grunt grunt-responsive-images插件 imagemagick

首先我們要弄清楚各個對象是做什麼的，各個配置文件是做什麼的以及他們之間的關係。只須淺層的了解，能把他們用起來就可以，不必過分深究。

查遍網路，居然沒有一張靠譜的圖，所以我只好大概畫了一張示意圖，請大家湊合看。請看下圖：

簡單的說，

1) nodejs是一個運行環境，相當於一個操作系統，在它上面可以運行各種的軟體。

2) npm是一個包管理器，是nodejs自帶的一個軟體，用來安裝各種插件或者軟體。

3) Grunt

a. Grunt是一個task runner，它最主要的功能是可以運行任務，只要給他一個gruntfile.js文件。他就會按照這個文件的要求運行任務。

b. Grunt需要在nodejs的基礎上才能運行；

c. Grunt的安裝可以使用npm。

d. Grunt擁有很多的插件模塊(例如grunt-responsive-images)，可以使用npm安裝這些插件。

e. 修改完package.json文件，執行npm

install， npm會按照package.json文件的要求去安裝所有的軟體。當然了，Grunt以及grunt-responsive-images可以單獨使用命令行安裝，也可以使用package.json文件安裝。

4) Grunt-responsive-images會調用一個imagemagick軟體去真正的完成圖片的生成。

二、操作步驟：

1. 安裝nodejs

1） 訪問http://nodejs.org/，下載nodejs，並安裝。

如果遇到問題，可以查看更多細節，嘗試自行解決，請參考: http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html

安裝完成後可以使用cmd（win+r然後輸入cmd進入）測試下是否安裝成功。方法：在cmd下輸入node -v，出現下圖版本提示就是完成了NodeJS的安裝。

2） Npm其實是nodejs自帶的 包管理工具。安裝了nodejs，其實就已經自動安裝了npm（Node packaged modules）。

3） 升級npm，確保npm是最新的版本。

npm update -g npm

2. 使用包管理器npm安裝grunt以及grunt -responsive-images插件

1） 訪問http://gruntjs.com/

2） 安裝grunt的命令行執行工具CLI（command

line interface）。

npm install -g grunt-cli

注意:

Grunt是project級別的軟體，也就是說，grunt跟git一樣，每個project需要安裝一次。

安裝了CLI，不代表安裝了grunt。這只是可以讓grunt命令在cmd中開始工作。

要安裝CLI,

否則在cmd中輸入grunt會出現 「Command Not Found」的錯誤。

更多細節請參考:

http://blog.csdn.net/u014592293/article/details/50275163

3） 去到你的project所在的文件夾，按住shift鍵，單擊右鍵，選擇「Open

command window here」，在當前的project文件夾打開命令行。

4） 放入一個package.json文件，並按照自己的需求修改（重點）

該文件要注意的部分是 "devDependencies"和"dependencies"，它決定了一會要安裝各種grunt插件以及插件的版本。這其中就包括了grunt以及"grunt-responsive-images"插件等。

更多細節,請參考: https://gruntjs.com/getting-started

package.json文件實例：

{n"name":n"reponsive-images",n"version":n"0.1.0",n"repository": {n"type":n"git",n"url":n"https://github.com/udacity/responsive-images.git"n},n"devDependencies": {n"grunt":n"~0.4.5",n"grunt-contrib-jshint": "~0.10.0",n"grunt-contrib-nodeunit": "~0.4.1",n"grunt-contrib-uglify": "~0.5.0",n"grunt-contrib-clean": "~0.6.0",n"grunt-mkdir":n"~0.1.2",n"grunt-contrib-copy":n"~0.8.0"n},n"dependencies": {n"grunt-responsive-images":n"^0.1.6"n}n}n

5） 運行npm install命令。

這裡說一下，插件當然也是可以單個安裝的。比如單獨安裝"grunt-responsive-images"插件:

npm install grunt-responsive-images --save-dev

3. 安裝imagemagick

1) 訪問https://www.imagemagick.org/script/index.php

->download

2) 根據自己的操作系統選擇安裝包並安裝。（跟普通軟體一樣，此處無驚喜。我選擇的是Win64 dynamic 16 bits）

3) 安裝完畢， 可以測試一下是否安裝成功。按照官網的說法是：

magick "c:/myimages/image.png" "c:/myimages/image.jpg

你會發現，真的完成了一個對圖片image.png的格式轉換。至此，imagemagick安裝成功了。

4. 修改Gruntfile.js (重點)

Gruntfile.js是一個配置文件，在這個文件中，我們可以通過修改參數，讓grunt按照我們的參數去生成圖片。這些參數包括:

width,height,suffix(圖片的名字前綴)，quality(圖片的壓縮比，數值越小，圖片質量越差)，aspectRatio(是否保持原有的寬高比)等等。

cwd是存放源圖片的文件夾路徑，dest是存放生成圖片的文件夾路徑。

更多細節, 請參考: https://gruntjs.com/sample-gruntfile

Gruntfile.js實例:

/*nAfter you have changed the settings atn"Your code goes here",nrun thisnwith one of these options:n"grunt" alone creates a new, completed images directoryn"grunt clean" removes the images directoryn"grunt responsive_images" re-processes images without removingnthe old onesn*/nnmodule.exports = function(grunt) {nngrunt.initConfig({nresponsive_images: {ndev: {noptions: {nengine: im,nsizes: [{nwidth: 1600,nheight:900,nsuffix: _large_2x,nquality: 70,nupscale: true,naspectRatio:falsen},{nwidth: 800,nheight:n450,nsuffix: _large_1x,nquality: 50,nupscale: true,naspectRatio:falsen},{nwidth: 400,nheight:n225,nsuffix: _medium,nquality: 30,nupscale: true,naspectRatio:falsen},{nwidth: 200,nheight:112,nsuffix: _small,nquality: 20,naspectRatio:falsen}]n},nn/*nYou dont need to change this part if you dont changenthe directory structure.n*/nfiles: [{nexpand: true,nsrc: [*.{gif,jpg,png}],ncwd: images_src/,ndest: images/n}]n}n},nn/* Clear out the images directory if it exists */nclean: {ndev: {nsrc: [images],n},n},nn/* Generate the images directory if it is missing */nmkdir: {ndev: {noptions: {ncreate: [images]n},n},n},nn/* Copy the "fixed" images that dont go through processingninto the images/directory */ncopy: {ndev: {nfiles: [{nexpand: true,nsrc: images_src/fixed/*.{gif,jpg,png},ndest: images/n}]n},n},n});nngrunt.loadNpmTasks(grunt-responsive-images);ngrunt.loadNpmTasks(grunt-contrib-clean);ngrunt.loadNpmTasks(grunt-contrib-copy);ngrunt.loadNpmTasks(grunt-mkdir);ngrunt.registerTask(default, [clean, mkdir, copy,nresponsive_images]);n};n

5. 運行grunt命令

你會發現grunt真的按照我們的參數要求生成了各種圖片。

這下我們可以盡情享用nodejs+npm+grunt+grunt-image-responsive插件+imagemagick給我們帶來的便利了。配置成功後，每次我們只需要修改Gruntfile.js中的參數就可以多次生成我們想要的圖片了。是不是很棒？！

在我提供的Gruntfile.js 文件中，還支持clean和copy功能。感興趣的小夥伴也可以嘗試一下。

參考文章：https://24ways.org/2013/grunt-is-not-weird-and-hard/

推薦閱讀：