正文

grunt常用插件的使用

iriliguo  iriliguo  2022-09-07  748

关键词：

Grunt 作为前端自动化构建工具，我主要使用到的是其中对css的less预处理器的转换，图片的压缩，js,css文件的合并压缩以及实时监测的插件。

好处是：节省带宽流量，提高了代码的安全性。

使用Grunt的步骤如下：

1.安装：先要安装 Node.js, 然后安装 Grunt(打开控制台输入npm install -g grunt-cli进行全局安装)。

2.创建自己的项目文件(此处用到了bootstrap配合grunt使用）：

注意：

Gruntfile.js 是用来配置和定义任务并加载Grunt插件；
package.json 是 npm 用来配置项目的元数据，如配置文件合并与压缩依赖的插件；
这里的node_modules文件是之后安装了相关插件自动出现的内容。

然后在package.json中输入

{
  "name": "guocheng",
  "version": "1.0.0",
  "devDependencies": {
//用来存储开发依赖项

  }
}

3.插件的安装：

再次安装grunt，这里就是进入建立的项目guocheng下面，打开控制台安装，输入npm install grunt --save-dev回车。

安装好后node_modules文件便会出现，package.json中的“devDependencies”里面便多了插件信息。

接着继续安装你所需要的插件npm install 插件名称 --save-dev（例如：安装uglify插件：

npm install grunt-contrib-uglify --save-dev），我在把所需插件安装好后，package.json中的内容变化如下：

4.在Gruntfile.js 里面进行相关插件的配置：

//包装函数
module.exports = function (grunt) {
    //任务配置，所有插件的配置信息
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        less: {//把less文件自动转换为css文件
            compile: {
                files: {
                    'css/common.css': 'css/common.less'
                }
            },
            yuicompress: {
                files: {
                    'css/common-min.css': 'css/common.css'
                },
                options: {
                    yuicompress: true
                }
            }
        },
//压缩图片
        imagemin: {
            dynamic: {
                options: {
                    optimizationLevel: 3 // png图片优化水平，3是默认值，取值区间0-7
                },
                files: [
                    {
                        expand: true, // 开启动态扩展
                        cwd: "img/", // 当前工作路径
                        src: ["**/*.{png,jpg,gif}"], // 要出处理的文件格式(img下的所有png,jpg,gif)
                        dest: "img/" // 输出目录(直接覆盖原图)
                    }
                ]
            }
        },

        // 合并任务配置
        concat: {

            css: {
                // 源文件，数组，
                src: ['css/*.css'],
                // 目标文件, pkg.name 是定义在 package.json 文件中的 name
                dest: 'dist/all.css'
            },
            js: {
                options: {
                    // js 文件合并用 ';'分隔
                    separator: ';',
                },
                src: ['js/*.js'],
                dest: 'dist/all.js'
            },
        },
        // 压缩 css 文件
        cssmin: {
            css: {
                src: 'dist/all.css',//将之前的all.css
                dest: 'dist/all.min.css'  //压缩
            }
        },
        // 压缩 js 文件
        uglify: {
            js: {
                src: 'dist/all.js',//将之前的all.js
                dest: 'dist/all.min.js'  //压缩
            },
        },
watch:{
            build:{
                files: ['js/*.js','css/*.less'],//实时监测js，less文件内容的改动并执行相关任务
            tasks:['less','uglify'],
            options:{spawn:false}
}
        }
    });
//告诉grunt当我们在终端中输入grunt时需要做些什么
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['less','concat','cssmin','uglify','watch']);
};

然后在控制台输入grunt回车：

然后想要的结果就出现了。

如果要另外新建项目，把package.json拷过去，打开项目所在的控制台输入npm install回车便可把里面的插件一次性安装好。当然，如果只想执行一个插件的命令，就在控制台里面输入grunt +想要执行的项目，比如就仅仅压缩图片，就在控制台输入grunt imagemin回车即可。

grunt常用插件及示例说明

下述给出了常用Grunt插件，并列举了部分插件示例：插件名称说明Github地址grunt-contrib-clean清空文件和文件夹https://github.com/gruntjs/grunt-contrib-cleangrunt-contrib-copy复制文件和文件夹https://github.com/gruntjs/grunt-contrib-copygrunt-contrib-co 查看详情

grunt的使用方法，环境配置和插件安装

虽然现在grunt的用的越来越少了，但是插件数量还是相当多的，另外grunt和gulp的使用相当相似；grunt需要安装node和npm验证node是否安装：node-v验证npm是否安装：npm-v 下面是具体的使用方法：1》安装全局的配置环境npminstall-ggrunt-... 查看详情

为什么在npm中使用插件的对等依赖？(代码片段)

例如，为什么Grunt插件将其对grunt的依赖定义为“对等依赖”？为什么插件不能将Grunt作为grunt-plug/node_modules中的依赖？这里描述了对等依赖关系：https://nodejs.org/en/blog/npm/peer-dependencies/但我真的不明白。例我正在使用AppGyverSteroids... 查看详情

安装 grunt 插件时如何修复需要 grunt@~0.4.0 的对等方？

】安装grunt插件时如何修复需要grunt@~0.4.0的对等方？【英文标题】：Howtofixrequiresapeerofgrunt@~0.4.0whileinstallinggruntplugins?【发布时间】：2019-04-2801:40:11【问题描述】：我正在尝试安装一些Grunt插件，例如grunt-contrib-clean和grunt-contrib-watch... 查看详情

grunt使用入门

...录下install-g都是一样的 npminstall-ggrunt-cli二、安装grunt插件时项目中一定要package.json，所以在项目中加一个最简单的package.json。不然的话插件安装不上。三、在项目目录下安装grunt npm instalgrunt--save-dev四、我查看详情

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

?什么是GruntGrunt和Grunt插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。grunt是基于node更多插件请访问：http://www.gruntjs.net/ 使用前提：1.DOS：powershell 安装(全局)grunt-npminstallgrunt-cli-g &nb 查看详情

为啥在 npm 中为插件使用对等依赖项？

】为啥在npm中为插件使用对等依赖项？【英文标题】：Whyusepeerdependenciesinnpmforplugins?为什么在npm中为插件使用对等依赖项？【发布时间】：2014-12-3112:01:25【问题描述】：例如，为什么Grunt插件将其对grunt的依赖定义为“peerdependencie... 查看详情

grunt

...觉。本文将介绍可能将过时的grunt 安装　　Grunt和Grunt插件是通过npm安装并管理的。在学习Grunt前，需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo 查看详情

前端工程化系列[03]-grunt构建工具的运转机制(代码片段)

...们还知道了该如何来安装Grunt环境，以及使用一些常见的插件了，这篇文章主要介绍Grunt的核心组件和运转机制。Grunt是一套前端自动化构建工具，可以帮助我们简化开发中需要反复处理的任务，甚至可以实现自动构建等功能。Gru... 查看详情

grunt-grunt使用(代码片段)

...置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的，npm是nodejs 的包管理器，所以第一步需要安装nodejs环境。安装grunt之前确保npm更新到最新的版本，使用npmupdate-gnpm在命令行中进行升... 查看详情

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

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

Spring Boot Gradle 插件 bootRun 任务无法识别 Yeoman 何时生成静态文件并使用 grunt 更新

】SpringBootGradle插件bootRun任务无法识别Yeoman何时生成静态文件并使用grunt更新【英文标题】：SpringBootGradlepluginbootRuntasknotrecognizingwhenstaticfilesaregeneratedbyYeomanandupdatedwithgrunt【发布时间】：2014-01-2914:06:59【问题描述】：我有一个使用... 查看详情

Grafana，写一个简单的插件，不用 grunt 啥的

】Grafana，写一个简单的插件，不用grunt啥的【英文标题】：Grafana,writeasimpleplugin,withoutusinggruntorwhateverGrafana，写一个简单的插件，不用grunt什么的【发布时间】：2018-07-0723:27:29【问题描述】：大家好。我是Grafana的新手，我们最近... 查看详情

grunt怎么安装已经配置好的packet.json

...赖（1）逐个添加，逐个执行命令$npminstallXXX--save-devXXX是常用插件名，如grunt-contrib-jshint最好是全称，不要简写。我曾试过npminstallcssmin--save-dev生成了无用的东西。（2）也可以一次在package.json中添加多个插件，然后一次执行命令$np... 查看详情

grunt-js文件压缩

grunt常用函数说明：Grunt:javascript世界的构建工具、grunt.initConfig:定义各种模块的参数，每个成员项对应的一个同名模块。grunt.loadNpMTasks:加载完成所需要的模块。grunt.registerTask:定义具体的任务.第一个参数为任务名、第二个参数是... 查看详情

grunt基础配置

...骤：安装grunt命令行工具grunt-cli在项目中安装grunt安装grunt插件建立并配置Gruntfile.js安装grunt命令行工具npminstall-ggrunt-cli在项目中安装gruntnpminstallgrunt--save-dev安装完成后，可以在package.json文件中看到devDependenc 查看详情

gulp的常用api

...易于学习，API非常少，你能在很短的事件内学会gulp那些常用的gulp插件No.1、run-sequenceLinks: https://www.npmjs.com/package/run-seq 查看详情

grunt入门

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