在进行前端开发过程中，我们经常需要执行一些命令行操作，如压缩代码、打包资源、上传文件等。这时候，我们可以使用 grunt-sh 这个 npm 包，它可以让我们在 Grunt 构建过程中调用 shell 命令，以便更加高效地管理和部署前端项目。
安装 grunt-sh
在使用 grunt-sh 之前，我们需要将其安装到我们的项目中。安装命令如下：
npm install grunt-sh --save-dev
这条命令会将 grunt-sh 安装到项目的开发依赖中，使得我们可以在 Gruntfile.js 文件中使用它。
使用 grunt-sh
在 Gruntfile.js 文件中，我们需要先加载 grunt-sh 模块。我们可以使用 grunt.loadNpmTasks 方法来实现这个目的。代码如下：
module.exports = function(grunt) {
// 加载 grunt-sh 模块
grunt.loadNpmTasks('grunt-sh');
// 在此处定义 Grunt 任务
grunt.registerTask('default', ['sh']);
};在上述代码中，我们使用 grunt-sh 模块的语句：
grunt.loadNpmTasks('grunt-sh');将 grunt-sh 模块加载到 Grunt 项目中。
接下来，我们需要配置 grunt-sh 模块。我们可以通过在 Gruntfile.js 文件中添加如下代码来完成配置：
grunt.initConfig({
sh: {
command: 'echo "Hello, world!"'
}
});上述代码中，我们使用 grunt.initConfig 方法来定义配置项。我们将 grunt-sh 放在一个名为 sh 的 JSON 对象之中，然后我们定义了一个名为 command 的属性，这个属性保存着我们要执行的 shell 命令。
示例代码
为了让大家更好的理解，在下面的示例中，我们将用 grunt-sh 包来完成将 *.js 文件全部合并并压缩的任务。
首先修改 Gruntfile.js 文件，添加如下代码：
-- -------------------- ---- -------
-------------- - --------------- -
-------------------------------
------------------
--- -
-------- -
------- -----
--
------- -
-------- ---- --------- - ----------
--
--------- -
-------- --------- --------- -- ------------- ---------- ---------
-
-
---
----------------------------- ------------- ----------------
--在上述代码中，我们定义了两个任务，分别是 concat 和 compress，这两个任务在默认任务中都会依次执行。任务的执行顺序非常重要。
在 concat 任务中，我们定义了一个用于清空输出文件的 shell 命令：
command: 'cat /dev/null > js/all.js'
这个命令会将 /dev/null 的所有输出重定向到 js/all.js 文件并清空文件。这样，在执行压缩任务之前，我们就能保证输出文件的干净。
在 compress 任务中，我们使用了 UglifyJS 压缩 JavaScript 文件：
command: 'uglifyjs js/all.js -o js/all.min.js --compress --mangle'
上述命令中，我们指定了源文件位置和输出文件的位置，然后使用 --compress 和 --mangle 选项来启用 UglifyJS 的压缩和混淆功能。
最后，我们可以使用 grunt 命令来执行构建：
grunt
执行上述命令后，我们可以在项目中看到一个名为 js/all.min.js 的文件，这个文件包含了所有 JavaScript 代码的压缩版本。
指导意义
grunt-sh 是一个非常好用的 npm 包，它可以帮助我们在使用 Grunt 进行前端构建过程中，更加高效地调用 shell 命令。通过学习使用 grunt-sh，我们可以更好地理解 JavaScript Grunt 构建工具的工作原理，同时可以更加高效地管理和部署前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1c32af403f2923b035c53c