Grunt简单应用

Grunt自动化构建教程

Grunt是JavaScript的构建工具,构建工具官方给出的解释是:对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动完成大部分无聊的工作。

Grunt的使用:

1.安装CLI(命令行:command lines)

  下载NodeJS(http://nodejs.cn/),然后打开电脑中的命令提示符输入cmd(window+r),在窗口中输入node -v,查看当前版本,同时也可以检测node是否正确安装。

我们可以使用cnpm替代默认的npm: npm install -g cnpm--registry=https://registry.npm.taobao.org

将CLI加入全局环境中去,这样可以调用与Gruntfile在同一目录中 Grunt: cnpm install -g grunt-cli

2.创建package.json文件

package.json放置于项目的根目录中,与grunt在同一目录中,并且应该与项目的源代码一起被提交。在package.json所在目录中运行cnpm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

{
  "name": "grunt-test",
  "version": "1.0.0",
  "devDependencies": {
    
  }
}

3.安装grunt

进入网站的根目录:cd 根目录名

安装grunt:在package.json中的“devDependencies”中就会存储开发依赖项

cnpm install grunt --save-dev

打开package.json文件:

{
  "name": "grunt-test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
  }
}

在根目录中会出现node_modules文件:存储grunt源文件的地方

4.配置grunt:例如我们使用uglify插件进行JS代码压缩

创建一个src文件夹,在src文件夹下创建一个js文件:test.js做实验

(function(window,undefined){
	function add(a,b){
		return a+b;
	}
	add(10,100);
})(window);

安装uglify插件:cnpm install grunt-contrib-uglify --save-dev

新建Gruntfile.js:配置插件

module.exports = function(grunt){
	//任务配置 所有插件的配置信息
	grunt.initConfig({
		//获取package.json
		pkg:grunt.file.readJSON('package.json'),
		//uglify插件的配置信息
		uglify:{
			options:{
				stripBanners:true,//生成的压缩文件第一行加一句话说明
				//说明的内容
				banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
			},
			build:{
				src:'src/test.js',//源文件:将test.js压缩
				dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目标文件:压缩格式以及存放的目录
			}
		},
	});
	//使用插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	//在终端输入grunt时执行的插件
	grunt.registerTask('default',['uglify']);
}

在控制台输入:grunt

然后在build文件夹下我们得到一个压缩后的test.js文件

/*! grunt-test-1.0.0.js 2016-11-18*/
!function(a,b){function c(a,b){return a+b}c(10,100)}(window);

大功告成~~

grunt插件类型有很多,类似以上用法,http://www.gruntjs.net/plugins

  • Contrib-jshint——javascript语法错误检查;
  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
  • Contrib-clean——清空文件、文件夹;
  • Contrib-uglify——压缩javascript代码
  • Contrib-copy——复制文件、文件夹
  • Contrib-concat——合并多个文件的代码到一个文件中
  • karma——前端自动化测试工具

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值