本文使用的是国内镜像，用npm的可以自行把cnpm改为npm，用想用npm的可以参考这个

参考原文地址：Grunt新手一日入门

Grunt依赖Node.js，使用Grunt前请确保已经安装了Node.js

基础步骤

  • 全局安装grunt命令行

    cnpm install -g grunt-cli

  • 到项目文件夹下，生成package.json文件，这个文件是Node.js用来描述项目的。

    npm init

    填写相关配置，不明白的直接跳过也可以

  • 为该项目安装grunt

    npm install grunt --save-dev

    表示安装npm到当前目录，-save-dev参数表示，表示会把刚安装的东西添加到package.json文件中

  • 对于这个项目，假设我们希望grunt帮我们完成的功能有：

    • 检查每个 JS 文件语法
    • 合并两个 JS 文件
    • 将合并后的 JS 文件压缩
    • 将 SCSS 文件编译
    • 新建一个本地服务器监听文件变动自动刷新 HTML 文件

  • 根据以上的需求，grunt有以下的以下插件来满足：

    • 合并文件：grunt-contrib-concat
    • 语法检查：grunt-contrib-jshint
    • Scss 编译：grunt-contrib-sass
    • 压缩文件：grunt-contrib-uglify
    • 监听文件变动：grunt-contrib-watch
    • 建立本地服务器：grunt-contrib-connect

  • 安装上面提到的那些插件

    npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

    安装完后可以看见package.json文件的devDependencies已经添加了那些插件，项目目录下也多出了个node_modules文件夹，里面放的就是刚刚安装的那些插件

配置Gruntfile.js的语法

格式为：

1
2
3
4
5
6
7
8
9
10
module.exports = function(grunt) {
    /*所有代码都放在这里面，这是Grunt的格式规范
    包括下面的三个部分：
    */
    任务配置代码

    插件加载代码

    任务注册代码
};

任务配置代码就是调用插件配置一下要执行的任务和实现的功能。插件加载代码就是把需要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。

这样，就可以用 grunt 来执行注册的一个 task 从而根据任务配置代码调用需要的插件来执行相应的操作

下面为uglify插件任务配置、插件加载及任务注册的代码示例：

任务配置代码

1
2
3
4
5
6
7
8
9
10
11
12
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'
    }
  }
});

插件加载代码

grunt.loadNpmTasks('grunt-contrib-uglify');

任务注册代码

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

代码意思是，你在 default 上面注册了一个 Uglify 任务，default 就是别名，它是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。也就是说，当我们执行 grunt 命令的时候，uglify 的所有代码将会执行。

当然，我们也可注册别的task，例如：

grunt.registerTask('compress', ['uglify:build']);

想要执行这个task,不能只输入grunt命令，需要输入 grunt compress 命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。

完整示例代码

针对我们之前做的那个想让grunt帮我们完成的任务假设，最终得到的Gruntfile.js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
module.exports = function(grunt) {

  var sassStyle = 'expanded';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      output : {
        options: {
          style: sassStyle
        },
        files: {
          './style.css': './scss/style.scss'
        }
      }
    },
    concat: {
      dist: {
        src: ['./src/plugin.js', './src/plugin2.js'],
        dest: './global.js',
      },
    },
    uglify: {
      compressjs: {
        files: {
          './global.min.js': ['./global.js']
        }
      }
    },
    jshint: {
      all: ['./global.js']
    },
    watch: {
      scripts: {
        files: ['./src/plugin.js','./src/plugin2.js'],
        tasks: ['concat','jshint','uglify']
      },
      sass: {
        files: ['./scss/style.scss'],
        tasks: ['sass']
      },
      livereload: {
          options: {
              livereload: '<%= connect.options.livereload %>'
          },
          files: [
              'index.html',
              'style.css',
              'js/global.min.js'
          ]
      }
    },
    connect: {
      options: {
          port: 9000,
          open: true,
          livereload: 35729,
          // Change this to '0.0.0.0' to access the server from outside
          hostname: 'localhost'
      },
      server: {
        options: {
          port: 9001,
          base: './'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);
  grunt.registerTask('default');

};
  • 添加了 connect 任务，用来新建一个本地服务器，以当前目录作为服务器根目录

  • 然后添加 watch 任务

    • 监听 Scss 文件变动，如果变了，执行一下 sass 任务
    • 监听那俩 JS，如果变了，执行 合并、检查、压缩 任务
    • 监听 html、css、js 文件，如果变动，livereload 自动刷新打开的页面

  • 而注册的 watchit task 就是我们的终极 task，第一次执行，先编译 sass、再合并、检查、压缩、开启服务器、监听文件变动。我们执行一下 grunt watchit 就可以看到效果了，可以修改一下 scss 文件，把字体设置大一点，切换到浏览器的时候，就看到了实时刷新效果

多人协作–Github

上面步骤完成之后，想要上传到Github上会发现，文件内容多出来十几兆，原因是那个放Grunt插件的node_modules文件夹，然而我们大可以使用git的 .gitignore 文件来过滤掉这个文件，禁止git追踪。

原因是在package.json文件中已经记录了这个项目中依赖的 grunt 插件，只要上传这个文件即可。与你协作的人，下载下来之后，只需要在这个项目文件夹下面，输入命令 npm install，NPM会自动读取 package.json 文件，将grunt和有关插件给你下载下来即可。