博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
grunt简单的入门
阅读量:6800 次
发布时间:2019-06-26

本文共 1408 字,大约阅读时间需要 4 分钟。

hot3.png

grunt

是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:

① 压缩文件
② 合并文件
③ 简单语法检查

对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩

初学,有误请包涵

1--nodeJs环境

因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境

2--安装grunt

有了nodeJs环境后,我们便可以开始搞grunt了,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI

官方推荐在全局安装CLI(grunt的命令行接口)

npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,原因是

每次运行grunt时,它都会使用node的require查找本地是否安装grunt,如果找到CLI便加载这个本地grunt库

然后应用我们项目中的GruntFile配置,并执行任务

经历才是关键,所以行动一下

————————————————————————————————————

首先在E盘创建文件夹 grunt

在里面新增两个文件(不要问为什么,)

package.json

{  "name": "my-project-name",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-jshint": "~0.10.0",    "grunt-contrib-nodeunit": "~0.4.1",    "grunt-contrib-uglify": "~0.5.0"  }}

创建 gruntfile.js文件

空着先

194358_cov8_2647675.png

完了我们需要在grunt目录下执行 npm install将相关的文件下载下来:

$ cd E:

$ cd grunt

然后目录里面就会增加一些文件

并创建一个文件夹,添加一个js文件

194631_teLl_2647675.png

然后在Gruntfile中新增以下代码(先别管,增加再说)

module.exports=function(grunt){	// 项目配置	grunt.initConfig({		pkg:grunt.file.readJSON('package.json'),		uglify:{			options:{				banner:'/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n'			},			build:{				src:'src/app.js',				dest:'script/app.min.js'			}		}	});	// 加载插件	grunt.loadNpmTasks('grunt-contrib-uglify');	// 默认任务,输入grunt执行	grunt.registerTask('default',['uglify']);}

然后运行 grunt

194744_QrQm_2647675.png

194803_fv6O_2647675.png

OK,多了一个文件

uglify是压缩文件

build 中的src是要被压缩的文件,在src中的app.js

执行grunt后

如果存在script文件 就把压缩后的.min.js文件放入 否则新建script文件夹

 

转载于:https://my.oschina.net/heyjuan/blog/719750

你可能感兴趣的文章
Eric S. Raymond 五部曲
查看>>
《Ansible权威指南 》一2.7 本章小结
查看>>
《iOS编程指南》——2.4节安装iOS SDK
查看>>
Comparing Mongo DB and Couch DB
查看>>
《配置管理最佳实践》——1.6 工具的选择
查看>>
前端工程师如何快速的开发一个微信JSSDK应用
查看>>
Apache Spark源码走读(九)如何进行代码跟读&使用Intellij idea调试Spark源码
查看>>
【好书试读】数据有度:场景时代的内容玩法
查看>>
mysql 主从设计
查看>>
mybatis使用数组批量删除
查看>>
npm scripts 使用指南
查看>>
架构师速成8.1-谈做技术人员的态度
查看>>
千金药方——MongoDB疑难杂症的分析和优化
查看>>
Android应用安全开发之浅谈网页打开APP
查看>>
撕下 Coding iPad 悬赏单的小小感触
查看>>
从文件路径中获取文件名的方法
查看>>
关于Recycle Bin是什么以及实验
查看>>
Android图形显示系统——上层显示1:界面绘制大纲
查看>>
EDB PPAS的"坑" 不兼容PostgreSQL一例
查看>>
"proxy_pass" cannot have URI part in location given by regular expression
查看>>