Grunt快速入门教程

简介: Grunt入门介绍:中文主页 : http://www.gruntjs.net/Grun是一套前端自动化构建工具,一个基于nodeJs的命令行工具Grunt它是一个任务运行器

Grunt入门介绍:

  • Grunt介绍

    • 中文主页 : http://www.gruntjs.net/
    • 是一套前端自动化构建工具,一个基于nodeJs的命令行工具
    • 它是一个任务运行器, 配合其丰富强大的插件
    • 常用功能:

      • 合并文件(js/css)
      • 压缩文件(js/css)
      • 语法检查(js)
      • less/sass预编译处理
      • 其它...
  • 安装nodejs, 查看版本

    node -v
  • 创建一个简单的应用grunt_test

    |- build----------构建生成的文件所在的文件夹
    |- src------------源码文件夹   
        |- js---------------js源文件夹
        |- css--------------css源文件夹
    |- index.html-----页面文件
    |- Gruntfile.js---grunt配置文件(注意首字母大写)
    |- package.json---项目包配置文件
        {
          "name": "grunt_test",
          "version": "1.0.0"   
        }
  • 全局安装 grunt-cli

    npm install -g grunt-cli 
  • 安装grunt

    npm install grunt --save-dev
    
  • 运行构建项目命令

    grunt  //提示 Warning: Task "default" not found
  • 配置文件: Gruntfile.js

    • 此配置文件本质就是一个node函数类型模块
    • 配置编码包含3步:

      1. 初始化插件配置
      2. 加载插件任务
      3. 注册构建任务
    • 基本编码:

      module.exports = function(grunt){
        // 1. 初始化插件配置
        grunt.initConfig({
            //主要编码处
        });
        // 2. 加载插件任务
        // grunt.loadNpmTasks('grunt-contrib-concat');
        // 3. 注册构建任务
        grunt.registerTask('default', []);
      };
    • 命令: grunt //提示成功, 但没有任何效果(还没有使用插件定义任务)
  • Grunt插件介绍

    • grunt官网的插件列表页面 http://www.gruntjs.net/plugins
    • 插件分类:

      • grunt团队贡献的插件 : 插件名大都以contrib-开头
      • 第三方提供的插件 : 大都不以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-requirejs——合并压缩requirejs管理的所有js模块文件
      • grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行
  • 合并js: 使用concat插件

    • 命令:

      npm install grunt-contrib-concat --save-dev
    • 编码:

      • src/js/test1.js

        (function () {
          function add(num1, num2) {
            return num1 + num2;
          }
          console.log(add(10, 20));
        })();
      • src/js/test2.js

        (function () {
          var arr = [2,3,4].map(function (item, index) {
            return item+1;
          });
          console.log(arr);
        })();
    • 配置: Gruntfile.js

      • 配置任务:

        concat: {
          options: { //可选项配置
            separator: ';'   //使用;连接合并
          },
          build: { //此名称任意
            src:  ["src/js/*.js"],  //合并哪些js文件
            dest: "build/js/built.js" //输出的js文件
          }
        }
      • 加载插件:

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

        grunt.registerTask('default', ['concat']);
      • 命令:

        grunt   //会在build下生成一个built.js
  • 压缩js: 使用uglify插件

    • 下载

      npm install grunt-contrib-uglify --save-dev
    • 配置: Gruntfile.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/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
            }
          }
        }
      • 加载任务:

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

        grunt.registerTask('default', ['concat', 'uglify']);
      • 命令:

        grunt   //会在build下生成一个压缩的js文件
  • 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"]
      }
    • 修改src/js/test1.js

      (function () {
        function add(num1, num2) {
          num1 = num1 + num3
          return num1 + num2;
        }
        console.log(add(10, 20));
      })();
    • 配置 : Gruntfile.js

      • 配置任务:

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

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

        grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
      • 命令:

        grunt   //提示变量未定义和语句后未加分号 -->修改后重新编译
  • 使用cssmin插件

    • 安装:

      npm install grunt-contrib-cssmin --save-dev
    • 编码:

      • test1.css

        #box1 {
          width: 100px;
          height: 100px;
          background: red;
        }
      • test2.css

        #box2 {
          width: 200px;
          height: 200px;
          background: blue;
        }
      • index.html

        <link rel="stylesheet" href="build/css/output.min.css">
        <div id="box1"></div>
        <div id="box2"></div>
    • 配置 : Gruntfile.js

      • 配置任务:

        cssmin:{
          options: {
            shorthandCompacting: false,
            roundingPrecision: -1
          },
          build: {
            files: {
                'build/css/output.min.css': ['src/css/*.css']
            }
          }
        }
      • 加载任务:

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

        grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
      • 命令:

        grunt    //在build/css/下生成output.min.css
  • 使用watch插件(真正实现自动化)

    • 命令: npm install grunt-contrib-watch --save-dev
    • 配置 : Gruntfile.js

      • 配置任务:

        watch : {
          scripts : {
            files : ['src/js/*.js', 'src/css/*.css'],
            tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
            options : {spawn : false}  
          }
        }
      • 加载任务:

        grunt.loadNpmTasks('grunt-contrib-watch');
      • 注册任务:

        grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
        改进:grunt.registerTask('myWatch', ['default','watch']);
      • 命令:

        grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理

Gruntfile.js文件配置

module.exports = function (grunt) {

    //  1. 初始化插件配置。 Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: ['src/js/*.js'],
                dest: 'dist/js/build.js',
            },
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc' //指定配置文件
            },
            build: ['build/js/build.min.js', 'src/js/*.js'] //指定检查的文件
        },
        cssmin: {
            options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        },
        watch: {
            scripts: {
                files: ['src/js/*.js', 'src/css/*.css'],
                tasks: ['concat', 'uglify', 'jshint', 'cssmin'],
                options: {
                    spawn: false,  //变量更新。true全量更新。
                },
            },
        },
    });

    // 2.加载插件任务。加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');//合并
    grunt.loadNpmTasks('grunt-contrib-uglify');//压缩
    grunt.loadNpmTasks('grunt-contrib-jshint');//js检查
    grunt.loadNpmTasks('grunt-contrib-cssmin');//压缩/合并css文件
    grunt.loadNpmTasks('grunt-contrib-watch');//真正实现自动化

    // 3.注册构建任务。默认被执行的任务列表。执行的任务是同步的(按顺序执行)
    grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
    grunt.registerTask('myWatch', ['default', 'watch'])

};
目录
相关文章
|
JSON Java 数据格式
6. 二十不惑,ObjectMapper使用也不再迷惑(下)
6. 二十不惑,ObjectMapper使用也不再迷惑(下)
6. 二十不惑,ObjectMapper使用也不再迷惑(下)
YOLOv5改进 | Neck篇 | 2024.1最新MFDS-DETR的HS-FPN改进特征融合层(轻量化Neck、全网独家首发)
YOLOv5改进 | Neck篇 | 2024.1最新MFDS-DETR的HS-FPN改进特征融合层(轻量化Neck、全网独家首发)
800 4
|
机器学习/深度学习 人工智能 自然语言处理
【ACL2024】基于长尾检索知识增强的大语言模型
近日,阿里云人工智能平台PAI与阿里集团安全部内容安全算法团队、华东师范大学何晓丰教授团队合作,在自然语言处理顶级会议ACL2024上发表论文《On the Role of Long-tail Knowledge in Retrieval Augmented Large Language Models》,论文主题为长尾知识检索增强的大语言模型。通过将问题识别为普通可回答和长尾两种性质,让大模型针对性的对长尾问题进行检索文档增强。对于普通可回答的用户提问可以直接通过大模型回答,而不需要进行文档检索增强,从而能增强大模型处理不同类型用户提问的效率。
|
12月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
1922 1
|
存储 人工智能 运维
重磅!阿里云可观测产品家族全新升级,AI +数据双驱动,打造全栈可观测体系
近日,阿里云可观测产品家族正式发布云监控 2.0,隶属产品日志服务 SLS、云监控 CMS、应用实时监控服务 ARMS 迎来重磅升级。
1060 111
|
云安全 安全 Serverless
Serverless 安全新杀器:云安全中心护航容器安全
Serverless 安全防护能力除了支持目前既定的等保合规(漏洞扫描、入侵检测、基线检测等)、安全隔离的能力外还支持 WAF 防火墙、支持通信加密、操作审计、权限管控等能力,也正是有了这些能力的加持,SAE 才能很好的服务了金融、政企、医疗等行业的客户;Serverless(SAE)未来还计划规划更多安全能力为企业保驾护航,包括:代码安全扫描、加密、堡垒机、最小权限、身份与访问管理、以及更多的攻击防护等能力的建设。
|
监控 API
【zookeeper 第四篇章】监控 Watcher
ZooKeeper通过Watcher机制实现了数据的发布/订阅功能。多个订阅者可以监听同一主题对象,一旦该对象状态变化,如节点内容或子节点列表变动,ZooKeeper会实时通知所有订阅者。Watcher架构包括ZooKeeper服务端、客户端及其Watcher管理器。客户端向服务端注册Watcher并保存至本地管理器中;当状态变化时,服务端通知客户端,触发相关Watcher回调处理逻辑。
315 2
|
12月前
|
SQL 自然语言处理 关系型数据库
Vanna使用ollama分析本地MySQL数据库
这篇文章详细介绍了如何使用Vanna结合Ollama框架来分析本地MySQL数据库,实现自然语言查询功能,包括环境搭建和配置流程。
1518 0
|
传感器 数据采集 监控
ERP系统中的生产过程监控与质量管理解析
【7月更文挑战第25天】 ERP系统中的生产过程监控与质量管理解析
518 0
ERP系统中的生产过程监控与质量管理解析
|
存储 算法 数据安全/隐私保护
深入理解操作系统的内存管理机制
【4月更文挑战第17天】 在现代计算机系统中,操作系统扮演着资源管理者的角色,其中内存管理是其核心职能之一。本文探讨了操作系统内存管理的关键技术,包括虚拟内存、物理内存分配与回收、分页和分段机制,以及内存交换技术。通过分析这些机制的原理和实现,我们旨在加深读者对操作系统如何有效管理和保护内存资源的理解。