前端自动化构建工具Grunt

一、了解Gurnt

Grunt 是一个基于任务的JavaScript工程命令行构建工具。
Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器。
了解Grunt前,首先要准备两件事:
1、了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
2、安装node:进入nodejs官网(https://nodejs.org/),单击INSTALL下载node安装包,默认安装。安装完成后,进入对应目录,会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。

二、安装Grunt

参考Grunt官网http://www.gruntjs.net/
安装Grunt:npm install -g grunt-cli
注意,安装grunt-cli并不等于安装了Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的Grunt。

三、简单实用Grunt

一个新的Grunt项目,必须在根目录下要有两个文件:package.json 和 Gruntfile.js
package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。
1. npm init命令会创建一个基本的package.json文件。或者手动创建,如下:
{
  "name": "my-project-name",
  "description":"test grunt ...",
  "version": "0.1.0"
}
2. 安装Grunt和Grunt插件(https://github.com/gruntjs)
向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过:
npm install <module> --save-dev。此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中。
3. grunt --help 命令将列出所有可用的任务

四、简单项目流程示例

清空编译工作区 -> copy源文件到编译工作区 -> 合并文件 -> 压缩文件 -> 加时间戳
clean -> copy -> concat -> min -> md5 
1. grunt-contrib-clean:Clear files and folders.
2. grunt-contrib-copy:Copy files and folders.
3. grunt-contrib-concat:Concatenate files.
4. grunt-contrib-cssmin:Compress CSS files.
   grunt-contrib-uglify:Minify files with UglifyJS.
   grunt-contrib-htmlmin:Minify HTML.
5. grunt-filerev:Static asset revisioning through file content hash
第一步:创建package.json
{
	"name":"test_grunt",
	"description":"test grunt ...",
	"version":"0.0.1"
}
第二步:安装对应插件(加上--save-dev,会在package.json中加上devDependencies依赖)
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
第三步:创建Gruntfile.js,添加要使用插件配置
'use strict';
module.exports = function(grunt) {
	// 构建的初始化配置
	grunt.initConfig({
		//配置具体任务
	});


	// 载入要使用的插件
	grunt.loadNpmTasks('grunt-contrib-clean');


	// 注册刚配置好的任务
	grunt.registerTask('default', ['clean']);
}

五、地址

nodejs官网地址:https://nodejs.org/
grunt中文官网地址:http://www.gruntjs.net/
grunt官网插件地址:https://github.com/gruntjs
六、源码
// package.json
{
  	"name": "test_grunt",
  	"description": "test grunt ...",
  	"version": "0.0.1",
  	"devDependencies": {
	    "grunt": "^0.4.5",
	    "grunt-contrib-clean": "^0.6.0",
	    "grunt-contrib-concat": "^0.5.1",
	    "grunt-contrib-copy": "^0.8.0",
	    "grunt-contrib-cssmin": "^0.12.3",
	    "grunt-contrib-uglify": "^0.9.1"
  	}
}
//Gruntfile.js
'use strict';
module.exports = function(grunt) {
  	// 构建的初始化配置
  	grunt.initConfig({
  		/* 配置具体任务 */
  		pkg: grunt.file.readJSON('package.json'),
  		dirs: {
			src: 'path',
			dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',
		},
  		// clean任务(删除dest/test_grunt/0.0.1 目录下非min的文件)
		clean: {
			js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],
			css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]
		},
		// copy任务(拷贝path目录下的文件到dest目录)
		copy: {
			main: {
			    files: [
			      // includes files within path
			      {expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'},
			    ]
			}
		},
		// concat任务(将dest目录下的a.js和b.js合并为built.js)
		concat: {
		    options: {
		      	separator: '\n',
		    },
		    concatCSS: {
		      	src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],
		      	dest: '<%= dirs.dest %>/built.css',
		    },
		    concatJS: {
		      	src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],
		      	dest: '<%= dirs.dest %>/built.js',
		    }
		},
		// cssmin任务(压缩css)
		cssmin: {
		  	target: {
			    files: [{
			      	expand: true,
			      	cwd: '<%= dirs.dest %>',
			      	src: ['*.css', '!*.min.css'],
			      	dest: '<%= dirs.dest %>',
			      	ext: '.min.css'
			    }]
		  	}
		},
		// uglify任务(压缩js)
		uglify: {
		    options: {
		      	mangle: {
		        	except: ['jQuery', 'Backbone']
		      	}
		    },
		    my_target: {
		      	files: {
		        	'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']
		      	}
		    }
		}
  	});

  	// 载入要使用的插件
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-uglify');

	// 注册刚配置好的任务
	grunt.registerTask('cls', ['clean']);
	grunt.registerTask('cpy', ['copy']);
	grunt.registerTask('con', ['concat']);
	grunt.registerTask('cmpCSS', ['cssmin']);
	grunt.registerTask('cmpJS', ['uglify']);

	grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);
}

PS:
1.  自己配置的任务名称,不能和插件名称一样,否则会造成无限循环

2.  插件名称,除最外层外,中间层名称可自定义


你可能感兴趣的:(grunt,Grunt基本使用,如何使用Grunt,前端自动化构建工具)