iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Node.js的项目构建工具Grunt的安装与配置教程
  • 392
分享到

Node.js的项目构建工具Grunt的安装与配置教程

工具项目教程 2022-06-04 17:06:48 392人浏览 安东尼
摘要

Grunt 基于 node.js ,用 js 开发,这样就可以借助 node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装

Grunt 基于 node.js ,用 js 开发,这样就可以借助 node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。
所以 NPM 生成的 package.JSON 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

安装 Grunt-cli
其实是安装 Grunt-cli ,这里安装Grunt的命令行支持(command line interface,简称CLI),在这之后,命令提示符中将会识别grunt命令。安装grunt-cli 并不能称为安装Grunt完毕。这是因为,Grunt本身不是全局使用的,任何具体的工作目录,如果要使用Grunt,都需要安装一次Grunt。这样做也是因为不同的工作目录,需要通过Grunt做的自动化工作也不同,因此需要独立配置。


npm install -g grunt-cli

—save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。

生成 package.json 文件
npm对工作目录有一个要求。这个要求是:根目录位置处有一个package.json
文件。这个文件定义了工作目录对应的一些项目信息(名字,描述),以及包(就是npm模块)依赖关系。
执行下面命令便可以初始化


npm init

为当前工作目录安装Grunt和需要的插件
方法1
之前我们把Grunt安装到了全局目录下,现在需要引入到当前项目路径,与此同时,所需要的插件可能有这些:

合并文件:grunt-contrib-concat
语法检查:grunt-contrib-jshint
SCSS 编译:grunt-contrib-sass
压缩文件:grunt-contrib-uglify
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect
安装它们的方式可以是:


npm install --save-dev grunt
npm install --save-dev 插件1 插件2 插件3

这个时候package.json文件夹里多出了一些代码。


"devDependencies": {
 "grunt": "0.4.1"
},

方法2-手动更改package.json


"devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-cSSMin": "~0.7.0"
 }

手动在package.json文件里面添加这个字段,将需要依赖的包添加进去,如果只需安装最新版本,可以改成 * ,然后执行npm install,会发现文件夹里多了node_modules文件夹,里面存放的就是我们需要的插件。

配置
一般来说,直接使用模板作为配置文件。


module.exports = function(grunt) {
 "use strict";
 grunt.initConfig({
 //插件配置区域
 });
 //加载插件任务,要使用谁就添加谁
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 // 注册任务
 grunt.reGISterTask('default', ['cssmin', 'imagemin', 'uglify']);
};

grunt.loadNpmTasks()是加载插件任务。其实就是说,你如果要使用哪个插件的功能,请在这部分用这句代码把插件任务添加进去。
grunt.registerTask()是注册任务,默认有一个default。默认的意思就是说,你最后使用的时候,在目录的命令提示符里直接输入grunt便可以执行注册的任务,相当于执行了default这个任务。

使用自定义任务
可以注册更多的任务命令,使用其他的命名。比如


grunt.registerTask('custom', ['cssmin', 'imagemin']);

对应使用的时候,输入:


grunt custom

--结束END--

本文标题: Node.js的项目构建工具Grunt的安装与配置教程

本文链接: https://www.lsjlt.com/news/13037.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TortoiseGit的安装与配置教程
    目录1.为什么选择Git效率历史TortoiseGit 简介2.下载安装Git及Tortoisegit3.Tortoisegit 配置1.为什么选择Git 效率 很多人有一种习惯吧,...
    99+
    2024-04-02
  • Grafana的安装与配置教程
    这篇文章主要讲解了“Grafana的安装与配置教程”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Grafana的安装与配置教程”吧!一: 简介Grafana 是一个开源仪表盘工具,...
    99+
    2023-06-04
  • LabelImg(目标检测标注工具)的安装与使用教程
    🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝  ᾗ...
    99+
    2023-09-02
    目标检测 计算机视觉 深度学习 人工智能 python
  • 【Java】Eclipse的安装和JDK的安装与配置教程
    Java是能够跨越多平台的、可移植性高的一种面向对象的编程语言,其简单易学、功能强大,越来越多的程序员喜欢加入Java的阵营之中。 一、前言 Java具有以下功能特点: 跨平台性:Java程序...
    99+
    2023-10-21
    java eclipse jvm
  • MySQL的安装与配置—详细教程
    MySQL的安装与配置——详细教程 一、MySQL简介 MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的标准化语言,其特点为体积小、速度快、总体拥有成本低,尤其...
    99+
    2023-10-27
    mysql 数据库 服务器
  • MySQL的安装与配置详细教程
    目录免安装版的Mysql一、下载安装包:二、Mysql的配置2.1可能会出现的问题2.2命令参考:免安装版的Mysql   MySQL是一种关系数据库管理系统,所使用的 SQL 语言...
    99+
    2024-04-02
  • java项目构建Gradle的使用教程
    目录一、相关介绍二、安装三、IED中的使用1、IDEA2、Eclipse四、问题说明一、相关介绍 Gradle是一个好用的构建工具 ,使用它的原因是: 配置相关依赖代码量少,不会像m...
    99+
    2024-04-02
  • VisualStudio2022的安装和创建C++项目(图文教程)
    目录1.下载2.安装3.接下来就是创建项目4.如果你想添加多个.cpp,并且想要运行成功,可以右键.cpp、属性,下面我们来讲一下如何下载安装VS 2022并且创建C++项目。 1....
    99+
    2024-04-02
  • MySQL的安装与配置——2023详细教程
    MySQL的安装与配置——详细教程 免安装版的MySQL1.下载安装包2.Mysql的配置2.1 安装mysql的服务2.2 开启mysql的服务2.3 修改密码2.4 设置系统的全局变量2.5 命令参考 免安装版的MySQ...
    99+
    2023-08-21
    mysql 数据库 java
  • 【开发工具】Gradle的安装 与 配置环境变量
    个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ Gradle安...
    99+
    2023-10-20
    java spring 开发语言 gradle
  • Torch7在Ubuntu下的安装与配置教程
    本篇内容介绍了“Torch7在Ubuntu下的安装与配置教程”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!为什么选择TorchTorch的目...
    99+
    2023-06-13
  • Nginx的安装配置教程
    一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好   1.下载 在Ngin...
    99+
    2023-09-03
    nginx 前端 服务器
  • 漏洞扫描工具Nessus的下载与安装教程
    Nessus的下载与安装 漏洞扫描工具Nessus的下载与安装 目录 Nessus的下载与安装前言一、Nessus简介二、Nessus安装三、Nessus配置四、Nessus使用总结 ...
    99+
    2023-09-16
    安全 网络 服务器 网络安全 web安全
  • IDEA2022.2的简介、下载与安装、配置教程
    目录IDE工具之IDEA2022.2的简介、下载与安装、初步配置IDEA简介概述下载与安装IDEA 基本配置Appearance(显示)主题配置KeyMap(快捷键)配置Editor...
    99+
    2022-11-13
    idea2022.2下载安装 idea2022.2安装配置 idea2022安装
  • 超级详细的Vue安装与配置教程
    目录一、下载和安装Vue二、创建全局安装目录和缓存日志目录三、配置环境变量 1. 环境变量---用户变量---选中Path---点编辑2. 环境变量---系统变量---新建...
    99+
    2024-04-02
  • MAVEN的安装与配置教程(超详细版)
    前言:在MAVEN的安装和配置开始之前,先给大家介绍一下MAVEN。 1.MAVEN的认识 1.1什么是MAVEN Maven是一个项目构建及管理工具,开发团队几乎不用花多少时间就能够自动完成工程的基础构建配置, Maven 使用了一...
    99+
    2023-09-01
    maven java intellij-idea Powered by 金山文档
  • JDK17的下载安装与配置(详细教程)
    搜索JDK的官方网址 https://www.oracle.com/java/technologies/downloads/#jdk17 2.切换到window系统,根据自己电脑的系统进行切换。然后点击下载 3.下载完成后移动你指定的文件...
    99+
    2023-08-17
    java linux 大数据
  • RHEL5.3下安装项目管理工具dotProject的步骤
    本篇内容介绍了“RHEL5.3下安装项目管理工具dotProject的步骤”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!v\:* {beha...
    99+
    2023-06-17
  • Linux远程连接工具的配置安装及应用
    本篇内容主要讲解“Linux远程连接工具的配置安装及应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Linux远程连接工具的配置安装及应用”吧!一.Linux远程连接工具连接windows远程...
    99+
    2023-06-16
  • VirtualBox安装CentOS及JDK、Hadoop的安装与配置详细教程
    目录1.先决条件1.1 支持平台1.2 jdk及hadoop安装包1.3 Xshell 7与Xftp 7工具安装2.具体安装步骤 2.1 网络配置2.2 Xshell连接2...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作