grunt-contrib-imagemin 套件可以用 Grunt 來將進行檔的壓縮。 使用時先用 npm 安裝 grunt-contrib-imagemin 套件。 npm install grunt-contrib-imagemin --save-dev 接著開啟 gruntfile 設定 task，這邊有些參數可供設定，可參考 gruntjs/grunt-contrib-imagemin: Minify PNG and JPEG images.。 再來將 plugin 載入。 grunt.loadNpmTasks('grunt-contrib-imagemin'); 最後再將 task 註冊即可。 像是下面這邊設定了一個 imagemin 的 task，會將 images 目錄下副檔名為 png/jpg/gif 的圖片進行壓縮，壓縮後會放回到 images 目錄。 var grunt = require('grunt'); grunt.initConfig({ imagemin: { main:{ options: { optimizationLevel: 3, svgoPlugins: [{ removeViewBox: false }] }, files: [{ expand: true, cwd: 'Images/', src: ['**/*.{png,jpg,gif}'], dest: 'Images/’ }] } } }); grunt.

接著實際來用用看 Grunt，首先 gruntfile 先用 require 載入 grunt，然後用 registerTask 註冊一個任務，這邊帶入任務名為 default，並將任務的動作用 function 指定，這邊這個任務就只是簡單的顯示 hello world 訊息而已。 var grunt = require('grunt'); grunt.registerTask('default', '',function(){ console.log('hello world'); }); 實際透過命令呼叫 grunt，可以看到 default 任務被 grunt 調用了，因此會在螢幕上顯示 hello world。 接著可以試著撰寫難一點的來看看，註冊一個 world 任務，執行時會顯示 hello world，接著註冊一個 hello 任務，需帶入名字執行，執行會顯示 hello 以及帶入的名字，最後註冊 default 任務，執行時會調用 world 任務以及用 adrian 當參數去調用 hello 任務。 var grunt = require('grunt'); grunt.registerTask('world', '', function(){ console.log('hello world'); }); grunt.registerTask('hello', '', function(name){ if(!name || !name.length) grunt.warn('you need to provide a name.

Gruntfile 的設定可以直接從下面例子來看。 module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint']); }; 設定大概會分幾個部份，會有 Task 與 Target 的設定，有 npm 套件的載入，以及 Task 的註冊。 以這例子來說，這邊設定了 jshint task，這個 task 會用 jshint 分析指定的 javascript 的程式。 許多套件都會牽扯到檔案的設定，像是上面例子 jshint 要分析的檔案就是要設定的。Grunt 對於檔案設定提供了三種不同的設定方式，分別是 Compact Format、Files Object Format、Files Array Format。 Compact Format 設定方式如下，可指定一組 source 與 destination 檔案。 grunt.initConfig({ jshint: { foo: { src: ['src/aa.js', 'src/aaa.js'] }, }, concat: { bar: { src: ['src/bb.

使用 Grunt 前需先確定環境是否已經安裝了 Node.js 與 grunt-cli。 npm install grunt-cli -g 環境安裝無誤就可以開始使用 Grunt，使用上大致分為下列幾個步驟： 以 Windows 的操作為例，首先需要有專案目錄。 md <folder> 接著需要建立 npm 套件的設定檔。 npm init 再來要建立 Grunt 設定檔。 type NUL > Gruntfile.js 加入 Grunt 套件。 npm install grunt --save-dev 加入 Grunt plug-in。 npm install <plug-in> --save-dev 開啟 Grunt 設定檔設定 Grunt task。 notepad gruntfile.js 運行 Grunt task。 grunt

Visual Studio 2015 開始支援 Grunt，使用時需先為專案加入 NPM Configuration File。 {% img /images/posts/GruntInVS2015/1.png %} 還有 Grunt Configuration File。 {% img /images/posts/GruntInVS2015/2.png %} 接著在 package.json 中加入要使用的 Grunt plugin。 {% img /images/posts/GruntInVS2015/3.png %} {% img /images/posts/GruntInVS2015/4.png %} 設定完按下編譯或是滑鼠右鍵快顯選單中的 Restore Packages 選單選項，即可透過 NPM 下載 Grunt plugin。 {% img /images/posts/GruntInVS2015/5.png %} 我們可以透過 Visual Studio 的狀態列觀察到套件下載的狀態。 {% img /images/posts/GruntInVS2015/6.png %} {% img /images/posts/GruntInVS2015/7.png %} 若有需要也可以透過 Output 視窗查看細部處理資訊。 {% img /images/posts/GruntInVS2015/8.png %} 下載完畢，設定完 gruntfile.js，我們就可以在 Task Runner Explorer 點選對應的 Task 進行運行。