grunt的簡單應用

　　grunt是幹什麼的呢，一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。這樣就會讓咱們省不少事。

　　廢話很少說我來作一個簡單的壓縮js文件的程序，你們多多看看。

　　首先咱們須要先建立一個文件夾來執行咱們接下來的步驟，文件夾能夠放到本身能找到的任何位置，建完以後咱們須要打開命令提示符來執行咱們接下來的步驟

　　1.經過命令行來進入咱們的文件夾

　　

　　2.接下來咱們須要在命令中輸入 npm install grunt 命令 或 npm install grunt-cli -g 來下載環境，注意這兩種是有分別的，若是咱們是本身一我的作那麼咱們只須要用到前一種，若是是團隊中的人合做的話就要用上第二種了，這回我只演示一下一我的的作法

E:\grunt>npm install grunt
E:\grunt
`-- grunt@1.0.1
+-- coffee-script@1.10.0
+-- dateformat@1.0.12
| +-- get-stdin@4.0.1
| `-- meow@3.7.0
| +-- camelcase-keys@2.1.0
| | `-- camelcase@2.1.1
| +-- decamelize@1.2.0
| +-- loud-rejection@1.6.0
| | +-- currently-unhandled@0.4.1
| | | `-- array-find-index@1.0.2
| | `-- signal-exit@3.0.2
| +-- map-obj@1.0.1
| +-- minimist@1.2.0
| +-- normalize-package-data@2.3.8
| | +-- hosted-git-info@2.4.2
| | +-- is-builtin-module@1.0.0
| | | `-- builtin-modules@1.1.1
| | +-- semver@5.3.0
| | `-- validate-npm-package-license@3.0.1
| | +-- spdx-correct@1.0.2
| | | `-- spdx-license-ids@1.2.2
| | `-- spdx-expression-parse@1.0.4
| +-- object-assign@4.1.1
| +-- read-pkg-up@1.0.1
| | +-- find-up@1.1.2
| | | +-- path-exists@2.1.0
| | | `-- pinkie-promise@2.0.1
| | | `-- pinkie@2.0.4
| | `-- read-pkg@1.1.0
| | +-- load-json-file@1.1.0
| | | +-- graceful-fs@4.1.11
| | | +-- parse-json@2.2.0
| | | | `-- error-ex@1.3.1
| | | | `-- is-arrayish@0.2.1
| | | +-- pify@2.3.0
| | | `-- strip-bom@2.0.0
| | | `-- is-utf8@0.2.1
| | `-- path-type@1.1.0
| +-- redent@1.0.0
| | +-- indent-string@2.1.0
| | | `-- repeating@2.0.1
| | | `-- is-finite@1.0.2
| | | `-- number-is-nan@1.0.1
| | `-- strip-indent@1.0.1
| `-- trim-newlines@1.0.0
+-- eventemitter2@0.4.14
+-- exit@0.1.2
+-- findup-sync@0.3.0
| `-- glob@5.0.15
+-- glob@7.0.6
| +-- fs.realpath@1.0.0
| +-- inflight@1.0.6
| | `-- wrappy@1.0.2
| +-- inherits@2.0.3
| `-- once@1.4.0
+-- grunt-cli@1.2.0
| `-- resolve@1.1.7
+-- grunt-known-options@1.1.0
+-- grunt-legacy-log@1.0.0
| +-- colors@1.1.2
| +-- grunt-legacy-log-utils@1.0.0
| | +-- chalk@1.1.3
| | | +-- ansi-styles@2.2.1
| | | +-- escape-string-regexp@1.0.5
| | | +-- has-ansi@2.0.0
| | | | `-- ansi-regex@2.1.1
| | | +-- strip-ansi@3.0.1
| | | `-- supports-color@2.0.0
| | `-- lodash@4.3.0
| +-- hooker@0.2.3
| +-- lodash@3.10.1
| `-- underscore.string@3.2.3
+-- grunt-legacy-util@1.0.0
| +-- async@1.5.2
| +-- getobject@0.1.0
| +-- lodash@4.3.0
| `-- which@1.2.14
| `-- isexe@2.0.0
+-- iconv-lite@0.4.17
+-- js-yaml@3.5.5
| +-- argparse@1.0.9
| | `-- sprintf-js@1.0.3
| `-- esprima@2.7.3
+-- minimatch@3.0.4
| `-- brace-expansion@1.1.8
| +-- balanced-match@1.0.0
| `-- concat-map@0.0.1
+-- nopt@3.0.6
| `-- abbrev@1.1.0
+-- path-is-absolute@1.0.1
`-- rimraf@2.2.8
npm WARN enoent ENOENT: no such file or directory, open 'E:\grunt\package.json'
npm WARN grunt No description
npm WARN grunt No repository field.
npm WARN grunt No README data
npm WARN grunt No license field.

顯示上面的內容就好了，由於內容太多很差截圖。

　　3.以後咱們須要就咱們的文件夾中建立一個Gruntfile.js的js文件，以後咱們須要在這個js文件中寫入

// JavaScript Document
module.exports = function(grunt){
　　//1.引入的插件，由於這回咱們只寫壓縮js的因此咱們只引入grunt-contrib-uglify這個文件
　　grunt.loadNpmTasks('grunt-contrib-uglify');

　　//2.設置任務:
　　grunt.initConfig({

　　　　//壓縮js的變量名
　　　　uglify:{

　　　　　　compress:{

　　　　　　　　//options是咱們的要求，能夠不寫，寫入這個是爲了防止咱們的文件損壞
　　　　　　　　options:{
　　　　　　　　　　mangle:false
　　　　　　　　},

　　　　　　　　expand:true,

　　　　　　　　//以當前文件夾找路徑
　　　　　　　　cwd:'src',

　　　　　　　　//由於不知道會起什麼名因此用通用符*來代替，後面的.js是爲了找到js文件的
　　　　　　　　src:'*.js',

　　　　　　　　//以當前文件夾建立同級目錄的文件夾dest，接着在裏面建立js文件夾後放入壓縮後的js文件
　　　　　　　　dest:'dest/js'
　　　　　　}
　　　　}
　　});
　　//設置默認任務:
　　grunt.registerTask('default','uglify');
}

以後咱們須要在命令符中下載所須要的插件

npm install grunt-contrib-uglify --save-dev

以後咱們只須要在下載完後輸入grunt

 

以後咱們就能夠收穫一個壓縮好後的js文件了

若是還想要其餘的效果咱們只須要進入grunt官網就能夠慢慢調試了