grunt前端自動化(壓縮)工具

grunt很是強大的自動壓縮代碼，使用代碼更加輕量、簡潔，因此grunt是很是值得學習的。

安裝grunt是基於nodeJS，打開cmd框，咱們能夠輸入node -v 檢測是否在node服務下

。

須要npm包管理工具安裝grunt，檢測npm參考上面，安裝好是會提示版本號。

而後全局安裝grunt輸入命令： npm install grunt-cli -g 

 → 安裝完成。

切到D盤建立一個存放grunt的文件夾，輸入命令：npm install grunt。參考上面會有安裝成功的提示。

依次安裝好。輸入： grunt --version

  grunt安裝好了。

 

接下來就能夠操做frunt壓縮了O(∩_∩)O~

 1  //建立Gruntfile.js--->
 2 
 3 1.引入  4 module.export(grunt){  5 grunt.loadNpmTasks('grunt-contrib-uglify')//依賴插件
 6 
 7 2.設置任務  8 grunt.initconfig({  9  uglify:{ 10  min:{ 11  options:{ 12             mangle:false
13  }, 14             expand:true,(分開壓縮) 15             cwd:'src', 16             src:'*.js',(文件的地址文件名) 17             dest:'dest',(壓縮後的地址和文件名) 18  rename:funcion(dest,src){ 19             return dest + '/' +src.replace('.js','.min.js'); 20  } 21  } 22  } 23 }) 24 //設置默認任務
25 grunt.registerTask('default',['uglify']) 26 }

//Gruntfile.js放在要壓縮的代碼同級目錄下。

而後能夠打開cmd，運行grunt 就能夠看到壓縮好的加min的代碼了O(∩_∩)O~.

經常使用的的插件有

grunt.loadNpmTasks('grunt-contrib-uglify');//js壓縮
grunt.loadNpmTasks('grunt-contrib-concat');//css合併
grunt.loadNpmTasks('grunt-contrib-cssmin');//css壓縮
grunt.loadNpmTasks('grunt-contrib-htmlmin');//html壓縮
grunt.loadNpmTasks('grunt-contrib-imagemin');//image壓縮
grunt.loadNpmTasks('grunt-contrib-watch');//檢測代碼變化，無刷新壓縮

grunt和gulp用法基本同樣，依客戶習慣而使用。