自动化构建工具 grunt [国外使用较多]

tianxiaxuange

Grunt

代码： https://github.com/RyenToretto/grunt-gulp-webpack

环境： node 版本 > 0.8

特点： 

自动化： 压缩、合并、编译等等操作，前提是 Gruntfile.js 文件配置好了

Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的

grunt 插件： grunt 作为大脑，指挥插件们工作

contrib-官方维护的插件

 

项目结构： 

1. 全局安装 grunt 脚手架 命令行接口 grunt-cli

sudo npm install -g grunt-cli

调用与 Gruntfile.js 在同一目录中 Grunt

2. 局部安装 grunt

sudo npm install --save-dev grunt

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。

正是由于这一机制，你可以在项目的任意子目录中运行 grunt，更多详情请阅读源码

3. 编辑 Gruntfile.js

  • 在下面列出的这个 Gruntfile.js 中

package.json 文件中的项目元数据（metadata）被导入到 Grunt 配置中

 grunt-contrib-uglify 插件中的 uglify 任务（task）被配置为压缩（minify）源码文件

并依据上述元数据动态生成一个文件头注释。

当在命令行中执行 grunt 命令时，uglify 任务将被默认执行。

commonJS 模块化语法 暴露

  • module.exports = function(grunt) {

  // 初始化配置 grunt 任务.
  grunt.initConfig({
  });

  // 当 grunt 执行时，要加载的插件。
  // grunt.loadNpmTasks(\'\');

  // 注册 构建任务 列表。
  grunt.registerTask(\'default\', []); // 默认任务，依赖为 []
};

4. 加入 合并 js 的插件 grunt-contrib-concat 

(1) sudo npm install --save-dev grunt-contrib-concat

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        concat: {
            options: {
                separator: \';\', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: [\'src/js/*.js\'], // 要合并的 源文件
                dest: \'dist/built.js\', // 输出到的 新文件
            }, // 合并
        }, // 执行任务的任务名
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks(\'grunt-contrib-concat\');

    // 注册 构建任务 列表。
    grunt.registerTask(\'default\', []); // 默认任务，依赖为 []

};

(3) 执行 concat 任务

grunt concat

(4) 科学的 Gruntfile.js打包路径： 

(5) index.html 调用下 js 看看效果

  • <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="shortcut icon" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" />
    <link rel="bookmark" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" type="image/x-icon" />
    <title>自动化构建 - grunt</title>

    <script type="text/javascript" src="./static/js/fastclick.js"></script>
  </head>
  <body>
    <div id="app"></div>




    <script type="text/javascript">
      if (\'addEventListener\' in document) {
        document.addEventListener(\'DOMContentLoaded\', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln(\'<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"\'+\'>\'+\'<\'+\'/\'+\'script>\');
      }    /* 解决点击响应延时 0.3s 问题 */
    </script>
    <script type="text/javascript" src="./build/js/build.js"></script>
  </body>
</html>

5. 加入 压缩 js 的插件 grunt-contrib-uglify , 注册自动化任务数组

(1) sudo npm install --save-dev grunt-contrib-uglify 

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON(\'package.json\'),
        concat: {
            options: {
                separator: \';\', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: [\'src/js/*.js\'], // 要合并的 源文件
                dest: \'build/js/build.js\', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        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\']
                }
            }
        } // uglify 执行 压缩任务 的任务名
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks(\'grunt-contrib-concat\');
    grunt.loadNpmTasks(\'grunt-contrib-uglify\');

    // 注册 构建任务 列表。
    grunt.registerTask(\'default\', [
        \'concat\',
        \'uglify\'
    ]); // 默认任务，依赖为 [], 执行 \'grunt default\' / \'grunt\' 后，会顺序执行数组里的任务
};

(3) 执行 grunt 

6. 默认任务的 数组，会同步，顺序执行，所以先后顺序很重要

7. 加入 js-hint 语法检查插件

(1) sudo npm install --save-dev grunt-contrib-jshint

(2) 创建并配置 .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"]
}

(3) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON(\'package.json\'),
        concat: {
            options: {
                separator: \';\', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: [\'src/js/*.js\'], // 要合并的 源文件
                dest: \'build/js/build.js\', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        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\']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        jshint : {
            options: {
                jshintrc : \'.jshintrc\' //指定配置文件
            },
            build : [\'Gruntfile.js\', \'src/js/*.js\'] //指定检查的文件
        },
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks(\'grunt-contrib-concat\');
    grunt.loadNpmTasks(\'grunt-contrib-uglify\');
    grunt.loadNpmTasks(\'grunt-contrib-jshint\');

    // 注册 构建任务 列表。
    grunt.registerTask(\'default\', [
        \'concat\',
        \'uglify\',
        \'jshint\'
    ]); // 默认任务，依赖为 [], 执行 \'grunt default\' / \'grunt\' 后，会顺序执行数组里的任务
};

(4) 构建

grunt

8. 加入 合并压缩 css 的插件

(1) sudo npm install --save-dev grunt-contrib-cssmin

(2) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON(\'package.json\'),
        concat: {
            options: {
                separator: \';\', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: [\'src/js/*.js\'], // 要合并的 源文件
                dest: \'build/js/build.js\', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        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\']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        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\']
                }
            }
        } // css 合并压缩插件
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks(\'grunt-contrib-concat\');
    grunt.loadNpmTasks(\'grunt-contrib-uglify\');
    grunt.loadNpmTasks(\'grunt-contrib-jshint\');
    grunt.loadNpmTasks(\'grunt-contrib-cssmin\');

    // 注册 构建任务 列表。
    grunt.registerTask(\'default\', [
        \'concat\',
        \'uglify\',
        \'jshint\',
        \'cssmin\'
    ]); // 默认任务，依赖为 [], 执行 \'grunt default\' / \'grunt\' 后，会顺序执行数组里的任务
};

(3) 构建

grunt

9. 实现 watch 监视文件修改任务，实现自动打包编译

(1) sudo npm install --save-dev grunt-contrib-watch

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON(\'package.json\'),
        concat: {
            options: {
                separator: \';\', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: [\'src/js/*.js\'], // 要合并的 源文件
                dest: \'build/js/build.js\', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        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\']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        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\']
                }
            }
        }, // css 合并压缩插件
        watch : {
            scripts : {
                files : [\'src/js/*.js\', \'src/css/*.css\'],
                tasks : [\'concat\', \'jshint\', \'uglify\', \'cssmin\'],
                options : {spawn : false}//增量更新---全量更新
            }
        }
    });

    // 当 grunt 执行时，要加载的插件。
    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\');

    // 注册 构建任务 列表。
    grunt.registerTask(\'default\', [
        \'concat\',
        \'uglify\',
        \'jshint\',
        \'cssmin\'
    ]); // 默认任务，依赖为 [], 执行 \'grunt default\' / \'grunt\' 后，会顺序执行数组里的任务
    grunt.registerTask(\'build\', [\'default\']);
    grunt.registerTask(\'dev\', [\'default\', \'watch\']);
};

(3) grunt dev

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode