windows下利用grunt进行前端项目环境构建

之前没接触过，项目需要，实践了一下

目前对grunt的理解和需求仅在于简单的文件合并、压缩、语法检查，其强大功能还有待研究

安装过程：

（1）安装nodejs

grunt依赖nodejs运行环境，所以要玩grunt得先把nodejs安装好　　

　　nodejs下载地址：http://nodejs.org/


（2）安装grunt

安装好nodejs后，就可以安装grunt。grunt是采用npm来安装，npm是nodejs中包管理和分发的工具，上面安装nodejs时，就安装好了，所以这里直接使用即可。

安装grunt命令：npm install -g grunt-cli

ps：注意一定要加-cli，文档上说这玩儿会将grunt加入到系统变量中，这样就可以到处使用了，当然如果不加，可能需要自己手动去配置环境变量

至此：grunt安装完毕


（3）使用grunt创建项目

通过上面的步骤，grunt已经ok了，接下来就是用其创建项目。

　　（1）grunt是一个项目构建环境，这个有点类似于ant。grunt本身并没有提供“啥合并、压缩”功能。

　　（2）这里的创建工程，其实就是grunt根据你的配置文件，加载好相关包，完成一个你想要实现的目标。比如说，你想要“合并文件”这个功能，那么就得告诉grunt，它会根

据这个配置为你创建好一个具有“合并文件”功能的“可执行程序”。


那如何创建项目呢？
　　


A、得先为咱们将要创建的项目建立一个空文件夹，如“/devBranch/html/”，咱们后面的命令创建步骤仅在此项目下，即在这个文件夹下执行命令。

B、上面提到，grunt创建项目要先有配置文件。这个配置文件就是package.json，执行：npm init  即可创建package.json配置文件，该命令过程中会提示输入一些参数，比如

项目描述、git地址、作者、密码等，但是生成的这个文件，并不是我们需要的压缩，合并css配置文件，下面给一个项目配置文件供参考：

{
  "name": "demo",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-cssmin": "~0.8.0",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-text-replace": "~0.3.11",
    "md5-file": "0.0.2"
  }
}

配置文件中可以看到，我们在其中定义了压缩合并css需要的一堆依赖包。初次执行grunt，会提示如下错误信息，需要把依赖的包都安装一下

执行grunt install  该命令执行后，会发现项目文件夹下多了好多东西，这些其实就是运行程序需要用到的文件

小试文件压缩功能

通过上面的步骤，grunt压缩环境已经创建好了，那现在可以试一下压缩功能了

（1）待处理文件默认是放在项目“/devBranch/html/”下的src文件夹中，所以我们得先在根目录中建立一个"src",把需要处理的demo.js放置其中。

（2）编写Gruntfile.js。该文件是个js不是配置文件，其实可以看做是运行的入口，同样文件放置项目根目录“/devBranch/html/”下：

example：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'build/<%= pkg.file %>.test.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

执行  grunt 命令！你会发现test.js文件在根目录下的dest就创建好了。

再试文件合并功能

合并文件依赖于grunt-contrib-concat插件，上面我们已经在package.json里面配置了，接下来改一下Gruntfile.js就可以了：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: 'src/*.js',
        dest: 'build/test.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat']);