Visual Studio 코드에서 작업을 자동화하는 방법

Grunt 또는 Gulp와 같은 빌드 도구를 사용하면 개발 단계에서 많은 시간을 절약 할 수 있습니다. 몇 가지 반복적 인 자동화 “할 일 목록”. Visual Studio 코드를 이동 코드 편집기로 선택하면 워크 플로가 훨씬 간소화되고 궁극적으로 생산성이 향상 될 수 있습니다..

핵심에 Node.js로 구축 된 Visual Studio Code를 사용하면 편집기 창에서 나가지 않고도 작업을 실행할 수있다.. 그리고이 게시물에서 그렇게하는 방법을 보여 드리겠습니다..

의 시작하자.

사전 요구 사항

먼저, 각 빌드 도구의 노드, NPM (노드 패키지 관리자) W CLI (명령 행 인터페이스)를 모두 시스템에 설치해야합니다. 이 모든 것을 설치했는지 여부가 확실하지 않은 경우 명령 줄을 입력하는 것만 큼 쉽습니다..

또한 프로젝트의 파일과 디렉토리가 적절한 위치에 있다고 가정합니다. 구성 파일과 같은 gulpfile.js 또는 Gruntfile.js 대신 Grunt를 사용하면됩니다. 그리고에 등록 된 프로젝트 의존성 package.json 이 시점에서 설치해야한다..

다음은 프로젝트 디렉토리 및 파일입니다. 데모 이 기사에서. 당신의 프로젝트는 확실히 다르다. 파일이 더 많거나 적을 수 있습니다..

. ├── CSS │ ├── 말대꾸 ├── 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 ( '스크립트'함수 () 복귀 gulp.src (jsSrc) .pipe는 (()) .pipe (gulp.dest ( './js를')) 추하게); gulp.task ( '스타일'함수 () 복귀 gulp.src (sassSrc) .pipe (사스 (outputStyle :)) 압축 '.pipe (gulp.dest ('./css '));) ; gulp.task ( 'automate', function () gulp.watch ([sassSrc, jsSrc], [ 'scripts', 'styles']);); gulp.task ( 'default', [ 'scripts', 'styles', 'automate']);

구체적으로 네 가지 작업이 있습니다.

스크립트: JavaScript 파일을 컴파일하고 Gulp UglifyJS 플러그인을 통해 출력을 최소화하는 작업.
스타일: SCSS 파일을 CSS로 컴파일하고 출력을 압축하는 작업.
자동화하다: 작업을 자동화 할 작업 스타일 과 스크립트 꿀꺽 꿀꺽 마심에도 불구하고 손목 시계 유용.
태만: 세 가지 aformentioned 작업을 한 번에 모두 실행하는 작업.

프로젝트의 빌드 도구가 모두 준비되었으므로 이제는 우리가 정의한 작업을 자동화 할 수 있습니다. gulpfile.js.

그러나 앞서 언급 한 도구로 익숙하지 않은 사용자를 위해 이전 게시물을 살펴보고 추가로 진행하기 전에 주제에 대해 알아볼 것을 적극 권장합니다..

Grunt를 사용하여 워크 플로 자동화 방법
Gulp.js 시작하기
빌드 스크립트의 전투 : Gulp vs Grunt

작업 실행 및 자동화

실행 및 자동화 “할 일 목록” Visual Studio 코드는 매우 간단합니다. 먼저, 명령 팔레트 Shift + Cmd + P 키 조합을 누르거나 메뉴 막대를 통해, 보기> 명령 팔레트 그게 너에게 더 편리하다면. 그런 다음 할 일 목록, 선택하고 “작업 : 작업 실행” 결과에 표시된 몇 가지 옵션 중에서.

Visual Studio 코드는 똑똑합니다. 우리가 꿀꺽 꿀꺽 삼키는 것을 알고 있고 gulpfile.js, 파일 내에서 정의한 작업 목록을 표시합니다..

여기서, 태만 태스크. 이 작업을 선택하면 SCSS 스타일 시트와 JavaScript 파일이 컴파일되고 자동화하다 작업을 허용 할 작업 스타일 과 스크립트 자율적으로 앞으로 나아갈 작업.

파일 (스타일 시트 또는 JavaScript 파일)을 변경할 때 자동으로 컴파일됩니다. 또한 Visual Studio 코드는 빌드 작업에서 발생하는 모든 성공과 오류에 대한 적시의 보고서를 생성합니다..

깊은 통합

또한 Visual Studio 코드에 프로젝트를 통합하여 워크 플로우를 간소화 할 수 있습니다. Visual Studio 코드에서 작업을 쉽고 빠르게 통합 할 수 있습니다..

명령 팔레트를 실행하고 “작업 러너 구성”. Visual Studio 코드는 지원하는 빌드 도구의 목록을 제공합니다. 이 경우, 우리는 “꿀꺽 꿀꺽 마심”, 이것이이 기사에서 우리 프로젝트에서 사용하고있는 것이기 때문에.

Visual Studio 코드가 이제는 새 파일을 만들었습니다. tasks.json 아래에 .vscode 프로젝트 디렉토리에. tasks.json, 이 시점에서, 베어 구성.

아래에서 볼 수 있듯이 과제 속성은 현재 빈 배열입니다..

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

확장 과제 값은 다음과 같습니다..

 "버전": "0.1.0", "명령": "꿀꺽", "isShellCommand"사실, "인수": [ "--no-색상", "작업": [ "TASKNAME" " default ","isBuildCommand ": true,]

그만큼 taskName 우리의 작업 이름을 지정합니다. gulpfile.js 우리가 뛰고 싶습니다. 그만큼 isBuildCommand 속성은 태만 명령으로 “짓다” 명령. 이제 명령 팔레트를 사용하지 않고 Shift + Cmd + B 키 조합 만 누르면됩니다..

또는 “빌드 작업 실행” 명령 팔레트의 작업 검색 결과보기.

마무리

Visual Studio 코드는 훌륭한 미래를 가진 코드 편집기라고 생각합니다. 이 제품에 포함 된 기능을 포함하여 빠르고 간편한 기능을 갖춘 제품입니다..

우리는 Gulp에서 Task를 실행하는 방법을 보았습니다. 대신 Grunt를 사용할 수도 있습니다. 우리는 Visual Studio 코드에 작업을 통합하고 키 조합을 사용하여 작업을 수행하는 방법을 보았습니다. 이로 인해 워크 플로우가 더욱 간소화되었습니다..

다행히도이 기사가 빌드 작업을 실행하는 데 도움이되며 Visual Studio 코드를 최대한 활용할 수있는 팁에 대한 이전 기사를 확인하는 것이 좋습니다..

Visual Studio 코드 : Frontrunner로 만드는 5 가지 멋진 기능
Visual Studio 코드를 사용자 지정하는 방법
프런트 엔드 개발자 용 8 개의 강력한 Visual Studio 코드 확장
Visual Studio 코드 : 키 바인딩 관리를 통한 생산성 향상
Visual Studio 코드에서 Microsoft 포함 디자인의 영향