共计 3364 个字符,预计需要花费 9 分钟才能阅读完成。
grunt 是前端开发的自动化构建工具,对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting 等,自动化工具可以减轻你的劳动,简化你的工作。
下面志文工作室以一个项目的构建为例,简介入门 grunt 进行前端开发的过程,主要涉及到 javascript 代码合并与压缩,css 代码合并与压缩,以及图片压缩。
1. 安装
grunt 依赖 nodejs,首先安装下载 nodejs:
安装 nodejs 后,打开命令行,安装 grunt-cli,执行命令:
npm install -g grunt-cli
2. 配置 grunt 项目文件
在项目中配置 grunt 所需文件,grunt 即可知道如何自动化工作。
这里主要工作是在项目的根目录创建 package.json 与 Gruntfile.js 两个文件。
2.1 创建 package.json 文件
执行命令:
npm init
按提示逐步操作即可。
该文件主要配置项目基本信息及工具插件依赖,以让 nodejs 知道下载哪些插件。具体可参考如下配置:
{ | |
"name": "lxxh", | |
"version": "0.0.2", | |
"description": "不花流量看离线笑话", | |
"author": "志文工作室", | |
"license": "BSD", | |
"engines": { | |
"node": ">= 0.8.0" | |
}, | |
"scripts": { | |
"test": "grunt qunit" | |
}, | |
"devDependencies": { | |
"grunt": "~0.4.1", | |
"grunt-contrib-uglify": "~0.2.2", | |
"grunt-css": ">0.0.0", | |
"grunt-contrib-imagemin": ">0.8.0", | |
"grunt-contrib-jshint": "~0.6.2", | |
"grunt-contrib-concat": "~0.3.0" | |
} | |
} |
或参考如下文件:
{ | |
"name": "jquery-plugin", | |
"version": "0.0.0-ignored", | |
"engines": { | |
"node": ">= 0.8.0" | |
}, | |
"scripts": { | |
"test": "grunt qunit" | |
}, | |
"devDependencies": { | |
"grunt-contrib-clean": "~0.4.0rc6", | |
"grunt-contrib-jshint": "0.1.1rc6", | |
"grunt-contrib-qunit": "0.1.1rc6", | |
"grunt-contrib-concat": "0.1.2rc6", | |
"grunt-contrib-uglify": "0.1.1rc6", | |
"grunt-contrib-watch": "0.2.0rc5", | |
"grunt": "0.4.0rc7" | |
} | |
} |
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/package.json
2.2 创建 Gruntfile.js 文件
该文件主要为 grunt 所使用。
配置参考如下:
module.exports = function(grunt) { | |
grunt.initConfig({ | |
//如果需要用到 package.json 中的参数变量,可使用 pkg 引用(如 pkg.name) | |
pkg : grunt.file.readJSON('package.json'), | |
//JSHint 代码质量检查任务 | |
jshint: { | |
all: ['www/js/index.js'] //files to lint | |
}, | |
//concat 多文件合并任务 | |
concat: { | |
js: { | |
options: { | |
separator: ';' //多文件分隔符 | |
}, | |
src: ['www/js/*.js'], //合并哪些文件 | |
dest: 'www/index.min.js' //合并后输出 | |
}, | |
css : { | |
src: ['www/css/*.css'], | |
dest: 'www/index.min.css' | |
} | |
}, | |
//uglify 压缩任务,压缩 js | |
uglify: { | |
js: { | |
files: { | |
'www/js/index.min.js': ['www/js/index.min.js'] //替换保存 | |
} | |
} | |
}, | |
//cssmin 压缩任务,压缩 css | |
cssmin: { | |
css: { | |
src: 'www/index.min.css', | |
dest: 'www/index.min.css' | |
} | |
}, | |
//图片压缩 | |
imagemin: { | |
dist: { | |
options: { | |
optimizationLevel: 3 //定义 PNG 图片优化水平 | |
}, | |
files: [{ | |
expand: true, | |
cwd: 'img/', | |
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片 | |
dest: 'img/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示 | |
}] | |
} | |
} | |
}); | |
//加载包含 jshint、concat 和 uglify 任务的插件 | |
grunt.loadNpmTasks('grunt-contrib-jshint'); | |
grunt.loadNpmTasks('grunt-contrib-concat'); | |
grunt.loadNpmTasks('grunt-contrib-uglify'); | |
grunt.loadNpmTasks('grunt-css'); | |
grunt.loadNpmTasks('grunt-contrib-imagemin'); | |
//默认被执行的任务列表 | |
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', "cssmin"]); | |
//自定义任务列表 | |
grunt.registerTask('development', ['jshint']); | |
grunt.registerTask('production', ['concat', 'uglify', 'imagemin', "cssmin"]); | |
grunt.registerTask('img', ['imagemin']); | |
}; |
也可参考如下两个文件。该 Gruntfile.js 文件中的一些配置参数是从 tiny-pubsub.jquery.json 中读取的。
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/Gruntfile.js
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/tiny-pubsub.jquery.json
3. 安装项目依赖的库
进入项目根目录(Gruntfile.js 所在目录),执行命令:
npm install
执行后会在项目根目录下创建 node_modules ,并下载依赖库到该目录。
或者参考 package.json 文件中的依赖配置,逐个安装,参考命令:
npm install grunt –save-dev
npm install grunt-contrib-jshint –save-dev
npm install grunt-contrib-concat –save-dev
npm install grunt-contrib-uglify –save-dev
npm install grunt-css –save-dev
npm install grunt-contrib-imagemin –save-dev
4. 执行 grunt
接下来只需要执行 grunt 命令,即会根据 Gruntfile.js 文件配置自动化构建了。
既然是自动化构建,在执行该命令前,项目自然应当已经在开发中了。
当然,也可指定执行 Gruntfile.js 文件配置的某个任务。如:
grunt 或 grunt default
grunt concat
grunt jshint
grunt uglify
grunt development
grunt production
借助大量的插件,你可以使用 grunt 非常方便的简化许多工作。进一步学习请移步官网文档。
5. 相关参考
http://gruntjs.com/
http://www.gruntjs.net/docs/getting-started/