Grunt

概念

• Grunt是一个前端自动化构建工具，一个基于nodeJS的命令行工具
• Grunt是一个任务运行器，配合其丰富强大的插件
• 可以实现合并文件、压缩文件以及语法检查、less/sass预编译处理等功能

使用

• 全局安装grunt-cli

npm install -g grunt-cli

• 安装grunt

npm install grunt --save-dev

• 配置Gruntfile.js文件，该文件是使用Grunt所必须的文件

module.exports = function(grunt) {

  // 项目配置，所有要使用的插件信息都放在该方法内部
  grunt.initConfig({});

  // 加载插件
  grunt.loadNpmTasks();

  // 默认被执行的任务列表
  grunt.registerTask('default', []);

};

Grunt基本插件

• Grunt官方插件大部分都以contrib-来开头
• grunt-contrib-clean：清除文件，处理打包之后的文件
• grunt-contrib-concat：合并多个文件的代码到一个文件中
• grunt-contrib-uglify：压缩js文件
• grunt-contrib-jshint：js语法错误检查
• grunt-contrib-cssmin：压缩/合并css文件
• grunt-contrib-htmlmin：压缩html文件
• grunt-contrib-copy：复制文件、文件夹
• grunt-contrib-watch：实时监控文件变化，调用相应任务重新执行

执行插件

• 为了实现以上插件的相应功能，需要对插件以及Gruntfile.js文件进行相关操作
• 首先，使用npm安装相应插件，安装方式为–save-dev
• 之后，前往Grunt官网的插件列表，查询相关插件内容
• 找到grunt.initConfig中的内容，复制到Gruntfile.js文件中来，修改相关参数
• 加载插件，参数为插件的完整名字

grunt.loadNpmTasks()

• 注册任务，当需要执行多个任务时，可以在数组中添加任务名称，在终端输入grunt，会自动执行数组中注册的任务

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

module.exports = function(grunt) {

  // 项目配置，所有要使用的插件信息都放在该方法内部
  grunt.initConfig({
    // 合并文件
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/js/*.js'],
        dest: 'build/js/bundle.js',
      },
    },
    uglify: {
      options: {
        mangle: false
      },
      my_target: {
        files: {
          'build/js/bundle.min.js': ['build/js/bundle.js']
        }
      }
    }
  });

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

  // 默认被执行的任务列表 
  grunt.registerTask('default', ['concat', 'uglify']);

};