如何在Visual Studio Code中自动执行任务

最新推荐文章于 2024-08-03 10:26:55 发布

cune1359

最新推荐文章于 2024-08-03 10:26:55 发布

阅读量4.2k

点赞数

文章标签： java python javascript vue 大数据 ViewUI

通过使用一些重复的“任务”，使用Grunt或Gulp之类的构建工具可以为您节省很多开发阶段的时间。如果您选择Visual Studio Code作为您的首选代码编辑器，则您的工作流程将更加简化，并最终提高生产力。

Visual Studio Code以Node.js为核心构建，使您无需离开编辑器窗口即可运行任务 。我们将在这篇文章中向您展示如何做到这一点。

让我们开始。

先决条件

首先，您需要在系统中安装各自构建工具的Node，NPM（节点程序包管理器）和CLI（命令行界面）。如果不确定是否已安装所有这些工具，则验证它就像键入命令行一样容易。

我还将假设项目中的文件和目录在正确的位置，包括配置文件，例如gulpfile.js或Gruntfile.js如果使用Grunt的话）。并且应该在此时安装package.json注册的项目依赖项。

以下是我们的项目目录和文件，为本文的演示目的而创建。您的项目肯定会大不相同；您可能有更多或更少的文件。

.
├── css
│   ├── sass
├── gulpfile.js
├── index.html
├── js
│   ├── src
├── node_modules
└── package.json

我们在项目中使用Gulp作为构建工具。我们在gulpfile.js注册了许多任务，如下所示：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var jsSrc = './js/src/**/*.js';
var sassSrc = './css/sass/**/*.scss';

gulp.task( 'scripts', function() {
	return	gulp.src( jsSrc )
                .pipe( uglify() )
                .pipe( gulp.dest( './js' ) )
});

gulp.task( 'styles', function() {
	return	gulp.src( sassSrc )
                .pipe( sass( { outputStyle: 'compressed' } ) )
                .pipe( gulp.dest( './css' ) );
});

gulp.task( 'automate', function() {
	gulp.watch( [ sassSrc, jsSrc ], [ 'scripts', 'styles' ] );
});

gulp.task( 'default', ['scripts', 'styles', 'automate'] );

我们具体指定了四个任务：

scripts ：将编译我们JavaScript文件以及通过Gulp UglifyJS插件最小化输出的任务。
styles ：将我们的SCSS文件编译成CSS并压缩输出的任务。
automate ：通过gulp内置watch实用程序将styles和scripts任务自动化的任务。
default ：将同时运行上述三个任务的任务。

准备好项目中的构建工具后，我们现在还可以继续自动化在gulpfile.js定义的这些任务。

但是，如果您不熟悉所提到的任何工具，我强烈建议您先阅读我们以前的一些文章，然后再继续进行操作。

运行和自动化任务

在Visual Studio Code中运行和自动化“任务”非常简单。首先，通过按Shift + Cmd的 + P键组合或通过菜单栏， 查看>命令面板启动命令面板 ，如果这是对你更方便。然后，键入Tasks ，然后从结果中显示的少数几个选项中选择“ Tasks：Run Task ”。

Visual Studio Code很聪明；它知道我们正在使用Gulp，拾取gulpfile.js并显示我们在文件中定义的任务列表。

在这里，让我们选择default任务。选择此任务后，将编译SCSS样式表和JavaScript文件，并且还将触发automate任务，该任务将允许styles和scripts Task继续自动运行。

更改文件（样式表或JavaScript文件）时，它将自动进行编译。 Visual Studio Code还为生成操作中的每一次成功和错误生成及时的报告。

深度整合

此外，我们可以将项目集成到Visual Studio Code中，以简化工作流程。而且，将我们的任务集成到Visual Studio Code中既方便又快捷。

启动命令面板，然后选择“配置任务运行器”。 Visual Studio Code将列出它支持的构建工具的列表。在这种情况下，我们选择“ Gulp”，因为这是我们在本文的项目中使用的那个。

Visual Studio代码现在应该已经创建了一个名为新文件tasks.json下.vscode在你的项目目录。 tasks.json包含裸配置。

如下所示，当前的tasks属性只是一个空数组。

{
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": [
	"--no-color"
	],
	"tasks": []
}

如下扩展tasks值。

{
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": [
	"--no-color"
	],
	"tasks": [{
		"taskName": "default",
		"isBuildCommand": true,
	}]
}

该taskName指定任务名称在我们gulpfile.js ，我们想运行。 isBuildCommand属性将default命令定义为“ Build”命令。现在，只需四处按Shift + Cmd + B组合键，而不是四处移动命令面板。