构建工具系列二--Grunt
本文地址: http://www.cnblogs.com/blackmanba/p/frontend-scaffold-grunt.html或者http://forkme.info/frontend-scaffold-grunt/, 转载请注明源地址。
概述
最近在做Toki项目时遇到一个苦逼问题, 就是每次调试的时候需要将Javascript和css同时压缩(因为发布的成品代码是经过压缩的)。寻寻觅觅, 终于让我找到一款前端构建神器--Grunt。Grunt是什么呢？ 正如官网定义的:
GRUNT
The JavaScript Task Runner
也就是说, Grunt实际上是一个Javascript任务运行框架, 本身并不包括具体任务的实现逻辑。要使用Grunt, 首先需要根据执行的具体任务选择插件, 并通过配置文件指定如何构建项目。以后只要执行配置文件, Grunt就会自动构建项目。所以我更愿意称Grunt为功能强大的前端脚手架。
插播一下, 这里介绍一个持续构建的工具Travis-cli, 感兴趣的可以点这里。
Hello World
好了, 介绍了那么多, 接下来就是如何使用了。每种工具(或语言)第一个讲的就是Hello World程序, 程序需要用到Grunt以及Grunt.log插件, 下面就来具体介绍:
Grunt安装
Grunt本身是基于node.js开发的应用, 那第一步当然就是安装node.js这个神器啦o(╯□╰)o!! 根据不同的平台选择各自的安装包安装(node.js的具体安装不在本文的讨论范围内)。
完成了第一步之后, 接下来就是安装Grunt了, Grunt需要先安装CLI(Grunt's command line interface)工具, 控制台下使用npm命令完成安装: npm install -g grunt-cli , 接下来安装Grunt模块: npm install grunt -g --save-dev。
如果你不跑任何任务的话, Grunt到这里就已经安装成功了, 你也可以出去找找妹纸逛逛街了(额, 暴露了我的性别, 女生表介意哈)。但是问题来了, Grunt是一个任务运行工具, 任务不存在又如何称得上Task Runner呢？
Gruntfile文件
好了, 废话说了那么多, 接下来就讲如何配置Gruntfile文件。首先新建目录GruntFirst(名字自定), 在GruntFirst新建Gruntfile.js文件, 这个是Grunt必须的配置文件, 在文件中写入:
/**
* Gruntfile.js 固定写法
* module.exports = function(grunt){
* ××××;
* }
*/
module.exports = function(grunt){
'use strict';
grunt.registerTask('default', function(){
grunt.log.writeln('Hello world');
});
};
然后在当前目录打开终端, 输入grunt defult, 如果看到以下输出, 恭喜您已经进入了Grunt的世界!!
问题解决
还记得本文开始的时候提到的问题吗？如果忘记了的话证明您木有认真阅读本文, 果断回去重新看一遍! 好了, 下面就是问题的解决方法, 采用Grunt自动构建并且监控文件变化:
module.exports = function(grunt) {
'use strict';
// project config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // load package.json file
cssmin: {
options: {
'keepSpecialComments': 0
},
combine: {
files: {
'build/css/style.css': [
'css/*.css'
]
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
files: ['Gruntfile.js', 'javascript/*.js', 'node_modules/*.js', '!javascript/jquery-2.1.0.min.js']
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: [{
cwd: 'javascript',
src: '**/*.js', // source files mask
dest: 'build/javascript', // destination folder
expand: true, // allow dynamic building
flatten: true // remove all unnecessary nesting
/*ext: '.min.js' // replace .js to .min.js*/
}]
}
},
htmlhint: {
options: {
htmlhintrc: '.htmlhintrc'
},
src: ['*.html']
},
watch: {
css: {
files: ['css/**/*.css'],
tasks: ['cssmin']
},
js: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
},
uglify: {
files: ['javascript/**/*.js'],
tasks: ['uglify']
},
htmlhint: {
files: ['*.html'],
tasks: ['htmlhint']
}
}
});
// load Grunt plug-in
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-htmlhint');
// register default task
grunt.registerTask('default', ['watch']);
};
Note: grunt-contrib-cssmin, grunt-contrib-watch, grunt-contrib-jshint, grunt-contrib-uglify, grunt-htmlhint插件的功能分别是: css压缩, 文件监控(ps: 文件变化时自动执行), javascript检验, javascript压缩, html检查。Grunt的第三方插件很多, 而且还在不停增加。其他插件以及具体用法就要您根据需求的需要自己去配置了。
对上面的配置有什么不懂的, 可以查看各个插件的具体配置信息和官方文档
总结
Grunt是新兴的项目任务运行工具, 可以帮助我们更快更好的构建和测试项目。
