Grunt_1從安裝開始創建一個基本的Grunt - zszs－IT工程師數位筆記本

文章出處

Grunt的介紹：http://www.gruntjs.net/getting-started

文件架構：https://github.com/zhangsai521314/Grunt

1：安裝Git Bash，下載地址https://git-scm.com/download/win（安裝一路next）

2：安裝node.js+npm，下載地址：https://nodejs.org/en/download/

注意：到這個選項的時候選這個

3：Git Bush安裝Grunt客戶端：npm install -g grunt-cli

4：打開git bash查看安裝是否成功。

4：項目結構圖：

5:把package.json放到MvcApplication1文件夾下。package.json的基本內容。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.1"
  }
}

6：git bash進入MvcApplication1文件夾下。執行npm install，如果此時沒有package.json文件則會報錯。

7：執行成功

8：在目錄下添加Gruntfile.js

// 常用的功能：
    // uglify:壓縮
    // cssmin:css操作
    // imagemin：圖片操作
    // htmlmin:html操作
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {//壓縮
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'//頭信息
            },
            build: {
             //動態文件映射，當運行任務時會自動找到cwd參數下的src參數下所有符合規則的js文件
             //添加或刪除文件時不需要更新 Gruntfile。
             files: [
                {
                 expand: true,       // 啟用動態擴展
                 cwd: 'Scripts/',    // 源文件匹配都相對此目錄
                 src: ['*.js'],      // 匹配規則
                 dest: 'dest/js/',   // 任務目標保存路徑
                 ext: '.min.js',     // 目標文件路徑中文件的擴展名
                 extDot: 'first'     // 擴展名始于文件名的第一個點號
                },
             ],
            }
        },
        cssmin: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',                
            },
            //動態文件映射，當運行任務時會自動找到cwd參數下的src參數下所有符合規則的css文件
            build: {
                files: [{
                    expand: true,
                    cwd: 'Content/',
                    src:  ['*.css','**/*.css'],
                    dest: 'dest/css/',
                    ext: '.min.css',
                    extDot: 'first'
                }]
            }
        }
        
        });
        
    //載入concat和uglify插件，分別對于合并和壓縮 
    grunt.loadNpmTasks('grunt-contrib-uglify');//
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    //當執行 Grunt 且不通過參數指定任務時，將執行本配置的內容任務。
    grunt.registerTask('default', ['uglify','cssmin']);
}