grunt快速搭建项目

最近开始接触前段开发，但上手就是grunt，抽了一天学习了一下，在这里记录一下如何使用grunt，以便以后自己好查看。

（mac环境）

1.首先安装CLI

CLI是grunt的命令行，如果要使用grunt 指令，首先需要安装这个，但是注意这个东西并不是grunt

终端下输入：

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在你项目的任何目录下执行此命令了。

2.grunt项目需要的两件重要文件

package.json文件：

这是当前项目信息的文件，主要包括项目名称，版本，作者，描述，以及当前项目依赖的grunt插件。

在上传到git上时，需要将这个文件一并传入，这样就不需要将grunt插件依赖的包一并上传到git上，因为这个文件已经记录了你需要依赖的包。

当别人克隆你的项目时，只需要进入该文件目录，在命令行输入grunt -init 便可以自动在网上加载依赖的包。（这里面只是记录项目用到的grunt插件所依赖包）

Gruntfile.js文件：

Gruntfile由以下几部分构成：（官方原文）

• "wrapper" 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

首先贴个代码段：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

怎么说这个文件呢，通俗一点讲这个文件就是用来告诉grunt当你输入命令时需要grunt做什么。

比如你需要检测你的代码，这时候你就需要在这个文件中写入依赖的jshint的配置。

当在initConfig中配置完成后，通过   grunt.loadNpmTasks('grunt-contrib-jshint');    来加载jshint任务需要的插件。

最后通过  grunt.registerTask('param1',['jshint']);   函数注册一下，这样你就可以在命令行中输入grunt param1。

（注意：param1是你给这个任务取得名字，这个名字随意你写成jiancha也可以，主要是为了你自己好记）。

3.如何创建以上两个文件

如果你是在git上clone的项目，那么肯定是会有package.json文件的（除非有人粗心或者故意把这文件ignore了）。

这时候你并不需要自己创建这个文件，只需要通过终端进入该文件目录，输入grunt -init便可以自动加载该项目依赖的包。

如果你是自己写的一个新项目，那么可以通过终端进入项目的目录下(建议与src文件同目录)，输入npm init 便可以自动创建该文件，其中需要输入一些配置信息，就算你偷懒全部回车也可以，建议还是填写一下。

其实就是一些项目名称，作者，版本之类的基本信息。然后，你在目录下便会有package.json文件以及基本的配置信息了。

Gruntfile.js文件需要自己手动创建，既然都已经到这一步，那么自己创建也可以，可以参靠一下网上实例，写这个文件才是你是否真的会用grunt的标准（很简单的，毕竟grunt只是一个工具）。

4.安装grunt

看了这么多，弄了这么多，其实我们还是没有安装grunt，那这时候我们就来安装一下grunt吧。

在终端下进入项目目录，也就是包含你的src文件的目录，

输入npm install <module> --save-dev命令即可，<module>指的grunt的版本。

如果你将它替换成grunt，比如npm install grunt --save-dev 那么它就默认安装的是最近版的grunt。

--save-dev表示将grunt的版本信息添加到package.json文件的devDependencies属性下。

5.如何安装插件

npm install grunt-contrib-jshint --save-dev

没错，就这么一个简单的命令就可以，我这里安装的是jshint插件，根据你的需要把grunt-contrib-jshint换成你需要的插件就行了。

刚接触前端，怕自己忘了就迫不及待的写了这篇文章，以后用多了再填这个坑吧。