介绍
所以你想开发自己的网站是现代的，易于使用，吸引用户，并在所有浏览器和平台上工作良好？ 嗯，这通常需要大量的工作，基于你的网站的复杂性。 但有一个惊人的工具，可以帮助您与您的应用程序的开发和工作流程：一个名为Grunt的基于任务的构建工具。
有了Grunt，你几乎可以做任何事情。 您可以将其配置为执行特定任务，如连接和缩小，同时观察源代码中的更改。
困惑？ 让我向您解释上述任务如何影响您的网站效果，以及为什么您应该使用它们。
连接
连接源文件减少了浏览器通过将多个JavaScript（或CSS）文件合并到一个文件中或根据需要将它们分组而需要进行的请求数。 这是有效的，因为无论你的文件是多么小，您的浏览器做出的每一个请求，至少需要几毫秒。 这听起来可能不是很多，但大多数网站是由几个脚本，样式表，图像和其他资产组成，这对您的网站的性能有重大影响。 如果我们想象一个浏览器对于一个请求需要50毫秒，那么20个源文件会使页面加载时间减慢一整秒。 相信我，没有人喜欢一个缓慢的网站。
缩小
不要认为连接给你最有效的结果。 开发人员倾向于通过评论，组织和构造源代码来浪费大量空间，以便更容易地为其他人或他们自己读取和调试。 这不是一件坏事，事实上，开发人员鼓励这样做，但你的浏览器不在乎你的代码是如何精美的结构，它会执行它，无论它看起来像什么。 缩小是从源文件中删除所有不需要的字符而不中断或更改其功能的过程。 注释，空格和换行符占用不必要的空间，并且不需要它们执行。 经常发生各种其他小的优化，例如缩短JavaScript文件中的变量名和压缩某些语句。 这通常大大减少了需要传输到浏览器的数据量，导致页面加载时间的进一步减少。
使用Grunt自动运行任务
Grunt很简单，它几乎使一切自动化。 你肯定不想每次在你的源代码中做一个微小的改变时手动地手动运行你的连接和缩小过程。 这是Grunt的地方，它不仅使你的工作更快更容易，但也更愉快。 之后，它需要一次设置和零努力。
Grunt的另一个好处是它的生态系统，它导致它的增长和许多新的有用的插件的开发。 那么为什么不使用你经常使用的自定义任务创建自己的Grunt插件？ 一些最常见的任务已经变成Grunt插件，因此查看插件列表，选择所需的插件，并配置它将足以设置您的任务自动化。
要求
本教程假设您已经熟悉node.js，npm，基本的Linux管理任务，例如使用SSH连接到VPS，但最重要的是，您已经有一个使用Web应用程序框架（如Express）的基本网站项目。
如果你不熟悉的node.js，或者如果你没有安装它，请参阅node.js的对本刊及以上教程网页部分找到您的操作系统的安装说明。
我们也有我们的帮助和社区页面对多伟大的文章Linux基础 。
安装和配置
让我们通过发出以下命令全局安装Grunt的命令行界面（CLI）开始：
npm install -g grunt-cli
您可能需要使用sudo npm install -g grunt-cli （如果你是在Linux，OSX，BSD等）或基于Windows的系统管理员身份运行命令。
现在，我们必须使用变更到你的web项目的目录cd /path/to/your/project/命令。
使用此命令在项目目录中安装Grunt和我们所需的Grunt-plugin依赖项：
npm install grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev
创建一个新的名为咕噜配置文件Gruntfile.js在项目的根目录下，并添加下面的示例配置：
module.exports = function(grunt) {
grunt.initConfig({
jsDir: 'public/javascripts/',
jsDistDir: 'dist/javascripts/',
cssDir: 'public/stylesheets/',
cssDistDir: 'dist/stylesheets/',
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
options: {
separator: ';'
},
src: ['*.js'],
dest: '.js'
},
css: {
src: ['*.css'],
dest: '.css'
}
},
uglify: {
options: {
banner: '/*! */\n'
},
dist: {
files: {
'.min.js': ['']
}
}
},
cssmin: {
add_banner: {
options: {
banner: '/*! */\n'
},
files: {
'.min.css': ['']
}
}
},
watch: {
files: ['*.js', '*.css'],
tasks: ['concat', 'uglify', 'cssmin']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'concat',
'uglify',
'cssmin',
'watch'
]);
};
根据您的具体需要编辑四个变量“jsDir”，“jsDistDir”，“cssDir”和“cssDistDir”。 这些变量定义了您的Javascript / CSS文件和准备分发（“dist”）目录的源目录。 “dist”目录将包含您连接和缩小的源代码。
通过简单地发出执行我们的任务咕噜grunt在你的终端，它应该显示类似以下的输出：
Running "concat:js" (concat) task File "dist/js/application-name.js" created. Running "concat:css" (concat) task File "dist/css/application-name.css" created. Running "uglify:dist" (uglify) task File "dist/js/application-name.min.js" created. Running "cssmin:add_banner" (cssmin) task File dist/css/application-name.min.css created. Running "watch" task Waiting...
Grunt现在将观察源代码中的任何更改，并在您修改源代码时连接/缩减源代码。
有关更多咕噜的信息，请访问其官方网站和文档http://gruntjs.com 。
