grunt的入门教程 (uglify jshint csslint watch )

（学习过程中遇到问题，随时与我沟通）

1、使用grunt优化web项目前，先下载node.js,下载地址:https://nodejs.org/dist/v4.4.1/node-v4.4.1-x64.msi,下载后如图所示：

点击安装，一路next即可安装成功，输入:node -v,查看安装版本，如图：

2、node.js安装完成后即可使用npm工具安装grunt,先将grunt-cli安装到全局环境中，代码如下：

npm install -g grunt-cli

（上述命令需要使用Administrator 权限，否则安装不了）

出现如图提示即为成功：

3、创建一个简单的grunt优化项目工作空间，包含文件夹：src test build ,文件：Gruntfile.js，package.json，如图：

在package.json文件中添加如下内容：

{
  "version": "1.0.0",
  "name": "test",
  "devDependencies": {

  }
}

name是定义项目名称，versiong定义版本号，devDependencies 定义开发依赖项，即我们现在这个系统，将会依赖于哪些工具来开发。

4、安装grunt。在cmd中跳转到项目目录里面执行安装grunt代码，代码如下：

D:

cd grunt 

npm install grunt --save-dev

安装成功会出现如图所示提示：

打开package.json文件，查看内容会发现devDependencies中多了 "grunt": "^0.4.5" 依赖项，安装的其他工具会在这里添加依赖项。

查看grunt项目目录，多了node_modules文件夹，存放grunt源文件，如图所示：

再通过指令grunt确认grunt是否安装成功。

上图表明grunt已正确安装，图中警告是接下来需要配置的内容。

5、配置Gruntfile.js。该文件时为grunt运行提供配置的文件，最简单的配置如下：

module.exports = function(grunt) {
//任务配置，所有插件的配置信息
    grunt.initConfig({
                //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        
        
    });

        grunt.registerTask('default', []);

};                    

上图中警告 default，就是在这里进行配置。registerTask方法中数组用来存放引用的grunt组件。

再次运行grunt，结果如下：，说明配置OK。

6、使用uglify插件。Uglify插件的功能就是压缩javascript代码。运行命令如下：

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

--save-dev 指令会往package.json文件中的devDependencies添加uglify的依赖项。

 

运行结果如上图，说明uglify组件安装成功，忽略warn警告。

现在演示压缩。首先向src文件夹中添加需要压缩的内容：

 

test.js中代码如下：

function test(obj){

    obj.name="test";
    alert(obj.name);
};

现在需要对上述文件进行压缩，压缩前需要在Gruntfile.js文件中添加配置，代码如下：

module.exports = function(grunt) {
//任务配置，所有插件的配置信息
    grunt.initConfig({

        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        
        //uglify插件的配置信息
        uglify: {
            build:{
　　　　　　　　　//需要压缩的文件 ** 代指多个任意文件按下的内容 *.js会匹配所有js
                src:'src/**/*.js',
　　　　　　　　　//dest代表压缩后的文件存放的目录
                dest:'build/'
            }
        }
    });
        //告诉grunt我们使用插件
        grunt.loadNpmTasks('grunt-contrib-uglify');
        
        //告诉grunt当我们在终端中输入grunt时需要做什么（注意先后顺序）
        grunt.registerTask('default', ['uglify']);

};

将上述配置修改完成后，运行grunt指令，查看控制台输出信息：

说明文件压缩成功，去看下文件压缩后的格式。

至此uglify 压缩组件使用完成。

 

您可以给给小小飞发个红包以资鼓励