Grunt In Visual Studio－Kenneth的部落格

網頁前端自動化工具 – Grunt

安裝Grunt

Grunt是基於node.js所撰寫，所以必須先確保電腦中有安裝node.js，可以在以下網址中下載並安裝node.js

如果你是使用 Visual Studio 2015 或都沒有安裝Visual Studio, 可以去 Node.js Tools for Visual Studio 去下載

https://www.visualstudio.com/en-us/features/node-js-vs.aspx

如果是Visual Studio 2013，請下載Extensions for Node.js

https://visualstudiogallery.msdn.microsoft.com/0f162ede-1772-4ef0-96f3-3d53c2622f1f?SRC=Home

我是下載Node.js Tools 1.1 RC3 for Visual Studio 2013

為什麼要裝Node.js Tools 1.1 RC3 for Visual Studio 2013呢?

因為Visual Studio 2013預設是沒有project for nodejs的

安裝Extension

在目前的Visual Studio中，要整合Grunt到專案之中，必須要透過Extension的方式（在不久的將來，Visual Studio的新版本會提供內建的整合），首先要將以下兩個Extension安裝到Visual Studio中

Task Runner Explorer - 用來偵測、綁定和執行Grunt設定檔中的任務
Package Intellisense - 提供package.json(npm)和bower.json的intellisense

設定Grunt基本任務

建立一個Node.js application
選擇空白專案（因為只需要寫JavaScript)

建好後

打開Package.json 檔案，輸入專案需要的模組

{
  "name": "NodejsConsoleApp1",
  "version": "0.0.0",
  "description": "NodejsConsoleApp1",
  "main": "app.js",
    "author": {
        "name": "KennethHu",
        "email": "Kenneth.hu@hotmail.com"
    },
     "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "^0.11.3",
        "grunt-contrib-nodeunit": "^0.4.1",
        "grunt-contrib-uglify": "^0.5.0",
        "grunt-contrib-concat": "^0.5.1",
        "grunt-contrib-cssmin": "^0.14.0",
        "grunt-contrib-htmlmin": "^0.6.0"
 }
}

輸入後就會看到所有模組了

在專案目錄下建立 gruntfile.js 檔案，並輸入設定檔

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'dest/<%= pkg.name %>.min.js'
            }
        },
        concat: {
            dist: {
                options: {
                    separator: '\n\r',
                    banner: '/*\nConcatinated JS file \n' +
                    'Author: Mahesh \n' +
                    'Created Date: <%= grunt.template.today("yyyy-mm-dd") %>' +
                    '\n */ \n'
                },
                // select the files to concatenate
                src: ['src/js/JavaScript1.js', 'src/js/JavaScript2.js'],
                // the resulting JS file
                dest: 'dest/MyAngularLogic.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['concat', 'uglify']);
};