Grunt를 사용하여 워크 플로를 자동화하는 방법 [자습서]

나는 자동화의 거대한 옹호자 인생을 훨씬 단순하게 만들어주기 때문입니다. 컴퓨터를 가지고있을 때 평생 동안 힘들어하는 단조롭고 단조로운 작업에 시간을 소비하는 이유는 무엇입니까? 웹 개발의 경우 특히 그러합니다..

많은 개발 작업이 힘들 수 있습니다. 개발하는 동안 코드를 컴파일하고, 개발 버전을 밀면 파일을 연결 및 축소하고 개발 전용 리소스를 제거하는 등의 작업을 수행 할 수 있습니다. 상대적으로 복잡하지 않은 파일조차도 여러 파일을 삭제하거나 폴더 이름 바꾸기와 같은 것입니다. 우리 시대의 큰 덩어리를 차지할 수있다..

이 기사에서는 Javascript 작업 주자 인 Grunt가 제공하는 뛰어난 기능을 활용하여 인생을 더 쉽게 만드는 방법을 보여줍니다. 나는 당신이 자바 스크립트 마법사가 아니어도 걱정할 필요가 없도록 전체 과정을 안내 할 것입니다.!

Hongkiat.com에 대한 추가 정보 :

• CSSMatic은 웹 디자이너를 위해 CSS를 쉽게 만듭니다.
• 폴더 작업으로 Mac에서 작업 자동화하기
• 작업으로 보관 용 파일 자동화하기
• Android 기기에서 할 일을 자동화하는 데 도움이되는 10 가지 앱
• Dropbox에 웹 사이트를 (자동으로) 백업하는 방법

그루트 설치

노드 패키지 관리자를 사용하기 때문에 Grunt 설치가 매우 쉽습니다. 즉, 노드 자체를 설치해야 할 수도 있습니다. 터미널이나 명령 프롬프트를 열고 (지금부터이 터미널에 전화 할 것입니다.) nmp -v.

가지고있는 버전 번호가 보이면 npm 설치된 "명령을 찾을 수 없음"오류가 표시되면 노드 다운로드 페이지로 이동하여 필요한 버전을 선택하여 설치해야합니다.

Node가 설치되면, Grunt를 얻는 것은 터미널에서 발행 된 단일 명령의 문제입니다.

npm 설치 -g grunt-cli

기본 사용법

각 프로젝트마다 서로 다른 요구 사항이 있으므로 프로젝트 간 프로젝트 기반으로 Grunt를 사용하게됩니다. 이제 폴더를 만들고 터미널을 통해 프로젝트를 탐색 해 봅시다..

그란트의 핵심은 두 개의 파일로 구성됩니다. package.json 과 Gruntfile.js. 패키지 파일은 자동화가 사용하는 모든 타사 종속성을 정의하고, Gruntfile은 방법 정확하게 이것들이 사용된다. 이제 다음 내용으로 베어 본 패키지 파일을 작성해 보겠습니다.

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

이름과 버전은 당신에게 달려 있고 의존성은 사용중인 모든 패키지를 포함해야합니다. 우리는 그 순간에 아무 것도하지 않기 때문에 Grunt 자체가 의존성으로 추가되는지 확인합니다..

당신은 물결 모양의 선 (~)이 물결표라고 부르는 것이 무엇을하고 있는지 물어볼 것입니다..

버전은 npm에 대한 시맨틱 버저 (version)의 규칙을 사용하여 요구 될 수 있습니다. 요컨대 :

• 정확한 버전을 지정하십시오. 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 컴파일, 스크립트 축소 등의 작업이 포함됩니다..

두 번째 위치는 작업을 지정하는 해당 기능 아래에 있습니다. 지정한 하나의 작업을 볼 수 있습니다. “태만”. 현재는 비어 있으므로 아무 것도하지 않지만 나중에 확장 할 것입니다.. 태스크는 본질적으로 프로젝트 구성의 비트와 조각을 큐에 넣고 실행합니다..

예를 들어, 명명 된 작업 “스크립트” 모든 스크립트를 연결 한 다음 결과 파일을 축소 한 다음 최종 위치로 이동할 수 있습니다. 이 세 가지 조치는 모두 프로젝트 구성에서 정의되지만 “함께 뽑은” 작업에 의해. 이것이 아직 명확하지 않다면 걱정하지 마세요, 제가 어떻게하는지 보여 드리겠습니다..

우리의 첫 번째 과제

우리를 위해 하나의 자바 스크립트 파일을 축소하는 작업을 만들어 보겠습니다..

새로운 작업을 추가 할 때마다 수행해야 할 4 가지 작업이 있습니다.

• 필요한 경우 플러그인 설치
• Gruntfile에서 요구하십시오.
• 할 일 작성
• 필요한 경우 태스크 그룹에 추가하십시오.

(1) 플러그인 찾기 및 설치

필요한 플러그인을 찾는 가장 쉬운 방법은 다음과 같이 Google에 입력하는 것입니다. “자바 스크립트 불평 플러그인을 축소”. 첫 번째 결과는 우리가 필요로하는 grunt-contrib-uglify 플러그인으로 연결됩니다..

Github 페이지는 당신이 알아야 할 모든 것을 알려줍니다. 설치는 터미널에 한 줄로되어 있으므로 다음과 같이 사용해야합니다.

 npm은 grunt-contrib-uglify를 설치합니다. --save-dev 

관리자 권한으로이 작업을 실행해야 할 수도 있습니다. 당신이 뭔가를 얻으면 npm ERR! root / Administrator로이 명령을 다시 실행하십시오.. 그냥 명령 앞에 sudo를 입력하고 프롬프트가 나타나면 암호를 입력하십시오 :

 sudo npm은 grunt-contrib-uglify를 설치합니다. --save-dev 

이 명령은 실제로 package.json 파일을 만들고 거기에 의존성을 추가하면 수동으로 할 필요가 없습니다..

(2) 그룬트 파일에 필요함

다음 단계는 Gruntfile을 요구 사항으로 추가하는 것입니다. 저는 파일 상단에 플러그인을 추가하고 싶습니다. 여기에 추가 한 후 전체 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' 

이것은 매우 간단합니다. scripts.js 내 프로젝트의 js 디렉토리에있는 파일과 축소 된 파일의 대상. 소스 파일을 지정하는 방법은 여러 가지가 있습니다. 나중에 살펴 보겠습니다..

지금 당장은 Gruntfile이 추가 된 이후에 전체 Gruntfile을 살펴보고, 상황이 어떻게 어울리는 지 알 수 있도록 해보자..

 module.exports = function (grunt) grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.initConfig (pkg : grunt.file.readJSON ( 'package.json'), uglify : 빌드 : src : 'scripts.js', dest : 'scripts.min.js'); grunt.registerTask ( 'default', []); ; 

(4)이 구성을 작업 그룹에 추가하십시오

지금 당장 터미널에 가서 타이핑 할 수 있습니다. 꿀꺽 꿀꺽 삼키다 나중에 여러 작업을 실행하려면 작업 그룹이 필요합니다. 우리는 기본 태스크를 공백으로두고 그냥 뭔가 추가되기를 기다리므로 다음과 같이 수정하십시오.

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

이 단계에서 터미널에 갈 수 있어야합니다. 꿀꿀 거리는 소리 그리고 그 축소가 일어나는 것을보십시오. 만들 것을 잊지 마세요. scripts.js 물론 파일!

그렇게하기까지는 시간이 많이 걸리지 않았습니까? 비록 당신이이 모든 것을 처음 사용하고 계단을 통해 작업하는 데 약간의 시간이 필요했다 할지라도 그것이 저장하는 시간은 몇 가지 용도 내에서 시간을 소비 할 것입니다.

파일 연결하기

연결 파일을 보자. 여러 파일을 대상으로 지정하는 방법 배우기 길을 따라.

연결은 여러 파일의 내용을 단일 파일로 결합하는 프로세스입니다. grunt-contrib-concat 플러그인이 필요합니다. 다음 단계를 수행해 보겠습니다.

플러그인을 설치하려면 다음을 사용하십시오. npm grunt-contrib-concat 설치 --save-dev 터미널에. 완료되면 사용하기 전에 Gruntfile에 추가해야합니다. grunt.loadNpmTasks ( 'grunt-contrib-concat');.

다음은 구성입니다. 세 가지 특정 파일을 결합합시다. 구문은 익숙 할 것입니다..

 dev : 'js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest : 'js / scripts.js' ,, 

위의 코드는 소스로 제공된 3 개의 파일을 가져 와서 대상으로 제공된 파일로 결합합니다.

이것은 이미 매우 강력하지만 새로운 파일이 추가되면 어떻게 될까요? 우리는 항상 여기에 다시 와야합니까? 물론, 우리는 연결할 전체 폴더를 지정할 수 있습니다..

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

이제 dev / js 폴더 내의 모든 javascript 파일이 하나의 큰 파일로 병합됩니다. js / scripts.js, 훨씬 낫다!

이제는 작업을 만들어서 실제로 파일을 연결할 수 있습니다..

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

이것은 더 이상 기본 작업이 아니므로 터미널을 실행할 때 터미널에 이름을 입력해야합니다. 꿀꿀 거리는 소리 명령.

 과격한 합병 

자동화 자동화

우리는 이미 많은 진전을 이루었지만 더 많은 것이 있습니다! 지금은 연결하거나 축소하려는 경우 터미널로 이동하여 적절한 명령을 입력해야합니다. 우리가 볼 시간이 아주 많아. 손목 시계 우리를 위해 이것을 할 명령. 또한 여러 작업을 한꺼번에 실행하는 방법을 배웁니다..

우리는 무언가를보고 관여 할 필요가 있습니다. 나는 그것을 설치할 수 있고 yuor에있는 Gruntfile에 지금 추가 할 수 있다고 확신한다. 그래서 나는 나의 테스트 프로젝트에서 내가 사용하는 것을 보여주기 시작할 것이다..

 watch : scripts : files : [ 'dev / js / *. js'], 작업 : [ 'concat', 'uglify'],, 

내가 볼 파일 세트를 명명했다. “스크립트”, 그냥 내가하는 일을 알아. 이 개체 내에서 감시 할 파일과 실행할 작업을 지정했습니다. 앞의 연결 예제에서 우리는 dev / js 디렉토리에있는 모든 파일들을 모았습니다.

minification 예제에서 우리는이 파일을 축소했습니다. dev / js 폴더에서 변경 사항을 확인하고 이러한 변경 사항이있을 때마다 이러한 작업을 실행하는 것이 좋습니다..

보시다시피 쉼표로 구분하여 여러 작업을 쉽게 호출 할 수 있습니다. 그것들은 연속적으로 수행 될 것이고, 먼저 연결이 될 것이고이 경우에는 축소가 수행 될 것입니다. 이것은 또한 존재하는 이유의 일종 인 작업 그룹으로도 수행 할 수 있습니다.

이제 기본 작업을 수정할 수 있습니다.

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

이제 우리에게는 두 가지 선택이 있습니다. 스크립트를 연결하고 축소하고자 할 때마다 터미널로 전환하고 다음을 입력하십시오. 꿀꿀 거리는 소리. watch 명령을 사용하여 파일을 볼 수도 있습니다. 과란 트 시계.

이 파일을 수정하기를 기다리고 거기에 앉아있을 것입니다. 일단 작업을 수행하면 할당 된 모든 작업이 수행되고 계속 진행됩니다..

그게 훨씬 낫지. 우리 한테는 입력이 필요 없어. 이제 파일을 정리하면 모든 것이 잘 처리됩니다..

개요

플러그인을 설치하고 사용할 수있는 방법과 감시 명령이 작동하는 방법에 대한 기본적인 지식을 통해 자동화 중독자가 될 수 있습니다. Grunt에는 우리가 논의한 것보다 더 많은 것이 있지만 당신 스스로 처리 할 수있는 것은 없습니다..

SASS 컴파일, 이미지 최적화, 자동 접두어 작성 등의 명령을 사용하여 우리가 논의한 단계를 따르고 플러그인이 필요로하는 구문을 읽는 것만으로도 충분합니다..

Grunt에 대한 몇 가지 유용한 정보를 알고 있다면 의견에서 알려주십시오. Grunt와 같은 도구를 사용하는 방법에 대해 항상 관심이 있습니다.!