grunt学习笔记（一）

一、安装grunt

1、grunt是一套基于node.js的前端自动化工具，集合了很多插件。

例如：

（1）、代码压缩

（2）、代码合并

（3）、代码效验

2、安装grunt方法，并且安装好插件

（1）、安装grunt的前提，需要先前安装好，node和npm。安装方法后续补充。

（2）、grunt的安装方法

    a、当安装好node和npm后，在命令行中输入

1. npm install -g grunt-cli
2. 将grunt安装如全局，这样我们就可以在任何一个文件夹中使用grunt。

    b、先在需要使用grunt的文件中，写好npm配置文件package.json。这样就可以自动化安装好，你所需要的grunt插件，创建package.json文件，在命令行输入

1. npm init

接下来你将进入一系列的选择

好吧，我基本是无视这些选择的，一直敲到yes就可以了，当然在以后我会慢慢解释这些选项是干什么用的。

    c、在目录中打开package.json文件，发现是这样的

1. {
2. "name":"grunt",
3. "version":"1.0.0",
4. "description":"",
5. "main":"index.js",
6. "scripts":{
7. "test":"echo "Error: no test specified" && exit 1"
8. },
9. "author":"",
10. "license":"ISC",
11. }

现在要做的事情，就是在"license":"ISC"，后面写出你当前项目所需要的所有grunt插件

1. {
2. "name":"grunt",
3. "version":"1.0.0",
4. "description":"",
5. "main":"index.js",
6. "scripts":{
7. "test":"echo "Error: no test specified" && exit 1"
8. },
9. "author":"",
10. "license":"ISC",
11. "devDependencies":{
12. "grunt":"~0.4.1",
13. "grunt-contrib-uglify":"~0.2.1"
14. }
15. }

devDependencies下面是生产环境中，所需要的一些基于node的插件。

    d、当你写好之后，在命令行中输入

1. npm install

现在npm就会解析你在，devDependencies中写到的所需要的插件，并且下载。打开目录，你会发现多了这些文件。

是不是跟你在devDependencies中写到的一模一样。当然还有一种更好的方法，以后详细介绍

二、使用uglify插件

1、调整目录

将你的目录调整为这个样子

（1）、创建js文件夹

（2）、创建src_js文件夹

（3）、创建gruntfile.js文件

（4）、在js文件夹中创建index.js文件，并写入代码

1. (function(name){
2. return document.write('你好'+name);
3. }
4. )()

2、gruntfile.js文件

（1）这个文件是grunt解析，你所部署的grunt任务的文件，在其中写入

1. module.exports =function(grunt){
2. grunt.initConfig({
3. uglify:{
4. build:{
5. src:'js/index.js',
6. dest:'scr_js/index.min.js'
7. }
8. }
9. })
11. grunt.loadNpmTasks('grunt-contrib-uglify');
13. grunt.registerTask('default',['uglify']);
14. }

3、接下来在命令行中输入

1. grunt

成功了的情况是这样的

4、得到结果

你会发现，在src_js文件夹下面多出了index.min.js文件，打开发现里面代码是这样的

1. !function(a){return document.write("你好"+a)}();

好吧。代码被压缩了。

 

总结：这就是grunt的基本使用方法，也是uglify插件的基本使用方法，简单高效，同款还有gulp，我还没使用过，以后有机会也尝试以下。当然这只是基础的不能再基础的方法，还有很多东西没说，没关系，以后一一补充。

 

来自为知笔记(Wiz)