Gruntjs随笔
Q：Grunt为何物？
A：一个专为JavaScript提供的构建工具。
Q：啥是构建工具？
A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。
Q：grunt是如何工作的？
A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：
-
clean:删除临时文件
-
uglify:压缩
-
qunit:测试
-
concat:合并
1、建立 package.json 文件（内容如下），然后运行 npm install 安装其相关依赖的包。
{
"name": "the-project-of-name",
"version": "0.0.1",
"author": "Jankerli <[email protected]>",
"description": "the-project-of-description",
"dependencies": {
"grunt": "*",
"grunt-contrib-less": "*",
"grunt-contrib-watch": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-copy": "*"
}
}
2、建立 Gruntfile.js 文件（如下内容请根据具体项目稍作修改），然后运行 grunt，就会在其根目录下看到 dest 文件夹了，去看看你需要的文件是否都在里面了？
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 编译 LESS 文件
less: {
compile: {
files: {
'assets/css/app.css': 'assets/css/app.less'
}
}
},
// 压缩 CSS 文件
cssmin: {
options: {
report: 'gzip'
},
combine: {
files: {
'assets/css/app.min.css': 'assets/css/app.css'
}
}
},
// 压缩合并 JS 文件
uglify: {
options: {
report: 'gzip',
mangle: true, // Specify mangle: false to prevent changes to your variable and function names.
banner: '/** \n' +
' * -------------------------------------------------------------\n' +
' * Copyright (c) 2013 Jankerli, All rights reserved. \n' +
' * http://www.jankerli.com/ \n' +
' * \n' +
' * @version: <%= pkg.version%> \n' +
' * @author: <%= pkg.author%> \n' +
' * @description: <%= pkg.description%> \n' +
' * ------------------------------------------------------------- \n' +
' */ \n\n'
},
myTarget: {
files: {
'assets/js/lib/libs.min.js': ['assets/js/lib/jquery-1.9.1.min.js',
'assets/js/lib/underscore-min.js',
'assets/js/lib/backbone-min.js'],
'assets/js/app.min.js': ['assets/js/app.js',
'assets/js/tpls.js',
'assets/js/view.js',
'assets/js/router.js']
}
}
},
// 复制文件，打包到 dest 文件夹目录下
copy: {
main: {
files: [
{src: 'index.html', dest: 'dest/index.html'},
{src: ['assets/images/**'], dest: 'dest/'},
{src: ['assets/css/app.min.css'], dest: 'dest/'},
{src: ['assets/js/lib/libs.min.js'], dest: 'dest/'},
{src: ['assets/js/app.min.js'], dest: 'dest/'}
]
}
},
// 监控 LESS 文件
watch: {
scripts: {
files: ['assets/css/*.less'],
tasks: ['less', 'cssmin']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['less', 'cssmin', 'uglify', 'copy']);
};