【Grunt】Grunt打包流程

1、首先要在webstorm中配置Grunt框架:点击【Run】,选择【Edit Configurations…】
这里写图片描述

2、然后在弹出的对话框里选择绿色的加号按钮,如下图:选中Grunt牌子的野猪图标:
这里写图片描述

3、然后配置Grunt的一些命令和文件目录:这里的名字无所谓,但是命令和文件地址要正确;配置完点击Apply或者OK即可;
这里写图片描述

4、在界面的右上角找到那只绿色的野猪,然后点击绿色朝右的等腰三角形按钮:
这里写图片描述

5、如果有红色报错表示有问题,可以点击运行绿色朝右等腰三角形按钮,或者检查刚才的配置:
这里写图片描述

6、如果看到这句话:“Done, without errors.

Process finished with exit code 0”表名web端已经打包成功了~

Running "clean:angular" (clean) task
>> 1 path cleaned.

Running "copy:angular" (copy) task
Created 403 directories, copied 692 files

Running "useminPrepare:html" (useminPrepare) task
Configuration changed for concat, uglify, cssmin

Running "concat:generated" (concat) task
File .tmp\concat\css\app.min.css created.
File .tmp\concat\js\app.angular.js created.

Running "cssmin:generated" (cssmin) task
>> 1 file created. 87.73 kB → 69.26 kB

Running "uglify:generated" (uglify) task

Running "usemin:html" (usemin) task
Replaced 1 reference to assets

Running "clean:tmp" (clean) task
>> 1 path cleaned.

Done, without errors.

Process finished with exit code 0

这里写图片描述

7、可以去后台那里看到打包好的按橙色js和html文件包——target包;
这里写图片描述

完毕~

欢迎关注我的微信公众号:
【幕桥社区】
这里写图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Grunt和Gulp是任务运行器,用于自动化前端开发工作流程。它们可以帮助开发人员自动执行重复的任务,例如文件压缩、代码合并、图像优化等。 Grunt是一个基于配置的任务运行器,使用JavaScript编写配置文件。它使用任务和插件的概念来定义和执行工作流。开发人员可以根据自己的需求选择适合的插件,并在配置文件中定义任务的顺序和参数。 Gulp是另一个任务运行器,它使用JavaScript的流式操作来定义任务。Gulp的配置文件通常更简洁和易于理解。开发人员可以通过编写任务函数和使用管道操作符来定义和执行任务。 Webpack是一个模块打包工具,它可以将多个模块打包成一个或多个捆绑包。Webpack可以处理JavaScript、CSS、图像等多种类型的资源,并将它们组织成依赖关系图。它还支持代码分割、懒加载、热模块替换等高级功能,以提升应用程序的性能和开发效率。 Npm脚本是Node.js的包管理器中的一个功能,允许开发人员在package.json文件中定义自定义命令。这些命令可以用来执行各种任务,例如构建项目、运行测试等。Npm脚本可以与Grunt、Gulp和Webpack等工具配合使用,以便更灵活地定义和执行任务。 用于前端开发的任务运行器和模块打包工具有不同的特点和适用场景。通常情况下,Grunt适用于较为简单的项目,Gulp适用于较为复杂的项目,而Webpack适用于需要模块化管理和打包的项目。开发人员可以根据项目的需求和个人喜好选择合适的工具。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶洲川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值