1. 安装NodeJS

NodeJS是一款很棒的JavaScript运行平台，它的护航系统（包管理器）是npm。

sudo apt install nodejs npm -y

安装的包比较多，可能需要一点儿时间。

2. 初始化项目

假设你将项目放在demosite目录下。

mkdir demosite
cd demosite
npm init -y

上述命令会在demosite目录下创建一个项目依赖配置文件package.json。

3. 修改package.json

用VS Code打开package.json，然后：

修改键值。修改以下关键字后的值。
- 将”description”的值改为你的项目描述
- 将”author”的值改为作者姓名
增加键值对。新增如下一条键值对。
```
  "repository": {}
```
如果你将项目放到某个托管平台，例如码云Gitee，建议将其中设为你的仓库地址。

4. 安装Grunt

全局安装Grunt的命令行工具
```
 sudo npm install grunt-cli -g
```
-g选项说明是全局安装。如果没有指定，那么包将会安装到当前目录的node_modules目录中。

安装项目依赖工具包

 npm install grunt grunt-contrib-less grunt-contrib-uglify --save-dev
 npm install grunt-contrib-watch grunt-contrib-cssmin --save-dev

上述命令会在demosite目录下创建:

node_modules目录，其中保存了项目依赖的js包。
package-lock.json文件

选项–save-dev会将依赖写入package.json

这里解释一下安装的包的功能说明：

包	功能	说明
grunt-cli	grunt的命令行界面	/
grunt	grunt主模块	命令格式一般为：grutn task
grunt-contrib-less	Less编译器	由grunt启动，将.less文件编译为.css文件
grunt-contrib-uglify	JS压缩混淆编译器	由grunt启动，将原始.js文件压缩并“丑化”（混淆变量名）
grunt-contrib-watch	监听器	由grunt启动，可监听指定文件的修改，以自动启动编译
grunt-contrib-cssmin	CSS压缩器	由grunt启动，将原始.css文件极小化

可以根据项目的需求，安装其他的依赖包。

修补包安装、删除包时，系统可能提示平台有漏洞。可以用如下方式进行修补。
```
 npm audit fix
```
删除包

如果摸个包不需要了，可以这么做：
```
 npm remove <package-name> --save-dev
```

5. 创建Gruntfile.js文件

打开VS Code，新建一个文件Gruntfile.js。以下是一个范例。

module.exports = function (grunt) {
    //const definition
    const root = 'your project directory'
    const src_path = `${root}/src`; //原始的.less、.js文件的存放目录
    const dist_path = `${root}/assets`; //发布的.css、.js文件的存放目录

    const name = 'main'; //.less、.js文件的名字

    const less_src = `${src_path}/${name}.less`;
    const js_src = `${src_path}/${name}.js`;

    //productive
    const css_dist = `${dist_path}/css/${name}.css`;
    const js_dist = `${dist_path}/js/${name}.js`;

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        uglify: { //子任务1。用于压缩、混淆js文件
            options: {
                compress: true,
                mangle: { //混淆选项，排除指定值
                    reserved: ['$', 'jQuery']
                }
            },
            dist: {
                files: {
                    //目标文件  : 原始文件
                    [js_dist] : js_src
                }
            }
        },

        less: { //子任务2。用于编译.less文件到.css
            dist: {
                options: {
                    strictMath: true
                },
                files: {
                    [css_dist]: less_src
                }
            }
        },

        cssmin: { //子任务3。用于压缩css文件
            options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    [css_dist]: css_dist
                }
            }
        },

        watch: { //子任务4。用于监听文件的修改。
            lessit: { //监听.less文件的修改。
                files: [`${src_path}/*.less`],
                tasks: ['css']
            },
            jscript: { //监听.js文件的修改。
                files: [`${src_path}/*.js`],
                tasks: ['js']
            }
        }
    });

    //载入任务依赖包
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    
    //注册任务（链）
    grunt.registerTask('default', ['watch']);
    grunt.registerTask('css', ['less', 'cssmin']);
    grunt.registerTask('js', ['uglify:dist']);
};

6. 使用Grunt

有两种方式使用Grunt。

启动默认任务
```
 grunt
```
此后，grunt进入监听状态。一旦发现监听的文件有修改，那么对应的任务就会自动启动。
执行指定任务

例如：
```
 grunt css
```
此后，grunt将指定指定的任务css。从Gruntfile.js中可以看到，任务css包含了两个子任务：less和cssmin。这两个子任务会依次执行。