grunt自动化构建工具

Posted 2020-08-08

一、什么是grunt?

　　是基于nodejs的项目构建工具，grunt和grunt插件是通过npm安装并管理的，npm是node.js的包管理器

二、为什么要用grunt?

　　自动化。对于反复重复的任务，例如压缩、编译、单元测试等，自动化工具可以减轻你的劳动，简化你的工作

三、如何使用？

　　1、首先安装nodejs，安装包及源码下载地址：https://nodejs.org/en/download/。

　　2、安装grunt，需要先将grunt命令行（CLI）安装到全局环境中，

　　　　npm install -g grunt-cli

　　　　上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

　　3、一般在项目中需要添加两份文件：package.json 和 Gruntfile.js

　　package.json 如下：

{
  "name": "gruntTest",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-jshint": "^1.0.0",   //检查js语法
    "grunt-contrib-uglify": "^2.0.0",　　//js压缩
    "grunt-contrib-watch": "^1.0.0"　　　//监听js文件变动
  }
}　　
　　Gruntfile.js 如下：

module.exports = function(grunt){
    grunt.initConfig({
        pkg:grunt.file.readJSON(‘package.json‘),
        uglify:{
            bulid:{
                expand: true,   //启用动态扩张
                src:‘DemoTmp/js/*.js‘,  //需要压缩的js文件所在路径
                //dest:‘DemoTmp/js/‘,   //压缩后文件所在路径
                ext:‘.min.js‘,　　　　　　//压缩后的文件名
                extDot:‘first‘　　　　　　//扩展文件名开始后第一个点
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  //加载任务插件
    grunt.registerTask(‘default‘,[‘uglify‘]);　　　　//默认被执行的任务列表
};

4、以上两个文件配置好后，就可以进行操作了：
　　1）将命令行的当前目录转到项目根目录下
　　2）执行 npm install 命令安装项目依赖的库
　　3）执行 grunt 命令