grunt是什么,以及它的一些使用方法

author author     2022-09-04     524

关键词:

?什么是Grunt

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。grunt是基于node

更多插件请访问:http://www.gruntjs.net/

 

使用前提:

1.DOS:powershell

    安装(全局)grunt-npm install grunt-cli-g

    切换到文件所在目录下安装:npm install grunt

2.安装完成后检查版本

    grunt --version

    

接着咱们要在项目里创建一个Gruntfile.js文件(文件名必须是Gruntfile)

js里写grunt配置代码

module.exports = function (grunt) {
    grunt.initConfig({
        
    });
};

 插件安装

安装uglify

npm install grunt-contrib-uglify

安装cssmin

npm install grunt-contrib-cssmin

安装完成后咱们来压缩一个css文件

首先要创建一个app文件夹,里面创建一个index.css文件

css文件里写上如下代码:

*{
   padding: 0;
   margin:0;
}
div{
    width: 200px;
   height: 200px;
   background: pink;
}

之后咱们在Gruntfile.js里写入:

module.exports = function (grunt) {
    grunt.initConfig({
        cssmin: {

            css: {

                src:‘css/css.css‘,

                dest:‘dest/index-min.css‘

            }

        }
    });
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.registerTask(‘default‘, [‘cssmin‘]);


};

在命令行运行grunt

 

    

    

前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)

...列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt的主要组件以及它的运转机制,这篇文章是Grunt使用的进阶教程,主要输出以下内容:? Grunt项目的自定义任务?&n... 查看详情

什么是 JSON,它的用途是什么?

】什么是JSON,它的用途是什么?【英文标题】:WhatisJSONandwhatisitusedfor?【发布时间】:2010-09-2721:00:37【问题描述】:我查看了Wikipedia并在Google上搜索并阅读了官方文档,但我仍然没有真正理解JSON是什么,以及我为什么要使用它... 查看详情

什么是rest/restful以及它的用途是什么?

RepresentationalStateTransfer(REST)/RESTfulWeb服务是一种帮助计 算机系统通过 Internet进行通信的架构风格。这使得微服务更容易理解和实现。微服务可以使用或不使用 RESTfulAPI实现,但使用 RESTfulAPI构建松散耦合 的微... 查看详情

什么是rest/restful以及它的用途是什么?

RepresentationalStateTransfer(REST)/RESTfulWeb服务是一种帮助计算机系统通过Internet进行通信的架构风格。这使得微服务更容易理解和实现。微服务可以使用或不使用RESTfulAPI实现,但使用RESTfulAPI构建松散耦合的微服务总是更... 查看详情

使用 Grunt 压缩 HTML 中的类名和 id

...U-JgJ-KU-Jg-K9"></div>Gmail使用的这种压缩方法的名称是什么,是否有用于它的grunt模块?该方法扫描每个js、css和html文件,并缩短类名和id。【 查看详情

grunt

...的很快,15年还在流行grunt,而现在随着gulp的大量使用,以及webpack越来越流行,grunt基本上要被淘汰了。学习进度跟不上技术发展进度,实在是说不出的感觉。本文将介绍可能将过时的grunt 安装  Grunt和Grunt插件是通过npm安... 查看详情

何时使用 @JsonProperty 属性以及它的用途是啥?

...usedandwhatisitusedfor?何时使用@JsonProperty属性以及它的用途是什么?【发布时间】:2012-09-1700:16:02【问题描述】:这个bean的“状态”:publicclassStateprivatebooleanisSet;@JsonProperty("isSet") 查看详情

如何安装 grunt 以及如何使用它构建脚本

】如何安装grunt以及如何使用它构建脚本【英文标题】:Howtoinstallgruntandhowtobuildscriptwithit【发布时间】:2013-03-2004:12:38【问题描述】:您好,我正在尝试在Windows764位上安装Grunt。我已经使用命令安装了Gruntnpminstall-ggruntnpminstall-ggru... 查看详情

glup入门

本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子。什么是gulpgulp的官方定义非常简洁: 基于文件流的构建系统 。这里强调了streaming,... 查看详情

ObjectMapper 的目标是啥?

...文标题】:WhatistheobjectiveofanObjectMapper?ObjectMapper的目标是什么?【发布时间】:2013-03-1421:23:56【问题描述】:我不明白为什么在面向对象的开发中人们使用一些ObjectMapper类。你能解释一下这种课程的目的是什么吗?我也在寻找有... 查看详情

ObjectMapper 的目标是啥?

...文标题】:WhatistheobjectiveofanObjectMapper?ObjectMapper的目标是什么?【发布时间】:2013-03-1421:23:56【问题描述】:我不明白为什么在面向对象的开发中人们使用一些ObjectMapper类。你能解释一下这种课程的目的是什么吗?我也在寻找有... 查看详情

grunt常用插件的使用

...less预处理器的转换,图片的压缩,js,css文件的合并压缩以及实时监测的插件。好处是:节省带宽流量,提高了代码的安全性。 使用Grunt的步骤如下:1.安装:先要 安装Node.js,然后 安装Grunt(打开控制台输入npminstall-ggrunt... 查看详情

什么是widget

什么是Widget?我是指最近比较流行的SecondLife之类使用的统称,谁有兴趣详细解释下。我仅有的25个积分也贡献出来乜……  Widget一般指WebWidget,中文译名被称作是微件,是一小块可以在任意一个基于HTML的Web页面上执行的代码... 查看详情

grant简介以及安装

          Grant简介以及安装1.   安装Grunt-cli需要使用npm,全局安装 命令:npminstall–ggrunt-cli(可能会涉及权限问题)注意,安装grunt-cli并不等于安装了Grunt!GruntCLI的任务很简单:调用与Gruntfile在同一目... 查看详情

grunt的初级应用

 Grunt是什么呢?Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在Gruntfil... 查看详情

什么是 nuget props 文件,它的用途是什么?

】什么是nugetprops文件,它的用途是什么?【英文标题】:Whatisnugetpropsfileandwhatisitfor?【发布时间】:2019-05-1918:12:35【问题描述】:我环顾四周并阅读了很多内容,但找不到明确的答案来解释“nuget.props”文件是什么以及它的用途... 查看详情

grunt入门

...p;Grunt简介:插件丰富,功能强大,jshint对JS文件的检测,以及js和css文件的合并,压缩,是前端自动化压缩构建项目的得力助手。接下来就随lizimeme一起学习grunt的基本使用  我的电脑安装了nodejs,自动全局安装了npm(npm是随... 查看详情

(转)soap和wsdl的一些必要知识

...程对象的方法,就必定要告诉对方,我们要调用的是一个什么方法,以及这个方法的参数的值等等。然后对方把数据返回给我们。这其中就涉及到两个问题:1、数据如何在网络上传输。2、如何表示数据?用什么格式去表示函数... 查看详情