文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-04 17:47

关注

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
阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯