grunt学习笔记

grunt – 前端构建工具

参考地址： grunt官网

之前自己学习了gulp， 看着grunt的一大堆代码 ， 总是觉得不清晰，但是，东西好不好 ，只有用过才知道！ 所以，今天简单的学习了他的使用方法。

首先我们需要知道，前端构建工具是干什么的？（why）
我的理解是，将之前需要人力一步一步进行的工具交给程序去处理。
比如，项目中我们经常会做一些优化，js合并，压缩，css压缩，合并等等，我们可能之前的是手动的通过一些工具（jshint，uglify）进行每一个的操作。
这样的带来的问题：

1. 操作繁琐 ，重复
2. 浪费大量的时间

然后，人们就把这些“脏活 ，累活”通过一段程序来进行处理和维护。

具体怎么做（how）

1. 安装grunt-cli
   grunt-cli并不是grunt。
   grunt-cli的作用：
   调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

2. 新建两份文件 package.json 和 Gruntfile.js
   package.json 整过node的应该知道，是nodejs包的依赖管理文件，用来维护项目中使用到的node标准包。

   直接在命令行：

npm init 

(一步一步设置之后)就能自动生成一个标准的package.json文件

Gruntfile.js文件就是我们最关心的配置文件了
通过它，我们制定我们需要进行的任务。
它是标准的node模块：

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']);

};

注意点
1. uglify压缩文件的时候 会把js文件中没有引用到的变量和函数 全部干掉