自动化构建工具Grunt

Grunt

1 .项目构建

理解：

什么是项目构建？

• 编译项目中的js、sass、less
• 合并js/css等资源文件
• 压缩js/css/html等资源文件
• JS语法检查
• 。。。。。

构建工具的作用？

• 简化项目构建、自动化完成构建

构建工具

Grunt、Gulp、Webpack

---

2.Grunt

中文主页

是一套前端自动化构建工具

创建一个简单的应用grunt_test

• 目录结构

//全局安装 grunt-cli
npm install -g grunt-cli

//安装grunt
npm install grunt --save-dev

• 插件分类

grunt团队贡献的插件：插件名大都以contribut- 开头

第三方提供的插件：大都不以contrib- 开头

常用的插件

grunt-contrib-clean  //清除文件（打包处理生成的）

grunt-contrib-concat //合并多个文件的代码到一个文件中

grunt-contrib-uglify //压缩js问件

grunt-contrib-jshint //JavaScript语法错误检查

grunt-contrib-cssmin //压缩/合并css文件

grunt-contrib-htmlmin //压缩html文件

grunt-contrib-imagemin //压缩图片文件（无损）

grunt-contrib-copy    //复制文件、文件夹

grunt-contrib-watch   //实时监控文件变化、调用相应的任务重新执行

• 使用concat插件

//安装插件
npm install grunt-contrib-concat --save-dev

//配置任务
grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['./src/js/*.js'],
        dest: './build/js/build.js',
      },
    },
  });

//注册任务
grunt.loadNpmTasks('grunt-contrib-concat');

//命令
grunt concat

• 压缩js：使用uglify插件

//安装插件
npm install grunt-contrib-uglify --save-dev

//配置任务
pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      build: {
        files: {
          './build/js/build.min.js': ['./build/js/build.js']
        }
      }
    }

//注册任务
grunt.loadNpmTasks('grunt-contrib-uglify');

//命令
grunt uglify

• 默认任务-任务高效

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

//命令
grunt

• js语法检查：使用jshint插件

//安装插件
npm install grunt-contrib-jshint --save-dev

//编码：.jshintrc 配置文件
{
  "curly":true,
  "eqeqeq":true,
  "eqnull":true,
  "expr":true,
  "immed":true,
  "newcap":true,
  "noempty":true,
  "noarg":true,
  "regexp":true,
  "browser":true,
  "devel":true,
  "node":true,
  "boss":false,

  // 不能使用未定义的变量
  "undef":true,
  // 语句后面必须有分号
  "asi":false,
  // 预定义不检查的全局变量
  "predef":["define","BMap","angular","BMAP_STATUS_SUCCESS"]
}

//配置任务
jshint: {
      options: {
        jshintrc: '.jshintrc'   //指定配置文件
      },
      build: ['Gruntfile.js', 'src/js/*.js']
    }

//注册任务
grunt.loadNpmTasks('grunt-contrib-jshint');

• 使用cssmin插件

// 安装插件
npm install grunt-contrib-cssmin --save-dev

// 配置任务
cssmin: {
  options: {
    mergeIntoShorthands: false,
    roundingPrecision: -1
  },
  target: {
    files: {
      'output.css': ['foo.css', 'bar.css']
    }
  }
}

// 注册任务
grunt.loadNpmTasks('grunt-contrib-cssmin');

• 使用watch插件（真正实现自动化）

//安装插件
npm install grunt-contrib-watch --save-dev

//配置任务
watch: {
      scripts: {
        files: ['./src/js/*.js','./src/css/*.css'],
        tasks: ['concat','jshint','uglify','cssmin'],
        options: {spawn: false,},
      },
}
  
//注册任务
  grunt.loadNpmTasks('grunt-contrib-watch');
  
//默认被执行的任务列表。
 grunt.registerTask('myWatch',['default', 'watch']);