<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先说一下什么是构建工具,其实很简单,就是在开发的时候,我们为了使代码可维护,常常会把项目分为几个模块,但是在上线的时候,我们要是线上网页对数据文件的请求次数尽可能少,这里的数据包括js,css文件,图片等,所以我们需要把多个css文件和多个js文件,分别合并为一个,然后为了减少体积,提高页面的效率,我们需要把不必要的空格神马的都去掉,代码能简则简。这其实就是合并代码并压缩的过程,构建工具简单地说,就是做这些事情。</span>
接下来言归正传,开始了解Grunt。
按照我以往的学习习惯,我一般会是这个顺序学习一个东西:
了解它是什么
了解怎么运行
了解怎么用
试验
有了一个大致了解后,再深入。
所以这篇文章就是对Grunt有一个大致的了解,不过Grunt也是很简单的,真的不需要太多功夫就可以学会,难点在于对每个插件的使用
Grunt中文官网:gruntjs.net
Grunt英文官网:gruntjs.com
NPM的全称是Node.js Package Manager,很显然就是Node.js的包管理工具。Grunt也是基于node的,所以grunt也是要使用npm来安装的。所以首先我们要安卓node.js,版本一定在0.8.0以上。
接下来我们来到你的项目的根目录下,我们使用grunt要依赖两个文件,这个两个文件分别是package.json和Gruntfile.js。
其中package.json,通俗的说,但是不一定很准确,就是用来管理和记录grunt的插件的,每当你安装一个插件,都会在package.json里面记上一笔。如果你没使用命令行去修改package.json,也要手动修改这个文件的。下面就是一个package.json的例子。
{
"name": "access",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-connect": "^0.10.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^2.3.1",
"grunt-usemin": "^3.0.0"
}
}
Gruntfile.js这个文件主要是用来做 设置配置,加载插件,注册任务这3个事儿。下面是一个Gruntfile.js的例子
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
build: {
files: [
{
expand: true,
dest: 'release',
cwd: 'develop',
src: ['index.html', 'scripts/lib/jquery.js', 'data/data.js', 'data/images/*', 'data/images/css/*']
}
]
}
},
concat: {
generatedjs: {
files: [
{
dest: '.tmp/concat/scripts/app.js',
src: [
'develop/scripts/lib.js',
'develop/scripts/search.js',
'develop/scripts/websites.js',
'develop/scripts/drag.js',
'develop/scripts/page-num.js',
'develop/scripts/popup-window.js'
]
}
]
},
generatedcss: {
files: [
{
dest: '.tmp/concat/styles/app.css',
src: [
'develop/styles/base.css',
'develop/styles/search.css',
'develop/styles/websites.css',
'develop/styles/page-num.css',
'develop/styles/popup-window.css'
]
}
]
}
},
uglify: {
generated: {
files: [
{
dest: 'release/scripts/app.js',
src: ['.tmp/concat/scripts/app.js']
}
]
}
},
cssmin: {
generated: {
files: [{
expand: true,
cwd: '.tmp/concat/styles',
src: ['app.css'],
dest: 'release/styles',
ext: '.css'
}]
}
},
useminPrepare: {
html: 'release/index.html'
},
usemin: {
html: 'release/index.html',
js: [
'release/scripts/{,*/}*.js'
],
css: [
'release/styles/{,*/}*.css'
]
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-filerev');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('build',[
'copy:build',
'useminPrepare',
'concat:generatedjs',
'concat:generatedcss',
'cssmin:generated',
'uglify:generated',
'usemin'
]);
}
当所有需要用的插件都安装好了,然后这两个文件都配置好了,我们在它们俩所在的目录运行grunt build,就可以将相应的代码合并并且压缩,我们也可以使用插件jshint来检查合并后的js文件里面是否存在简单的语法错误。
了解了它是什么,怎么运行,怎么用之后,我们开始具体的实验吧。
第一步,我们要把grunt这个命令做一个全句化,在命令行输入一下命令:
npm install -g grunt-cli
这条命令的是作用是:将grunt放在你的系统路径下,也就是system path,使得你再任何一个目录下都可以使用grunt命令。但是,一定要注意,这只是把grunt命令加入全局中,而不是安装了grunt,我们接下来还是要安装grunt的。
第二步,配置package.json文件。进入项目的根目录,输入命令:
npm init
其中项目的名字就是你文件的名字,也就是根目录的名字,其他的不懂什么意思的都可以直接按回车跳过。配置结束后,你看dir或者ll一下,项目的文件里会多了一个package.json文件。
第三步,安装grunt以及其插件。命令如下:
//安装grunt
npm install grunt --save-dev
//安装grunt插件 grunt-contrib-cssmin
npm install grunt-contrib-cssmin --save-dev
这里 --save-dev的作用就是把安装的插件写在package.json里面的devDependencies里面。
第四部,当你要使用的插件都安装好了,我们开始配置Gruntfile.js这个文件。
Gruntfile.js这个文件通常包括一个wrap函数,函数里面包括三个部分。最外层的wrap的写法就是固定的,没有为什么,这么写就是了
module.exports = function (grunt) {
}
这个函数里面包括三个部分。
第一部分是grunt的任务配置,它的是通过向grunt.initConfig()这个函数传递配置参数来时实现的。所传递的配置参数是一个对象,这个对象的属性为插件的名称,属性值为插件相应的配置信息,一个插件可以配置很多不同的任务,比如下面的这段代码,就是插件grunt-contrib-cancat的配置,它配置两个任务,分别用来合并js和css。
concat: {
generatedjs: {
files: [
{
dest: '.tmp/concat/scripts/app.js',
src: [
'develop/scripts/lib.js',
'develop/scripts/search.js',
'develop/scripts/websites.js',
'develop/scripts/drag.js',
'develop/scripts/page-num.js',
'develop/scripts/popup-window.js'
]
}
]
},
generatedcss: {
files: [
{
dest: '.tmp/concat/styles/app.css',
src: [
'develop/styles/base.css',
'develop/styles/search.css',
'develop/styles/websites.css',
'develop/styles/page-num.css',
'develop/styles/popup-window.css'
]
}
]
}
}
下面就是grunt.initConfig()的一个完整的配置,其中pkg的那一行是用来提取package.json文件的,pkg也就是一个对象了。
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
build: {
files: [
{
expand: true,
dest: 'release',
cwd: 'develop',
src: ['index.html', 'scripts/lib/jquery.js', 'data/data.js', 'data/images/*', 'data/images/css/*']
}
]
}
},
concat: {
generatedjs: {
files: [
{
dest: '.tmp/concat/scripts/app.js',
src: [
'develop/scripts/lib.js',
'develop/scripts/search.js',
'develop/scripts/websites.js',
'develop/scripts/drag.js',
'develop/scripts/page-num.js',
'develop/scripts/popup-window.js'
]
}
]
},
generatedcss: {
files: [
{
dest: '.tmp/concat/styles/app.css',
src: [
'develop/styles/base.css',
'develop/styles/search.css',
'develop/styles/websites.css',
'develop/styles/page-num.css',
'develop/styles/popup-window.css'
]
}
]
}
},
uglify: {
generated: {
files: [
{
dest: 'release/scripts/app.js',
src: ['.tmp/concat/scripts/app.js']
}
]
}
},
cssmin: {
generated: {
files: [{
expand: true,
cwd: '.tmp/concat/styles',
src: ['app.css'],
dest: 'release/styles',
ext: '.css'
}]
}
},
useminPrepare: {
html: 'release/index.html'
},
usemin: {
html: 'release/index.html',
js: [
'release/scripts/{,*/}*.js'
],
css: [
'release/styles/{,*/}*.css'
]
}
});
配置信息的部分先说到这,至于怎么去配置每一个插件,这要去查每个插件的文档,通常每一个插件的配置都是一个对象值,这个值的第一层对象值是自定义的,比如cssmin里面的generated,它是一个任务的名字,当下面注册任务时,我们可以选择每个插件执行时要用的哪个配置,参见下面的介绍吧。
第二部分,加载插件,其实就是通过一个函数来实现的。
grunt.loadNpmTasks('grunt-contrib-cssmin');
将要加载的插件名传进去。
第三部分,注册任务。这也是一个函数,grunt.registerTask();
grunt.registerTask('build', [
'copy:build',
'useminPrepare',
'concat:generatedjs',
'concat:generatedcss',
'cssmin:generated',
'uglify:generated',
'usemin'
]);
第一个参数是使用grunt命令时候,后面跟的参数,如果这个名字是default的话,我们就可以直接运行grunt就可以了。第二个参数是任务,针对上面的这个端代码来说,就是当你在命令行输入grunt build的时候,就会按顺序执行第二个参数中列出的任务,是按顺序的哦!
grunt的简单的用法就是这些,待我再学习学习,整理一下一些常用插件的用法。