grunt學習

時間 2019-11-10

標籤 grunt 學習欄目 Node.js 简体版

原文原文鏈接

有些時候，項目中的靜態資源，好比圖片佔用的文件有點大，影響加載的速度，因此會選擇grunt對其進行壓縮打包。對於grunt其餘的用法，還在繼續學習中，先記錄下關於grunt的一些學習。css

grunt是一套基於Node.js的命令行工具，因此先確保環境中已安裝好了Node環境。node

接着安裝grunt，以下：npm

一、安裝CLIjson

CLI是grunt命令行，先將其安裝到全局環境中。點擊開始->運行->cmd，執行如下命令進行安裝：app

npm install -g grunt-cli函數

安裝一次便可，之後就能夠在任何項目的子目錄下運行grunt，執行grunt命令。grunt

二、配置package.json和Gruntfile文件工具

這兩份文件須要添加在項目裏的，且要在同一個目錄下。如tool文件所示。學習

以壓縮css文件下的style.css、images文件、js文件下的flex.js爲例：flex

① package.json

用於存儲項目的元數據，在此文件中列出項目依賴的grunt和Grunt插件，即Gruntfile.js中定義的任務，放置於devDependencies配置段內。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-uglify": "^0.11.1"
  }
}

② Gruntfile文件

Gruntfile.js或者Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。

（1）''wrapper''函數

module.exports = function (grunt) {
    // ...
}

（2）項目/任務配置

用initConfig方法將存儲在package.json文件中的JSON元數據讀取引入到grunt config中。

grunt.initConfig({
        // 從package.json讀取配置信息
        pkg: grunt.file.readJSON('package.json'),
        ......
})

爲系統配置任務，如imagemin圖片壓縮，主要是找到要壓縮的圖片路徑src，設置壓縮後的存放路徑dest。

imagemin: {
            /* 壓縮圖片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [
                       {
                        expand: true,
                        cwd: '../images/',
                        src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片
                        dest: '../static/images' // 優化後的圖片保存位置，覆蓋舊圖片，而且不做提示
                       }
                    ]
                }
        }

（3）加載imagemin插件

grunt.loadNpmTasks('grunt-contrib-imagemin');

（4）執行imagemin任務

grunt.registerTask('images', ['imagemin']);

完整配置代碼以下：

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        // 從package.json讀取配置信息
        pkg: grunt.file.readJSON('package.json'),
        imagemin: {
            /* 壓縮圖片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [
                       {
                        expand: true,
                        cwd: '../images/',
                        src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片
                        dest: '../static/images' // 優化後的圖片保存位置，覆蓋舊圖片，而且不做提示
                       }
                    ]
                }
        },
        uglify: {
          options: {
            sourceMap: false,
             banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//壓縮文件頭部註釋
          },
          dist: {
            files: [{
               expand:true,
                cwd:'../js/',//js目錄下
                src:'**/flex.js',//js下的flex.js文件，如果因此js文件，則爲**/*.js
                dest: '../static/js'//壓縮後的文件輸出到此目錄下
            }
            ]
          }

        },
       autoprefixer: {
        options: {
          // Task-specific options go here.
        },
        dist: {
              files: [{
                expand:true,
                src:['../css/style.css'],//css文件下的style.css
                dest: '../static/css/'//輸出到此目錄下
            }]
          }
        },
       cssmin: {
            dist: {
              files: [
              {
                expand:true,
                cwd:'../css/',//css目錄下
                src:['**/style.css'],//全部css文件
                dest: '../static/css'//輸出到此目錄下
            }
            ]
          }
      }
    });
    // 加載包含相似"imagemin"任務名的插件
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-autoprefixer');

    // 默認被執行的任務列表
    grunt.registerTask('default', ['uglify','autoprefixer','cssmin','imagemin']);
    grunt.registerTask('autopre', ['autoprefixer']);
    grunt.registerTask('css', ['autoprefixer','cssmin']);
    grunt.registerTask('images', ['imagemin']);
    grunt.registerTask('js', ['uglify']);
};