如何在Ubuntu 16.04上安装Grunt
Grunt是一个JavaScript任务运行程序，它执行我们通常使用代码执行的操作。
最好的例子之一是，当我们要发布一个时，为了使更快，我们尝试使用CSS Minifier，它将最小化所有CSS文件并使它变小或者变短。
通常，我们需要将所有CSS文件代码复制到Minifier，并将这些修改后的代码添加到域文件中。
但是使用Grunt，我们可以使用其插件来实现。
当我们运行Grunt时，它将运行我们已设置的所有插件，并且它将自动执行我们想对这些插件执行的任何操作。
CSS Minifier是Grunt拥有的最酷的插件之一。
我们可以使用Grunt插件自动缩小CSS文件甚至JavaScript文件，编译Sass，运行JSHint等。
在本教程中，我将说明如何在我们的Ubuntu 16.04服务器上设置Grunt。
Grunt和Grunt插件是通过Node.js软件包管理器npm安装和管理的。
首先，首先我们需要安装NPM/NodeJS。
安装NPM/NodeJS
首先，我们需要添加并启用Ubuntu存储库以支持NPM/NodeJS安装，然后使用以下命令进行安装。
$apt-get install python-software-properties $curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash ## Populating apt-get cache... + apt-get update Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB] Hit:2 http://nyc2.mirrors.digitalocean.com/ubuntu xenial InRelease Get:3 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB] Get:4 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB] Fetched 306 kB in 1s (274 kB/s) Reading package lists... Done ## Confirming "xenial" is supported... + curl -sLf -o /dev/null 'https://deb.nodesource.com/node_6.x/dists/xenial/Release' ## Adding the NodeSource signing key to your keyring... + curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add OK ## Creating apt sources list file for the NodeSource Node.js v6.x repo... + echo 'deb https://deb.nodesource.com/node_6.x xenial main' > /etc/apt/sources.list.d/nodesource.list + echo 'deb-src https://deb.nodesource.com/node_6.x xenial main' >> /etc/apt/sources.list.d/nodesource.list ## Running `apt-get update` for you... + apt-get update Hit:1 http://mirrors.digitalocean.com/ubuntu xenial InRelease Get:2 http://mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB] Get:3 http://mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB] Get:4 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB] Get:5 https://deb.nodesource.com/node_6.x xenial InRelease [3,914 B] Get:6 https://deb.nodesource.com/node_6.x xenial/main Sources [764 B] Get:7 https://deb.nodesource.com/node_6.x xenial/main amd64 Packages [962 B] Fetched 312 kB in 0s (635 kB/s) Reading package lists... Done ## Run `apt-get install nodejs` (as root) to install Node.js v6.x and npm
通过运行上面的命令，我们可以看到所有过程都在进行。
它添加了一个新的仓库并更新了软件包。
现在，我们只需要运行安装命令即可按照说明完成它。
$apt-get install nodejs
让我们确认已完成安装。
$node --version v6.9.4 $npm --version 3.10.10
安装Grunt和Grunt-CLI
在安装Grunt之前，我们需要确保我们的npm软件包是最新的。
我们可以通过运行以下命令来确保：
$npm update -g npm
更新我们的npm软件包后，我们可以运行以下命令来安装Grunt和Grunt-CLI
$npm install -g grunt $npm install -g grunt-cli
我们可以通过运行以下命令来确认安装：
$grunt --version grunt-cli v1.2.0
Grunt-CLI不会安装Grunt任务运行程序。
Grunt CLI的实际作用是运行在Gruntfile旁边安装的Grunt版本。
这样，就可以将不同版本的Grunt的多个版本同时安装在同一台计算机上，以用于不同的项目。
CLI的工作方式
每次grunt运行时，它都会使用节点的require（）系统查找本地安装的Grunt。
这使得grunt可以更轻松地从项目中的任何子文件夹运行。
我们可以阅读其代码以更好地理解。
如果找到本地安装的Grunt，则CLI会加载Grunt库的本地安装，从Gruntfile中应用配置，并执行我们要运行的所有任务。
Simple Grunt项目的组成部分
决定项目设置的两个重要文件是package.json和Gruntfile.js。
package.json：npm使用此文件存储发布为npm模块的项目的元数据。
我们可以在此文件中为项目列出Grunt和Grunt插件/模块及其开发依赖关系。
Gruntfile：此文件名为Gruntfile.js，用于配置或者定义任务以及加载Grunt插件。
我创建了一个名为“~/MyGrunt_project”的文件夹，其中将设置我的grunt项目。
首先，我需要在项目目录中创建package.json文件。
为了创建我的package.json文件，我只是从根目录运行命令npm init。
npm init命令将创建一个基本的package.json文件。
:~/MyGrunt_project# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (MyGrunt_project) myproject
version: (1.0.0)
description: Testing
entry point: (index.js)
test command:
git repository:
keywords: test
author: theitroadadmin
license: (ISC)
About to write to /root/MyGrunt_project/package.json:
{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "theitroadadmin",
"license": "ISC"
}
Is this ok? (yes) yes
接下来，我们需要将Grunt及其模块安装到我们的项目目录中。
我们可以通过在下面运行以下命令来做到这一点：
$npm install grunt --save-dev
这个“ --save-dev”的作用是，它将grunt模块和我们的依赖项保存在package.json文件中。
它修改了我们的package.json文件，如下所示：
~/MyGrunt_project# cat package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "theitroadadmin",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1"
}
}
现在我们已经在项目中安装了grunt。
我们将拥有一个名为node_modules的文件夹，其中包含所有必需的Grunt模块。
$~/MyGrunt_project# ll total 16 drwxr-xr-x 3 root root 4096 Jan 29 07:26 ./ drwx------ 6 root root 4096 Jan 29 07:03 ../ drwxr-xr-x 91 root root 4096 Jan 29 07:26 node_modules/ -rw-r--r-- 1 root root 307 Jan 29 07:26 package.json
创建Gruntfile
接下来，我们需要创建Gruntfile。
Gruntfile是我们注册和加载所有模块和插件的地方。
这是有效JavaScript文件。
其中我们只需在项目内部的命令行中键入命令grunt即可运行所有已加载的插件。
Gruntfile由以下部分组成：
The "wrapper" function Project and task configuration Section for loading Grunt plugins and tasks Custom tasks
我创建了简单的gruntfile。
请在下面查看：
$~# cat MyGrunt_project/gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
};
安装和使用插件
插件可通过立即有效地执行所需任务来使我们的生活更轻松。
我们可以在此处获得所有可用和有用的Grunt插件。
我们可以从列表中选择所需的插件，然后按照那里的说明进行安装。
将Grunt和grunt插件添加到现有package.json的最简单方法是使用命令npm install <module> --save-dev。
我今天将为我们安装/使用contrib-uglify插件，这有助于使用grunt自动缩小javascript文件。
我们只需在项目目录中运行以下命令即可安装插件：
$/MyGrunt_project# npm install grunt-contrib-uglify --save-dev [email protected] /root/MyGrunt_project └─┬ [email protected] ├── [email protected] ├─┬ [email protected] │ ├── [email protected] │ ├─┬ [email protected] │ │ ├─┬ [email protected] │ │ │ └── [email protected] │ │ └─┬ [email protected] │ │ ├─┬ [email protected] │ │ │ ├── [email protected] │ │ │ ├── [email protected] │ │ │ ├── [email protected] │ │ │ ├── [email protected] │ │ │ ├── [email protected] │ │ │ └── [email protected] │ │ └── [email protected] │ └── [email protected] ├─┬ [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ └─┬ [email protected] │ ├── [email protected] │ ├─┬ [email protected] │ │ ├─┬ [email protected] │ │ │ ├─┬ [email protected] │ │ │ │ ├─┬ [email protected] │ │ │ │ │ └── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ └── [email protected] │ │ │ └── [email protected] │ │ ├── [email protected] │ │ └── [email protected] │ └── [email protected] └── [email protected] npm WARN [email protected] No repository field.
这将安装插件并将其添加到package.json文件中。
如我们所见，我们的模块已添加到package.json文件中。
插件安装完成后，可以使用以下JavaScript代码在Gruntfile中启用该插件：
grunt.loadNpmTasks（'grunt-contrib-uglify'）;
检查一下此模块随附的我的gruntfile.js。
带注释的部分描述了我们的Gruntfile的四个组成部分，如上所述。
1）包装功能
2）项目或者任务配置
3）加载Grunt模块或者插件
4）自定义任务，定义要运行的任务数。
现在，我已将源javafile下载到我的项目目录中，我们需要对其进行精简。
$ wget http://code.jquery.com/jquery-2.1.1.js
最后，让我们在项目目录下的命令行中运行grunt，以启动根据需要缩小Javascript文件的任务。
$/MyGrunt_project# grunt Running "uglify:build" (uglify) task >> 1 file created.Done.
我们可能会注意到，我们的任务已成功运行并按照gruntfile中的说明创建了一个缩小的文件。
$MyGrunt_project# ls -l jquery* -rw-r--r-- 1 root root 247351 Oct 24 2014 jquery-2.1.1.js -rw-r--r-- 1 root root 84034 Jan 29 09:06 jquery-2.1.1.min.js
到其中我们可以立即创建自动创建的小型javascript文件jquery-2.1.1.min.js :)。
