1.先安裝Node.js環境

Grunt和 Grunt 插件是通過 npm 安裝並管理的，npm是 Node.js 的包管理器。Node.js的下載鏈接

安裝完後進行驗證

2.安裝grunt及插件

通過npm install grunt命令行來安裝grunt

安裝完後文件夾裏會多出node_modules文件夾和package-lock.json文件

npm install -g grunt-cli

他可以讓你在項目的任意子目錄中運行grunt 。

壓縮css文件要用到的grunt插件是 grunt-contrib-cssmin所以我們通過命令行npm install grunt-contrib-cssmin來安裝

我們在box文件夾下安裝，但是他會自動安裝到node_modules文件夾中（ps:用‘cd’命令可以切換文件路徑。切換磁盤直接 ‘盤符+:’即可）

3.配置package.json和Gruntfile.js文件

首先通過npm init來生成package.json文件，

運行完後文件夾裏就會多一個package.json文件

文件內容如下所示：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "^1.0.1",
    
 
"grunt-contrib-cssmin": "^2.2.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lg",
  "license": "ISC"
}

接下來配置Gruntfile.js文件

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(
 
‘package.json‘),
        cssmin: {
           files:{
              expand: true,      //必要的
              cwd: ‘src‘,           //要壓縮的文件所在位置的固定路徑
              src: ‘**/*.css‘,    //要壓縮的文件所在位置
              dest: ‘dist‘,         //壓縮後的文件所在位置
              ext:‘.min.css‘     //壓縮後的文件命名
            } 
        }  
    });
    //運行grunt-contrib-cssmin插件
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);

    //當輸入grunt命令時運行grunt-contrib-cssmin
    grunt.registerTask(‘default‘, [‘cssmin‘]);
}

激動人心的時刻到了，下面就來壓縮我們的css文件了

輸入grunt

再倆看目錄結構，可發現在dist下新建了一個css文件夾，結構和src文件夾保持一致

這是由於src: ‘**/*.css‘, 匹配了src文件夾下所有css文件，

ext:‘.min.css‘讓我們壓縮所有css文件，而不是單個文件。

好了Grunt壓縮css就說完了，更多內容自然是參見grunt官網咯，官網

用grunt對css代碼進行壓縮