前端構建工具grunt

 簡單配置grunt

        配置gulp仍是grunt都是在node的環境下安裝的，因此在這以前保證你的node環境已經安裝好了!

--------------------------------------------------------------------------------

     * nodejs安裝很簡單，去百度搜索 nodejs官網下載。

   下載這個以後直接雙擊，點擊安裝和下一步就好，這裏很簡單沒必要多說。

     *其次就是驗證你安裝nodejs是否成功的方法：別多想,fn+f5，輸入cmd，而後輸入，node -v，出現了下面結果就說明安裝成功了，而後繼續修行！

      

       而後安裝淘寶鏡像，安裝淘寶鏡像的緣由你好奇能夠本身百度一下！接下來步驟:在剛纔輸入node -v的界面輸入npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安裝！安裝完成一樣，能夠輸入cnpm -v驗證有木有安裝成功! 接下來須要你在某個文件夾下操做,跟着作,輸入（我進入F盤的requirejs):1,f:

      2,cd requirejs ，

      3.全局安裝grunt，輸入:  cnpm install -g grunt-cli

      4,這以後要配置一個json文件在你剛纔的目錄下， ，

      5.輸入：cnpm install。安裝成功會生成一個node_modules的文件。

      6，跟配置json文件同樣配置Gruntfile.js：在你的此js文件中輸入:

  讀取package.json的信息
 pkg:grunt.file.readJSON('package.json')     module.exports = function(grunt){  // 配置  grunt.initConfig({  pkg:grunt.file.readJSON('package.json')  })  // 加載插件  grunt.loadNpmTasks('grunt-contrib-uglify');   // 默認任務  grunt.registerTask('default',['uglify']);  }  

其中grunt.loadNpmTasks('grunt-contrib-uglify');是壓縮js插件，就是我我這裏智配置了js壓縮插件,須要什麼直接加載插件就行，而後後面的步驟都同樣;解釋一下uglify：{}對象裏面的build參數，src是你要壓縮的js路徑，dest是一個你要解壓到的路徑;配置號之後，基本能夠壓縮你js下的文件了；
 7，命令行輸入:grunt;出現了，綠色的 Done without error說明壓縮成功，文件夾有 a.mon.js說明成功了；
       
一些插件和參數供大家學習和參考:

<!-- grunt-contrib-uglify js壓縮 grunt-contrib-uglify:壓縮以及合併JavaScript文件。 參數：  banner：文檔頭部添加,通常作說明和註釋用  footer：文檔底部添加，與banner功能相同 mangle：參數爲false不混淆變量名（不改變原始定義的變量名）；true：壓縮後，改變原始定義的變量名 preserveComments：參數爲all：保留註釋；false:刪除所有註釋；some：保留@preserve/@license/@cc_on等註釋   report：參數爲min：輸出壓縮率；false：不輸出信息；也可爲gzip  beautify：參數爲true：美化代碼，即格式化顯示，合併對象等；false：不美化代碼   1.按原文件結構壓縮js文件夾內全部JS文件   expand：若是設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。  cwd：須要處理的文件所在目錄  src：表示須要處理的文件。若是採用數組的形式，數組中的每一項都是一個文件名，可使用通配符（*）。  dest：處理後的文件所在的目錄。  ext：處理後的文件的後綴名。  flatten：刪除全部生成的dest的路徑部分。  rename：一個函數，接受匹配到的文件名、匹配的目標位置，返回一個新的目標路徑。  grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  uglify: {  options: {  //添加banner  banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'  },  buildall: {  files: [{  expand: true,  cwd: 'js',//js目錄下  src: '**/*.js',//全部js文件  dest: 'output/js'//輸出到此目錄下  }]  }  } });  合併壓縮 grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  uglify: {  release: {// 合併壓縮a.js和b.js  files: {  'output/js/index.min.js':['js/a.js','js/b.js']  }  }  } });