如何在VPS上使用Grunt和Node.js设置任务自动化

介绍

因此，您想开发自己的网站，该网站现代、易于使用、对用户有吸引力，并且在所有浏览器和平台上都能正常运行？好吧，这通常需要根据您网站的复杂性进行大量工作。但是有一个很棒的工具可以极大地帮助您开发应用程序和工作流程：一个名为 Grunt 的基于任务的构建工具。

使用 Grunt，您几乎可以做任何事情。您可以将其配置为执行特定任务，例如连接和缩小，同时观察源代码中的更改。

使困惑？让我向您解释上述任务如何影响您的网站性能以及为什么要使用它们。

连接

通过将多个 JavaScript（或 CSS）文件合并到一个文件中或根据您的需要对它们进行分组，连接源文件可以减少浏览器必须发出的请求数量。这是有效的，因为无论您的文件多么小，您的浏览器发出的每个请求都至少需要几毫秒。这听起来可能不是很多，但大多数网站都是由几个脚本、样式表、图像和其他资产组成的——这会对您的网站性能产生重大影响。如果我们想象浏览器需要 50 毫秒来处理一个请求，那么 20 个源文件会使页面加载时间减慢一秒。相信我，没有人喜欢缓慢的网站。

缩小

不要认为连接会给你最有效的结果。开发人员倾向于通过注释、组织和结构化源代码来浪费大量空间，以使其更易于他人或自己阅读和调试。这本身并不是一件坏事，事实上，我们鼓励开发人员这样做，但是你的浏览器并不关心你的代码结构有多漂亮，不管它看起来如何，它都会执行它。缩小是从源文件中删除所有不需要的字符而不破坏或更改其功能的过程。注释、空格和换行符占用了不必要的空间，并且不需要执行。经常会进行各种其他小的优化，例如缩短 JavaScript 文件中的变量名和压缩某些语句。这通常会大大减少需要传输到浏览器的数据量，从而进一步减少页面加载时间。

使用 Grunt 自动运行任务

Grunt 很简单，它使几乎所有事情都自动化。每次对源代码进行微小更改时，您肯定不想手动运行连接和缩小过程。这就是 Grunt 的用武之地，它不仅让您的工作更快、更轻松，而且更令人愉快。设置只需一次，之后零努力。

Grunt 的另一个好处是它的生态系统，这导致了它的增长和许多新的有用插件的开发。那么为什么不使用您经常使用的自定义任务创建自己的 Grunt 插件呢？一些最常见的任务已经变成了 Grunt 插件，因此查看插件列表，选择您需要的并配置它就足以设置您的任务自动化。

要求

本教程假设您已经熟悉 node.js、npm、基本的 Linux 管理任务，例如使用 SSH 连接到您的 VPS，但最重要的是，您已经有一个使用 Express 等 Web 应用程序框架的基本网站项目。

如果您对 node.js 不熟悉或尚未安装，请参阅节点.js 上面文章和教程页面上的部分，以查找适用于您的操作系统的安装说明。

我们的帮助和社区页面上也有很多很棒的文章 Linux基础 .

安装和配置

让我们开始通过发出以下命令来全局安装 Grunt 的命令行界面 (CLI)：

npm install -g grunt-cli

您可能必须使用 sudo npm install -g grunt-cli（如果您使用的是 Linux、OSX、BSD 等）或在基于 Windows 的系统上以管理员身份运行您的命令。

现在我们必须使用 cd /path/to/your/project/ 命令切换到您的 web 项目的目录。

使用以下命令在您的项目目录中安装 Grunt 和我们所需的 Grunt 插件依赖项：

npm install grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev

在项目的根级别创建一个名为 Gruntfile.js 的新 Grunt 配置文件，并添加以下示例配置：

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 即可执行我们的 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 现在将监视您的源代码中的任何更改，并在您修改它时连接/缩小您的源代码。

有关 Grunt 的更多信息，请访问他们的官方网站和文档 http://gruntjs.com。