windows本地搭建grunt前端项目构建环境

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

安装前环境准备

（1）grunt依赖nodejs运行环境，所以要玩grunt得先把nodejs安装好，nodejs安装复杂不？一点不复杂，文件也不大，直接下载安装即可。

　　

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

安装grunt

（1）安装好nodejs后，就可以安装grunt。grunt安装是不是也要下载个安装文件？度娘和google发现，都是采用npm这个玩儿来安装，具体采用文件安装没研究。

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

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

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

　　至此：grunt安装完毕

使用grunt创建项目

　　通过上面的步骤，grunt已经ok了，接下来就是用其创建项目。你可能有疑问？“哥只想用期来合并、压缩文件，用得到创建个项目吗？”。对于这个问题得先理解好grunt。

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

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

那如何创建项目呢？

　　

（1）得先为咱们将要创建的项目建立一个空文件夹，如“d:\javascriptDemo”，咱们后面的命令创建步骤仅在此项目下，即在这个文件夹下执行命令。

 

（2）上面提到，grunt创建项目要先有配置文件。也就是说在创建项目之前，咱们得先搞个配置文件，这个配置文件就是package.json。哥手上没有这玩儿，不怕，咱们的npm会创建这东西。

　　执行：npm init  即可创建package.json配置文件，该命令过程中会提示输入一些参数，比如项目描述、git地址、作者、密码等，如下图，其中出现的json数据就是该文件夹的内容：

不过有点可惜，采用npm init创建的配置文件似乎不是我们所需要的“文件压缩、合并”功能的配置文件，对于这种情况，其实百度一下找个模板即可。package.json文件压缩、合并配置模板如下：

{
  "name": "demo",
  "file": "jquery.calendar",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

（3）从配置文件中可以得知，我们在其中定义了需要处理的文件"jquery.calendar",以及一堆依赖包。ok，那现在可以创建项目了。

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

 

小试文件压缩功能

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

（1）咱们的待处理文件放在哪里啊？默认是放在项目根命令下的src文件夹中，所以我们得先在根目录中建立一个"src",把需要处理的jquery.calendar.js放置其中。

（2）grunt怎么知道我是要做压缩功能呢？package.json只是配置了依赖包和待处理文件，并没说明我要做压缩功能啊？对！这个问题咱们得引入另一个文件来解决。

该文件就是Gruntfile.js。该文件是个js不是配置文件，其实可以看做是运行的入口，同样文件放置项目根目录下：

文件样例：

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: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

ok！一切就绪，执行  grunt 命令！你会发现咱们的min文件在根目录下的dest就创建好了。

 

再试文件合并功能

上面的工程环境都配置好了，那么文件合并功能，按道理就是修改下配置即可了。合并文件依赖于grunt-contrib-concat插件，所以我们的package依赖项要新增一项"grunt-contrib-concat": "~0.3.0"。

{
  "name": "demo",
  "file": "jquery.calendar",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1",
    "grunt-contrib-concat": "~0.3.0"
  },
  "dependencies": {
    "express": "3.x"
  }
}

咱们的运行入口也得变一下，告诉grunt，这回我要做的是文件合并，合并src下所有js。

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

ok！执行命令 grunt

哦，no！！出现错误，提示“grunt-contrib-concat”没安装！，ok咱们就安装。

执行：npm i --save-dev grunt-contrib-imagemin

再次运行 grunt，一切ok！！

 

如果我们需要合并又要压缩呢，修改配置文件即可。留点给自己去研究吧..........