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官网就可以慢慢调试了
posted on
