用Grunt搭建前端Web工程

Grunt是基于任务的命令行构建工具，是一款用于前端的自动化工具。

他可以自动化地完成构建、检查、压缩等任务，使程序员从重复而繁琐的任务中解脱出来，更专注于coding。

Grunt的安装及配置方法如下：

1.安装Node.js

Grunt依赖于Node.js的0.8以上版本。可以前往官网下载。

安装完成后，在命令行中输入 node -v 检验是否安装完成。

2.安装全局grunt命令行

要在项目中使用grunt，首先要在全局环境中安装grunt-cli。

在命令行中输入 npm install -g grunt-cli 来安装grunt-cli。如果该命令卡住，先去掉-g参数执行一次安装，然后再加上-g安装一次。

到这里，grunt的全局配置就完成了。下面是在每个项目中的安装配置。

3.项目中配置grunt

首先，从官网下载package.json和Gruntfile.js 放到项目根目录下，或者直接在根目录中新建这两个文件：

package.json :

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {

  }
}

"name"和"version"是项目的信息。

devDependencies是项目的依赖项。在devDependencies中配置好依赖项后，可以在项目中运行grunt来加载这些插件。

Gruntfile.js :

module.exports = function(grunt) {

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


  // Default task(s).
  grunt.registerTask('default', []);

};

grunt.initConfig中对任务插件进行配置。

grunt.loadNpmTasks表示要加载使用这些插件。

在default中加入到任务，说明在运行grunt时要执行这些插件。

4.在项目中安装grunt

命令行中进入到项目的根目录，输入npm install grunt --save-dev，安装grunt并配置为开发依赖项。

安装完成后，运行grunt，如果提示done. 则表示前面的安装配置成功了。如图：

5.grunt插件

项目中构建好了grunt，但是并没有什么卵用。我们要的是grunt中的插件来给我们自动完成任务。

注，下面所有配置中的build，可以用任意字符串代替，比如lxy，比如js/css等等

1）uglify插件

uglify插件可以帮我们压缩js文件。

安装方法和之前一样，在项目的根目录中用命令行运行npm install grunt-contrib-uglify --save-dev 

然后在Gruntfile.js中的grunt.initConfig里配置（跟在pkg: grunt.file.readJSON('package.json'),下面，前面用逗号分隔）

uglify: {
      options: {
        //在文件中加入banner标签
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        //要压缩的文件路径        <pre name="code" class="javascript">        src: 'src/<span style="font-family: 宋体; font-size: 9pt;"><%= pkg.name %></span>.js',

//要保存的路径 dest: 'build/<%= pkg.name %>.min.js' } }

接着在 grunt.initConfig{}下面写

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

告诉grunt要加载uglify。

最后在defult的数组中加入'uglify'，表示要在运行grunt的时候立即执行uglify。

完成之后的Gruntfile.js文件：

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                //在文件中加入banner标签
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                //要压缩的文件路径
                src: 'src/<%= pkg.name %>.js',
                //要保存的路径
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

// Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s).
    grunt.registerTask('default', ['uglify']);
};

这时候，再在项目下运行grunt，就可以看到grunt帮我们完成了js的压缩任务。

 

2）clean插件

clean插件可以清除指定文件夹下的所有文件

安装：npm install grunt-contrib-clean --save-dev

加载：grunt.loadNpmTasks('grunt-contrib-clean');

defult：'clean'

配置：

clean: {
  build: {
    src: ["path/to/dir/one", "path/to/dir/two"]
  }
}

3）jshint插件

jshint用于js文件的语法检查。

安装：npm install grunt-contrib-jshint --save-dev

加载：grunt.loadNpmTasks('grunt-contrib-jshint');

defult：'jshint' （通常写在前面）

配置：

 jshint: {
            //要检查的文件路径
            test1: ['Gruntfile.js'],
            test2: ['src/*.js'],
            //设置语法规则文件
            options: {
                jshintrc: '.jshintrc'
            }
        },

要检查语法，需要有检查的规则。这里要定义一个".jshintrc"文件。在根目录下新建这个文件，然后写入规则：

{
  "boss":false,
  "curly":true,
  "eqeqeq":true,
  "eqnull":true,
  "expr":true,
  "immed":true,
  "newcap":true,
  "noempty":true,
  "noarg":true,
  "undef":true,
  "regexp":true,
  "browser":true,
  "node":true
}

当然，具体的项目中可以选用不同的规则。

这时再运行grunt，就可以看到grunt帮我们进行了语法检查。

4）watch插件

watch插件给我们实现了真正的自动化，不需要我们一次次的运行grunt了。

安装：npm install grunt-contrib-watch --save-dev

加载：grunt.loadNpmTasks('grunt-contrib-watch');

defult：'watch'（写在最后）

配置：

watch: {
  build: {
    //监控哪些文件发生了变化
    files: ['**/*.js'],
    //当被监控的文件发生变化时，执行那些插件
    tasks: ['jshint'],
    options: {
      //是否在子程序中执行。设为false使监控更快。
      spawn: false,
    },
  },
},

配置完成后，再运行grunt。可以看到程序在waiting。。。等待被监控的文件发生变化后，自动执行任务。

到此，对grunt的使用已经有了基本的了解，但这只是最基础的几个插件，更多的插件和功能等着我们去学习。