grunt 执行任务_如何使用Grunt自动执行工作流程[教程]

最新推荐文章于 2024-05-16 21:41:01 发布

cune1359

最新推荐文章于 2024-05-16 21:41:01 发布

阅读量468

点赞数

文章标签： python java javascript linux vue ViewUI

我大力倡导自动化，因为它使生活变得简单得多。当您有一台计算机为您做事时，为什么要花时间在那些琐碎而单调的任务上，这些任务会耗尽您的生命力？对于Web开发尤其如此。

许多开发任务可能很繁琐。在开发过程中，您可能希望编译代码，而在推送开发版本时，您可能会串联并缩小文件，仅删除开发资源，等等。即使是比较简单的文件，例如删除一堆文件或重命名文件夹， 也可能占用我们很大的时间。

在本文中，我将向您展示如何利用Javascript任务运行器Grunt提供的出色功能使您的生活更轻松。我将指导您完成整个过程，即使您不是Javascript向导也不会担心！

安装Grunt

安装Grunt非常容易，因为它使用节点包管理器。这意味着您可能还必须安装Node本身。打开一个终端或命令提示符（从现在开始，我将调用此终端）并输入nmp -v 。

如果看到已安装npm的版本号，或者看到“找不到命令”错误，则必须通过转到节点下载页面并选择所需的版本来进行安装。

安装Node之后，在终端中发出单个命令即可获取Grunt：

npm install -g grunt-cli

基本用法

由于每个项目都有不同的要求，因此您将在项目间使用Grunt。现在，我们通过创建一个文件夹并通过我们的终端导航到它来开始一个项目。

两个文件组成了Grunt的核心： package.json和Gruntfile.js 。软件包文件定义了您的自动化将使用的所有第三方依赖关系，Gruntfile文件使您可以控制如何精确使用这些依赖关系。现在，我们创建一个包含以下内容的准系统软件包文件：

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

名称和版本由您决定，依赖项必须包含您正在使用的所有软件包。我们现在什么也不做，所以我们只是确保将Grunt本身添加为依赖项。

您可能会问自己，那个叫波浪号（〜）的波浪线（〜）在做什么。

可以使用语义版本程序中npm的规则来要求版本。简而言之：

您指定一个确切的版本，例如4.5.2
您可以使用大于/小于来表示最低或最高版本，例如>4.0.3
使用波浪号指定一个版本块。使用~1.2被认为是1.2.x ，任何版本1.2.0以上但低于1.3

有许多指定版本的方法可用，但这足以满足大多数需求。下一步是创建一个Gruntfile，它将执行我们的自动化操作。

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default', [] );

};

这基本上是Gruntfile的框架。有两个景点。一个位置位于initConfig()函数内部。这是您所有项目配置的去向。这将包括处理LESS / SASS编译，最小化脚本等。

第二个位置在该函数下方，您可以在其中指定任务。您可以看到一个名为“默认”的任务。此刻它是空的，因此它什么也不做，但是我们稍后再进行扩展。 任务实质上是将项目配置中的点点滴滴排队，然后执行它们 。

例如，名为“脚本”的任务可以连接我们所有的脚本，然后最小化生成的文件，然后将其移动到最终位置。这三个动作均在项目配置中定义，但由任务“拉在一起”。如果还不清楚，请不要担心，我将向您展示如何完成此操作。

我们的首要任务

让我们创建一个任务，为我们减少一个JavaScript文件。

每当我们要添加新任务时，我们需要做四件事：

必要时安装插件
在Gruntfile中要求它
写任务
如果需要，将其添加到任务组

（1）查找并安装插件

找到所需插件的最简单方法是在Google中键入以下内容：“ minimum javascript grunt plugin”。第一个结果将带您进入grunt-contrib-uglify插件，这正是我们所需要的。

Github页面告诉您所有您需要了解的内容。安装是终端中的单行，这是您需要使用的内容：

npm install grunt-contrib-uglify --save-dev

您可能需要以管理员权限运行。如果您得到类似npm ERR! Please try running this command again as root/Administrator. npm ERR! Please try running this command again as root/Administrator. 只需在命令前键入sudo，然后在出现提示时输入密码：

sudo npm install grunt-contrib-uglify --save-dev

该命令实际上会解析您的package.json文件，并将其作为依赖项添加到该文件中，您无需手动进行操作。

（2）在Gruntfile中需要

下一步是根据需要添加Gruntfile。我想在文件顶部添加插件，这是添加grunt.loadNpmTasks('grunt-contrib-uglify');之后的完整Gruntfile grunt.loadNpmTasks('grunt-contrib-uglify'); 。

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default', [] );

};

（3）创建任务以缩小脚本

正如我们所讨论的，这应该在initConfig()函数中完成。该插件（以及大多数其他插件）的Github页面为您提供了大量信息和示例。这是我在测试项目中使用的内容。

uglify: {
    build: {
        src: 'js/scripts.js',
        dest: 'js/scripts.min.js'
    }
}

这非常简单，我在项目的js目录中指定了scripts.js文件，并指定了缩小文件的目标位置。指定源文件的方法有很多，我们将在后面介绍。

现在，让我们看一下添加完之后的完整Gruntfile，以确保您知道事物如何组合在一起。

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        uglify: {
            build: {
                src: 'scripts.js',
                dest: 'scripts.min.js'
            }
        }
    });

    grunt.registerTask('default', [] );

};

（4）将此配置添加到任务组

现在，您可以在终端上输入grunt uglify但稍后我们将需要任务组来运行多个任务。我们的默认任务为空，只是等待添加内容，因此我们将其修改为以下内容：

grunt.registerTask('default', ['uglify'] );

在这一阶段，您应该能够转到终端，输入grunt并查看缩小过程。当然不要忘记创建一个scripts.js文件！

那花了很多时间来建立它吗？即使您不熟悉这一切，并且花了一些时间来完成这些步骤，它节省的时间也将超过几次使用所花费的时间。

串联文件

让我们看一下串联文件，并学习如何在此过程中将多个文件指定为目标 。

串联是将多个文件的内容合并为一个文件的过程。我们需要grunt-contrib-concat插件。让我们完成以下步骤：

要安装插件，请使用npm install grunt-contrib-concat --save-dev在终端中npm install grunt-contrib-concat --save-dev 。完成后，确保像使用grunt.loadNpmTasks('grunt-contrib-concat');之前一样将其添加到您的Gruntfile中grunt.loadNpmTasks('grunt-contrib-concat'); 。

接下来是配置。让我们结合三个特定的文件，语法会很熟悉。

concat: {
    dist: {
        src: ['dev/js/header.js', 'dev/js/myplugin.js', 'dev/js/footer.js'],
        dest: 'js/scripts.js',
    },
},

上面的代码将给定的三个文件作为源，并将它们合并为给定的文件作为目标。

这已经非常强大，但是如果添加了新文件怎么办？我们是否需要一直回到这里？当然不能，我们可以指定要连接的整个文件文件夹。

concat: {
    dist: {
        src: 'dev/js/*.js''],
        dest: 'js/scripts.js',
    },
},

现在，dev / js文件夹中的所有javascript文件都将合并为一个大文件： js/scripts.js ，更好！

现在是时候创建一个任务，以便我们可以实际连接一些文件了。

grunt.registerTask('mergejs', ['concat'] );

这不再是默认任务，因此在发出grunt命令时，我们需要在终端中键入其名称。

grunt mergejs

自动化我们的自动化

我们已经取得了很大的进步，但是还有更多！现在，当您要连接或缩小时，需要转到终端并键入适当的命令。现在是时候来看一下watch命令，它将为我们执行此操作了。在此过程中，我们还将学习如何立即执行多项任务。

要开始，我们需要抓住grunt-contrib-watch 。我确定您现在可以安装它并将其添加到自己的Gruntfile中，因此，我将首先向您展示我在测试项目中使用的内容。

watch: {
    scripts: {
        files: ['dev/js/*.js'],
        tasks: ['concat', 'uglify'],
    },
}

我命名了一组文件来观看“脚本”，只是我知道它的作用。在此对象中，我指定了要监视的文件和要运行的任务。在前面的串联示例中，我们将dev / js目录中的所有文件汇总在一起。

在缩小示例中，我们缩小了该文件。监视dev / js文件夹中的更改并在有任何任务时运行这些任务是有意义的。

如您所见，可以通过用逗号分隔多个任务来轻松地调用它们。在这种情况下，它们将按顺序执行，首先是串联，然后是缩小。这也可以通过任务组来完成，这就是它们存在的原因。

现在，我们可以修改默认任务：

grunt.registerTask('default', ['concat', 'uglify'] );

现在我们有两个选择。每当您要串联和缩小脚本时，都可以切换到终端并键入grunt 。您还可以使用watch命令启动文件grunt watch ： grunt watch 。

它将坐在那里，等待您修改这些文件。完成后，它将执行分配给它的所有任务，继续进行尝试。

那就好多了，我们不需要任何投入。现在，您可以处理文件，一切都会为您做好。

总览

掌握了如何安装和使用插件以及watch命令如何工作的基础知识，您自己都将成为自动化成瘾者。除了我们讨论的内容，Grunt还有很多其他功能，但是您无法独自处理。

使用用于编译SASS的命令，优化图像，自动前缀等，只需遵循我们讨论的步骤并阅读插件所需的语法即可。

如果您知道Grunt的一些特别有用的用法，请在评论中告诉我们，我们总是很想听听您如何使用Grunt之类的工具！

翻译自: https://www.hongkiat.com/blog/automate-workflow-with-grunt/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
grunt 执行任务_如何使用Grunt自动执行工作流程[教程]

我大力倡导自动化，因为它使生活变得简单得多。当您有一台计算机为您做事时，为什么还要花时间在那些琐碎而单调的任务上，这些任务会耗尽您的生命力呢？对于Web开发尤其如此。许多开发任务可能很繁琐。在开发过程中，您可能希望编译代码，而在推送开发版本时，您可能会串联并缩小文件，仅删除开发资源，等等。即使是比较简单的文件，例如删除一堆文件或重命名文件夹，也可能会占用我们很大的时间。在...
复制链接

扫一扫