使用GruntJS构建Web程序之构建篇

关于“使用GruntJS构建Web程序之构建篇”的完整攻略，我将分为以下几个步骤进行讲解。

1. 安装GruntJS

首先，我们需要在本地安装GruntJS。可以使用npm命令进行安装，确保已经安装Node.js环境。

npm install -g grunt-cli

2. 安装Grunt插件

接下来，我们需要安装Grunt插件，以便于使用Grunt构建我们的Web程序。可以使用npm install命令进行安装。

以下是两个示例：

2.1 安装grunt-contrib-uglify插件

该插件可以帮助我们压缩和合并JavaScript文件。可以使用以下命令进行安装：

npm install grunt-contrib-uglify --save-dev

2.2 安装grunt-contrib-cssmin插件

该插件可以帮助我们压缩和合并CSS文件。可以使用以下命令进行安装：

npm install grunt-contrib-cssmin --save-dev

3. 构建Grunt配置文件

在安装好Grunt和Grunt插件后，我们需要构建Grunt配置文件，以便于使用Grunt进行程序构建。

以下是一个示例：

module.exports = function(grunt) {
  // 配置任务
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // 压缩JavaScript
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },

    // 压缩CSS
    cssmin: {
      options: {
        keepSpecialComments: 0
      },
      minify: {
        expand: true,
        cwd: 'src/',
        src: ['*.css'],
        dest: 'build/',
        ext: '.min.css'
      }
    }
  });

  // 加载Grunt插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // 注册任务
  grunt.registerTask('default', ['uglify', 'cssmin']);
};

在上述示例代码中，我们定义了两个任务，分别是压缩JavaScript和压缩CSS。在配置文件中，我们可以根据实际情况进行任务的配置。

4. 运行Grunt任务

在完成Grunt配置文件后，我们可以运行Grunt任务，以构建我们的Web程序。

运行命令：

grunt

该命令将会默认执行Grunt配置文件中的default任务，即执行uglify和cssmin两个任务。如果需要单独执行某个任务，可以使用下面的命令：

grunt 任务名

例如，运行以下命令将会执行uglify任务：

grunt uglify

提供了一个完整的示例，你可以根据实际情况进行修改和配置，达到构建Web程序的目的。