grunt简单教程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了grunt简单教程相关的知识,希望对你有一定的参考价值。

Grunt简单教程

1.grunt简单介绍

Grunt是一个基于任务的命令行工具。依赖于node.js环境。

它能帮你合并js文件,压缩js文件,验证js。编译less,合并css。还能够配置自己主动任务。单元測试等等,grunt有许多的插件,能够满足你的大部分需求。

2.怎么安装

先介绍一些东西:

npm是node.js的包管理器通过npm能够下载安装nodejs的模块包

cnpm是淘宝 npm镜像,用此取代官方版本号(仅仅读),同步频率眼下为10分钟一次。

安装cnpm方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

经常使用命令:

node -v 版本号

 

npm -v 版本号

 

npm list:查看当前文件夹下已安装的node包

 

npm help:查看帮助命令

 

npm install <name> -g 
将包安装到全局环境中,在命令行能直接使用

 

npm update moduleName:更新node模块

 

npm uninstall moudleName:卸载node模块

 

npm root:查看当前包的安装路径
npm root -g:查看全局的包的安装路径

 

假设你之前安装过老的0.3版本号,请先卸载:

npm uninstall -g grunt

安装Grunt命令行(CLI):

npm install -g grunt-cli

注1:-g代表全局安装,Grunt有二个版本号:server端版本号(grunt)和client版本号(grunt-cli)。

注2:安装grunt-cli并不等于安装了grunt!grunt CLI的任务非常easy:调用与Gruntfile在同一文件夹中的grunt。这样带来的优点是。同意你在同一个系统上同一时候安装多个版本号的grunt。而grunt使用模块结构。除了安装命令行界面以外。还要依据须要安装对应的模块。这些模块应该採用局部安装。由于不同项目可能须要同一个模块的不同版本号。

 

package.json: 此文件被npm用于存储项目的元数据,以便将此项目公布为npm模块。

{
	"name": "grunt",

	"version": "0.1.0",

	"devDependencies": {

		"grunt": "~0.4.0",

		"grunt-contrib-jshint": "~0.1.1", 
		"grunt-contrib-nodeunit": "~0.1.2", 
		"grunt-contrib-watch": "~0.2.0", 
		"grunt-contrib-concat": "~0.1.1", 
		"grunt-contrib-uglify": "~0.1.0", 
		"grunt-contrib-cssmin": "~0.9.0", 
		"difflet": "~0.2.3"

	}
}


devDependencies里面的參数,指定了项目依赖的Grunt和Grunt插件版本号。当中"~0.1.1"代表安装该插件的某个特定版本号,假设仅仅需安装最新版本号,能够改成"*"。

创建新的Grunt项目

cd到项目目录

方式一:建好package.json文件然后运行:
npm install
这时你会发现项目目录中多了个node_modules目录,其里面就是相应的Grunt和Grunt插件。

 

方式二:自己主动安装

 

安装最新版的Grunt:
npm install grunt --save-dev
接着安装我们所须要的插件:
npm install grunt-contrib-cssmin --save-dev
注:当中--save-dev,表示将它作为你的项目依赖加入到package.json文件里devDependencies内。假设你要安装指定版本号的Grunt或者Grunt插件。仅仅须要执行npm install [email protected] --save-dev命令,当中VERSION就是你所须要的版本号(指定版本号号就可以)。

 

配置任务


Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee。用来配置或定义任务(task)并载入Grunt插件

 

module.exports = function(grunt){

	grunt.initConfig({ 
		pkg: grunt.file.readJSON(‘package.json‘), 
		concat: {  
			options: {  
			},  
			dist: {  
				src: [‘src/**/*.js‘],//src目录下包含子目录下的全部文件  
				dest: ‘dist/built.js‘//合并文件在dist下名为built.js的文件  
			}  
		},
		uglify: { 
			//文件头部输出信息
			options: { 
				banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> */\n‘ 
			}, 
			//详细任务配置
			build: { 
				src: ‘dist/built.js‘, 
				dest: ‘build/built.min.js‘ 
			} 
		},
		cssmin: {
			build: {
				src: ["src/css/css1.css", "src/css/css2.css"],
				dest:"dist/css/cssOut.css"
			}		
		}
	});
	// 载入提供”uglify”任务的插件 
	grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
	grunt.loadNpmTasks(‘grunt-contrib-concat‘); 
	grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); 
	// 默认任务 
	grunt.registerTask(‘default‘, [‘concat‘,‘uglify‘,‘mincss‘]); 
}

运行任务

运行配置中全部的任务:
grunt
运行某个特定的任务:
grunt concat

 

经常使用插件介绍:

grunt-contrib-uglify  压缩js文件

grunt-contrib-concat 合并随意文件

grunt-contrib-jshint 于javascript代码检查(并会给出建议),公布js代码前运行jshint任务,能够避免出现一些低级语法问题

grunt-contrib-mincss  用于css压缩

grunt-contrib-watch 它能监測文件的改动,触发指定任务

grunt-contrib-less less编译

等等

以上是关于grunt简单教程的主要内容,如果未能解决你的问题,请参考以下文章

用gulp加速前端开发

grunt整合版30分钟学会使用grunt打包前端代码

grunt整合版30分钟学会使用grunt打包前端代码

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程