grunt简单的入门

最新推荐文章于 2025-09-07 01:02:55 发布

转载最新推荐文章于 2025-09-07 01:02:55 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/heyjuan/blog/719750

文章标签：

#python #前端 #json #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

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文件
空着先

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

$ cd E:

$ cd grunt

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

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

然后在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