콘텐츠
Grunt와 같은 JavaScript 작업 실행기는 프런트 엔드 개발자에게 매우 인기가 있습니다. 이는 우리 모두가 업무에서하고 싶은 한 가지 일을 돕고 시간을 절약하기 때문입니다!
그러나 현재 5,000 개가 넘는 Grunt 플러그인을 사용할 수 있으므로 개발자가 '대략의 다이아몬드'를 찾기가 어려울 수 있습니다. 우리는 당신이 사용해야 할 Grunt 플러그인의 완벽한 레시피를 찾기 위해 Grunt에 갇혀 있던 우리 시대를 되돌아 보았습니다.
01. Uglify
모든 프런트 엔드 개발자는 자바 스크립트 파일 축소의 이점에 대해 알고 있으며, 이것이 바로이 플러그인이하는 일입니다. 이러한 인기가 바로 Grunt 시작 안내서에 포함되어 있습니다. 이름에도 불구하고이 플러그인은 자바 스크립트 코드를 아름답게 꾸미는데도 사용할 수 있습니다. 프로덕션 용도로는 특별히 유용하지는 않습니다.
02. 사스
어떤 CSS 전처리 기가 실제로 보금 자리를 지배하는지에 대한 논쟁이있을 수 있지만 여기 Stickyeyes에서 우리는 주요 라이벌 인 Less보다는 Sass에 정착했습니다. 이 플러그인을 사용하면 Sass 파일을 작성하고 자동으로 CSS로 컴파일 할 수 있습니다. CSS 전 처리기 사용의 장점은 그 자체로 별도의 기사를 보증하지만, 이미 사용하지 않는다면 파티에 매우 늦었다 고 말하는 것이 안전합니다!
03. CSSMin
이 플러그인은 Uglify와 동등한 CSS입니다. 단순히 지정된 CSS 파일을 가져 와서 축소합니다. 물론이 작업을 Sass 플러그인과 함께 사용하려면이 작업이 Sass 작업 이후에 실행되는지 확인해야합니다.
약간 다른 기술을 사용하여 CSS 파일의 크기를 줄일 수있는 CSSMin에 대한 많은 대안이 있습니다. CSS 나노, CSS 짜기, CSS 축소 등. 이러한 유형에 관심이 있다면이 편리한 벤치 마크를 읽어보세요.
04. Concat
이름에서 알 수 있듯이이 플러그인은 단순히 여러 파일을 가져 와서 하나로 연결합니다. 코드 축소와 마찬가지로 파일 연결도 페이지로드 시간을 줄이기위한 오래된 모범 사례입니다.
파일 연결은 자바 스크립트와 CSS 모두 프로덕션에서 항상 사용해야합니다. 일반적으로 실행되는 마지막 작업은 CSS 전처리 작업 및 축소 작업 이후입니다. 이 플러그인에 특정 디렉토리의 모든 파일을 연결하도록 지시하는 것은 쉽지만 파일이 연결되는 순서에 유의하십시오. 특정 순서를 지정하거나 파일 이름을 지정하여 항상 원하는 순서로 연결되도록해야 할 수 있습니다. .
05. 이미지 민
CSSMin 및 Uglify와 같은 맥락에서 ImageMin은 페이지로드에 대한 또 다른 오래된 문제인 이미지 파일 크기를 해결합니다. 이미지 '축소'는 일반적으로 최적화를위한 첫 번째 포트입니다. 따라서이 플러그인은 전체 페이지 파일 크기를 최대한 줄이는 데 필수적입니다.
JPG, PNG, GIF 또는 SVG (계속해서 인기있는 벡터 이미지 형식)로 작업하는 경우이 플러그인을 사용하면 손가락 하나 까딱하지 않고도 이미지 파일 크기를 무손실로 줄일 수 있습니다. 프로젝트에 많은 이미지가있는 경우 감시 이벤트에서이 작업을 실행하는 대신 프로덕션으로 푸시 할 때만이 작업을 실행하는 것이 좋습니다 (다음 요점 참조).
06. 시계
이 플러그인은 실제로 웹 사이트 프런트 엔드에 영향을주지 않지만 효율적인 Grunt 프로세스를 만드는 데 매우 유용합니다. Watch는 지정한 디렉토리를 감시하기 만하면 어떤 것이 변경되면 자동으로 특정 Grunt 작업이 트리거됩니다.
따라서 자바 스크립트 작업을 실행하기 위해 'js'디렉토리에 하나의 감시 조건을 설정하고 CSS 작업을 실행하기 위해 'css'디렉토리에 다른 하나를 설정할 수 있습니다. 즉, 기본 Grunt 프로세스를 수동으로 실행할 필요가 없습니다! 변경을 시작하기 전에 지저분한 감시 작업을 초기화하기 만하면 해당 작업이 있다는 사실을 잊을 수 있습니다.
말: 제이미 쉴즈
Jamie Shields는 디지털 마케팅 대행사 Stickyeyes의 백엔드 개발자입니다.
이렇게? 이것을 읽으십시오!
- Grunt vs Gulp : 어떤 JavaScript 빌드 도구를 선택해야합니까?
- Grunt 설정을 개선하는 8 가지 방법
- 최고의 무료 WordPress 테마
