跟我一起入門grunt，讀我這篇文章就夠了！

這是一個菜鳥的學習筆記，很適合也是菜鳥的你！

相關傳送門：

1. 點擊這裏觀看相關的別人的視頻；
2. 點擊這裏去往grunt網站；
3. 點擊這裏去“基德哈噗”上看grunt。

開始學習：

一、grunt的開發環境

二、個人目錄：

注意點：

1. package.json文件的配置

   {
       "name": "grunt_test",    //下載的包名和自定的名字不能一致，有衝突
       "version": "1.0.0",
   }

    

三、全局安裝 grunt-cli 與局部安裝grunt

npm install -g grunt-cli
npm install grunt --save-dev

安裝到這裏直接運行grunt命令是會報錯的，需要手動創建一個Gruntfile.js的文件，運行grunt任務的時候，首先會找到這個文件。

四、官網有文件配置示例，我從官網直接搬運過來並且做了一點點小小的修改：

module.exports = function(grunt) {

  // 初始化配置grunt任務
  grunt.initConfig({
    // 讀取相關的項目信息
    pkg: grunt.file.readJSON('package.json'),
    // 配置插件（該插件爲壓縮js）
    uglify: {
       // 選項，可有可無
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      
      build: {
        // 輸入路徑
        src: 'src/<%= pkg.name %>.js',
        // 輸出路徑
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加載對應的任務插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默認被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};

上面的示例是先用 npm install grunt-contrib-uglify --save-dev 命令安裝了壓縮的插件，然後像上面示例一樣配置文件；

插件的說明和使用方法在文章開頭的鏈接都能找到。

直接輸入grunt命令，就能執行grunt的任務了，具體的使用技巧可觀看視頻或者是官網；

END;