웹 개발에 전념하는 사람들은 새로운 기술, 프레임 워크, 표준, 도구, 기술 등이 매일 나올 수 없다는 것을 알고있을 것입니다! 말 그대로! 웹 개발에 대한 작은 슈퍼 소개 기사를 썼을 때 몇 가지를 설명했고 오늘은 두 가지를 더 설명하고자합니다. 바워와 그런트입니다.
먼저 그 개념에 대해 간단히 살펴보겠습니다:
Bower는 패키지 및 종속성 관리자입니다. Linux 사용자는 이에 매우 익숙할 것입니다. Bower에 JQuery UI를 설치하라고 지시하면 프로그램이 종속 요소인 Jquery를 다운로드한다고 상상해 보세요.
다운로드뿐만 아니라 업데이트도 훨씬 쉬워집니다. 별거 아닌 것 같지만 웹을 검색하고, 압축 파일을 다운로드하고, 압축을 풀고, 올바른 폴더에 넣고, URL을 관리하고, 종속성을 확인하는 것보다 훨씬 쉽고 체계적으로 정리할 수 있습니다.
반면에 Grunt는 작업 자동화 도구입니다. 반복적인 작업, 예를 들어 반복적인 작업에서 벗어날 수 있게 해줍니다:
- sass를 사용하면 grunt가 파일 변경 사항에 주의를 기울이고 적절한 시점에 컴파일하도록 할 수 있습니다.
- 폴더에 있는 모든 js 파일을 축소하고 병합할 수 있습니다.
- 단위 테스트를 자동으로 수행할 수 있습니다.
- MySQL 데이터베이스 배포를 수행할 수 있습니다.
- 간로드 사용
- 또한 다양한 언어와 프레임워크를 위한 더 많은 플러그인이 있습니다.
소규모 프로젝트에서 이 두 가지 도구를 사용하는 방법을 살펴봅시다.
1단계: Node.js를 설치합니다. 두 도구 모두 Node
2단계: 다음 명령어를 사용하여 bower를 전역적으로 설치합니다(이 작업은 각 PC에서 한 번만 수행됩니다).
sudo npm install -g bower
3단계: 프로젝트가 저장될 폴더를 만들고 운영 체제 콘솔을 사용하여 그 안에 들어갈 때까지 이동합니다. 그 안에 들어가면 다음 명령을 실행합니다.
bower init
프로젝트 이름, 버전, 설명, 라이선스, 작성자 등과 같은 몇 가지 질문이 표시됩니다. 프로젝트 이름을 지정하고 다른 모든 옵션을 입력하는 것으로 충분하며 지금은 중요하지 않습니다.
해당 명령이 완료되면 질문한 내용이 포함된 bower.json이라는 파일이 생성됩니다.
4단계: 이 단일 콘텐츠로 .bowerrc라는 파일을 만듭니다:
{
"directory": "app/components"
}
여기에 패키지가 설치됩니다. 원하는 주소로 변경할 수 있습니다. 일부는 ‘공개/공급업체’를 사용합니다.
5단계: 이제 원하는 것을 검색하여 설치할 수 있습니다. 예를 들어 jquery-ui를 설치해 보겠습니다. 다음 명령으로 패키지를 검색합니다.
bower에서 jquery-ui
를 검색하면
다음과 같은 결과가 표시됩니다:
패키지를 식별하고(이 경우 첫 번째 패키지) 명령을 사용하여 패키지를 설치합니다:
bower install jquery-ui -save
그러면 원하는 항목과 종속성이 설치됩니다. 선택한 폴더(이 경우 앱/컴포넌트)에 다운로드된 것을 확인할 수 있으며 bower.json 파일도 업데이트됩니다.
6단계: 매우 간단한 사용
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="app/components/jquery/dist/jquery.js"></script> <script src="app/components/jquery-ui/ui/jquery-ui.js"></script> </head> <body> </body> </html>
Bower에는 여러분이 알고 싶어할 만한 다른 명령도 있습니다:
- 바워 정보 . 패키지 정보를 보기 위한 것입니다. 설치된 버전, 종속성, 사용 가능한 버전 등을 확인할 수 있습니다.
- 바워 제거 . 일부 패키지를 제거하는 것입니다.
- 바워 목록. 어떤 패키지를 설치했는지 확인하기 위한 것입니다.
- 바워 도움말. 명령어와 옵션을 보기 위한 것입니다.
7단계: 이제 다음 명령을 사용하여 Grunt를 설치합니다(각 PC에서 한 번만 수행).
sudo npm install -g grunt-cli
8단계: grunt를 사용하려면 package.json과 Gruntfile.js의 두 파일이 필요합니다. 첫 번째 파일의 경우 다음 명령을 실행해야 합니다.
npm init
파일을 생성하기 위한 몇 가지 간단한 질문을 받게 됩니다.
9단계: 프로젝트에 grunt를 설치해야 하며, 이 작업은 다음 명령을 사용하여 수행합니다.
npm install grunt -save-dev
저장-개발은 패키지가 종속성에 표시되도록 하는 것입니다.
10단계: 이제 사용하려는 플러그인을 설치할 차례입니다. 원하는 거의 모든 작업을 위한 플러그인이 있다고 말씀드렸듯이 여기 또는 여기에서 검색할 수 있습니다. 이 경우 폴더에 여러 개의 자바스크립트 파일이 있고 이를 하나의 파일로 병합하고 싶다고 가정해 보겠습니다.
2개의 플러그인을 설치하겠습니다:
npm install grunt-contrib-concat grunt-contrib-watch -save-dev
첫 번째는 파일을 연결(단위)하고, 두 번째는 변경 사항을 감시하는 역할을 담당합니다. 따라서 파일이 생성되거나 수정될 때 작업이 자동으로 수행됩니다.
모든 설치가 완료되면 package.json 파일이 업데이트된 것을 확인할 수 있습니다. 이것이 무엇을 위한 것인지 나중에 설명해드리겠습니다.
11단계: gruntfile.js라는 파일을 만듭니다(또는 원하는 대로 만들 수 있지만 가장 ‘일반적인’ 파일은 gruntfile입니다). 이 파일에서 grunt에게 원하는 작업을 지시합니다.
이 파일에는 항상 다음이 포함됩니다:
module.exports = function(grunt) {
grunt.initConfig({
});
};
그리고 그 안에서 플러그인이 구성되는데, 저희의 경우에는 다음과 같은 형태입니다:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: ';'
},
dist: {
src: 'javascript/mis_js/*.js',
dest: 'javascript/main.js'
}
},
watch: {
files: 'javascript/mis_js/*.js',
tasks: ['concat']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
이제 package.json 파일에 기본값인 index.js 대신 gruntfile.js 파일 이름(또는 사용자가 선택한 이름)을 입력해야 합니다. 다음과 같이 보일 것입니다:
... "main": "gruntfile.js", ...
각 플러그인은 다르게 구성되지만 일반적으로 노드나 자바스크립트에 대해 전혀 모르더라도 태스크가 수행하는 작업을 매우 쉽게 이해할 수 있습니다. 예를 들어 ‘concat’ 작업은 javascript/my_js 폴더에 있는 모든 js 파일을 main.js라는 파일로 합칩니다. 그리고 ‘watch’ 작업은 javascript/mis_js 폴더에 있는 js 파일의 변경 사항을 살펴보고 변경 사항이 있으면 concat 작업을 실행합니다. 간단하죠?
그리고 마지막에 ‘기본’ 작업을 정의한 것을 알 수 있습니다. 이는 다음 명령을 사용할 때 실행되는 기본 작업이 되도록 하기 위한 것입니다.
프로젝트 폴더에
서버, 다른 PC 등 프로젝트를 다른 곳으로 옮겨야 할 때 종속성을 각각 업로드할 필요 없이 전체 프로젝트를 다시 만들 수 있도록 bower.json과 package.json을 사용하면 실제로는 다운로드하는 것 중 일부, 즉 bower 패키지와 grunt 플러그인만 다시 만들 수 있습니다.
이 작은 튜토리얼이 도움이 되길 바라며, 소개에 불과하지만 이제 이러한 도구를 활용할 수있을 것이라고 생각합니다. 그리고 마음에 드시면 언젠가는이 모든 단계를 가능한 한 쉽게 만들기 위해 요만에 대해 이야기 할 것이므로 블로그를 구독하시기 바랍니다.