自动化构建工具grunt

时间:2020-05-01

中文主页 : http://www.gruntjs.net/

是一套前端自动化构建工具,一个基于nodeJs的命令行工具

它是一个任务运行器, 配合其丰富强大的插件

常用功能:

  • 合并文件(js/css)
  • 压缩文件(js/css)
  • 语法检查(js)
  • less/sass预编译处理

开始使用

新建一个项目

在项目根目录执行

npm init

全局安装 grunt-cli

npm install -g grunt-cli 

安装grunt

npm install grunt --save-dev

在项目根目录配置Gruntfile.js

module.exports = function(grunt){
  // 1. 初始化插件配置
  grunt.initConfig({
      //主要编码处
  });
  // 2. 加载插件任务
  // grunt.loadNpmTasks('grunt-contrib-concat');
  // 3. 注册构建任务
  grunt.registerTask('default', []);
};

新建测试文件

t1.js

function test1() {
    console.log('t1 test1');
}

function sum(a, b) {
    console.log(a + b);
}

test1();

sum(1, 1);

t2.js

function test3() {
    console.log('t2 test3');
}

function add(a, b) {
    return a + b;
}

test3();

console.log(add(10, 2));

t1.css

body{
    font-size: 18px;
    background-color: gray;
}

t2.css

div{
    width: 200px;
    height: 200px;
    background-color: red;
}

常用的插件

  • 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-requirejs——合并压缩requirejs管理的所有js模块文件
  • grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

合并JS文件

安装concat插件

npm install grunt-contrib-concat --save-dev

修改Gruntfile.js文件

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src:  ["src/js/*.js"],  //合并哪些js文件
                dest: "build/js/build.js" //输出的js文件
            }
        }
    });
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 3. 注册构建任务
    grunt.registerTask('default', ['concat']);
};

执行

grunt

压缩JS

安装uglify插件

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

修改Gruntfile.js

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src:  ["src/js/*.js"],  //合并哪些js文件
                dest: "build/js/build.js" //输出的js文件
            }
        },
        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']
                }
            }
        }
    });
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 3. 注册构建任务
    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"]
}

修改Gruntfile.js

module.exports = function (grunt) {
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src: ["src/js/*.js"],  //合并哪些js文件
                dest: "build/js/build.js" //输出的js文件
            }
        },
        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']
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc' //指定配置文件
            },
            build: ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        }
    });
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 3. 注册构建任务
    grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
};

执行

grunt

如果你的代码有问题

修改错误后重新执行即可

CSS压缩

安装cssmin插件

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

修改Gruntfile.js

module.exports = function (grunt) {
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src: ["src/js/*.js"],  //合并哪些js文件
                dest: "build/js/build.js" //输出的js文件
            }
        },
        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']
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc' //指定配置文件
            },
            build: ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        },
        cssmin:{
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        }
    });
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 3. 注册构建任务
    grunt.registerTask('default', ['concat', 'uglify', 'jshint','cssmin']);
};

执行

grunt

自动化构建工具

安装watch插件

npm install grunt-contrib-watch --save-dev

修改Gruntfile.js

module.exports = function (grunt) {
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src: ["src/js/*.js"],  //合并哪些js文件
                dest: "build/js/build.js" //输出的js文件
            }
        },
        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']
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc' //指定配置文件
            },
            build: ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        },
        cssmin:{
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        },
        watch : {
            scripts : {
                files : ['src/js/*.js', 'src/css/*.css'],
                tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
                options : {spawn : false}
            }
        }
    });
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 3. 注册构建任务
    grunt.registerTask('default', ['concat', 'uglify', 'jshint','cssmin']);
    grunt.registerTask('myWatch', ['default','watch']);
};

执行自动化

grunt myWatch

现在修改js、css代码后无需执行grunt就可以自动压缩文件了

测试

index.html




    <meta charset="UTF-8">
    <title>Title</title>
    <link href="build/css/build.min.css" rel="stylesheet">


<script src="build/js/build.min.js"></script>