ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Grunt使用教程(限winows)

2021-05-28 23:04:21  阅读:181  来源: 互联网

标签:教程 grunt package 插件 js json install winows Grunt


前提:安装nodejs
一、 打开dos命令窗口,输入命令 “node -v”,确认nodejs安装成功

二、 其次,安装grunt-cli (该插件是grunt命令行插件),执行命令“npm install –g grunt-cli”,”-g”表示全局安装。Ps:一般我们使用npm install的时候最好是在项目下进行安装,全局安装的问题是当你换一台机器的时候有可能不适用。

三、 新建一个文件夹,命名随意。

四、 新建两个文件,名字分别为package.json跟Gruntfile.js,其中Gruntfile.js里面暂时不写入内容(注意,使用echo创建文件的时候,要把文件里面的内容清空)

五、 打开package.json文件,此文件的作用,前端的同学应该非常熟悉,规范上就是定义前端项目依赖跟项目描述的,写入如下内容并保存(其实就是json字符串):
{
"name":"test",
"version":"0.1.0",
"description":"test demo",
"devDependencies":{
}
}

这里先不在devDependencies中写东西,因为以后在用npm install的时候可以指定版本号。
六、 cd命令行到项目根目录下,执行npm install

黄框:现在仓库(使用npm install生成的node_modules文件夹)中没有依赖
红框:没有指定许可证书,可以自己在package.json中写上”license”:”MIT”
查看项目目录:
七、 命令行安装grunt、grunt-contrib-uglify(压缩js用的插件)
这里的 - -save –dev 表示要将信息写入到package.json的devDependencies中

查看package.json跟node_modules文件夹,会出现对应的信息

八、 在Gruntfile.js中写入项目的配置信息:

创建一个test.js的文件,保证里面有一些js内容

同时配置uglify的信息,包括要压缩的文件跟压缩文件生成的位置

PS:其中使用到了pkg获取package.json的内容。

九、 还有重要的一步:上边我们是进行了配置,但是没有告诉grunt要怎么做,所以要有接口加载、执行(加载插件、执行配置)

Ps:注册的时候直接写入 [ ] 中插件名称表示执行grunt的时候同事执行了该功能
十、 执行grunt命令

可以看到已经执行成功,看一下目录

确实压缩成了一行,成功!!!

PS:要十分注意json字符串的标点符号的书写!!!
这里的图片没法显示,存入自己云笔记中!,需要找我要

标签:教程,grunt,package,插件,js,json,install,winows,Grunt
来源: https://blog.51cto.com/u_8056676/2829073

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有