반드시 사용해야하는 6 가지 Grunt 플러그인

바닥

이 훌륭한 플러그인으로 Grunt에 더 많은 것을 제공하십시오

다음과 같은 JavaScript 작업 실행기 바닥 프론트 엔드 개발자들에게 매우 인기가 있습니다. 이는 우리 모두가 업무에서하고 싶은 한 가지 일을 돕고 시간을 절약하기 때문입니다!

그러나 현재 5,000 개 이상의 Grunt 플러그인을 사용할 수 있으므로 개발자가 '대략의 다이아몬드'를 찾기가 어려울 수 있습니다. 우리는 당신이 사용해야 할 Grunt 플러그인의 완벽한 레시피를 찾기 위해 Grunt에 갇혀 있던 우리 시대를 되돌아 보았습니다.



01. 추하게 하다

모든 프론트 엔드 개발자는 자바 스크립트 파일 축소의 이점에 대해 알고 있으며, 이것이 바로이 플러그인이하는 일입니다. 이것이 인기입니다. 실제로 Grunt 시작 안내서 . 이름에도 불구하고이 플러그인은 자바 스크립트 코드를 아름답게 꾸미는데도 사용할 수 있습니다. 프로덕션 용도로는 특별히 유용하지는 않습니다.

02. Sass

어떤 CSS 전처리 기가 실제로 보금 자리를 지배하는지에 대해 약간의 논쟁이있을 수 있습니다. Stickyeyes , 우리는 주요 라이벌 인 Less보다는 Sass에 정착했습니다. 이 플러그인을 사용하면 Sass 파일을 작성하고 자동으로 CSS로 컴파일 할 수 있습니다. CSS 전 처리기 사용의 장점은 그 자체로 별도의 기사를 보증하지만, 이미 사용하지 않는 경우 파티에 매우 늦었다 고 말하는 것이 안전합니다!

03. CSSMin

이 플러그인은 Uglify와 동등한 CSS입니다. 단순히 지정된 CSS 파일을 가져 와서 축소합니다. 물론이 작업을 Sass 플러그인과 함께 사용하려면 Sass 작업 후에이 작업이 실행되는지 확인해야합니다.

포토샵에서 사진 격자를 만드는 방법

약간 다른 기술을 사용하여 CSS 파일의 크기를 줄일 수있는 CSSMin에 대한 많은 대안이 있습니다. CSS nano, CSS wring, CSS 축소 등 이 편리한 벤치 마크 읽기 그런 종류의 물건에 관심이 있다면.

04. Concat

이름에서 알 수 있듯이이 플러그인은 단순히 여러 파일을 가져 와서 하나로 연결합니다. 코드 축소와 마찬가지로 파일 연결도 페이지로드 시간을 줄이기위한 오래된 모범 사례입니다.

파일 연결은 JavaScript와 CSS 모두 프로덕션에서 항상 사용해야합니다. 일반적으로 실행되는 마지막 작업은 CSS 사전 처리 작업 및 축소 작업 이후입니다. 이 플러그인에 특정 디렉토리의 모든 파일을 연결하도록 지정하는 것은 쉽지만 파일이 연결되는 순서에 유의하십시오. 특정 순서를 지정하거나 파일 이름을 지정하여 항상 원하는 순서로 연결되도록해야 할 수 있습니다. .

05. ImageMin

CSSMin 및 Uglify와 같은 맥락에서 ImageMin은 페이지로드에 대한 또 다른 오래된 문제인 이미지 파일 크기를 해결합니다. 이미지 '최소화'는 일반적으로 최적화를위한 첫 번째 호출 포트이므로이 플러그인은 총 페이지 파일 크기를 가능한 한 많이 줄이는 데 필수적입니다.

JPG, PNG, GIF 또는 SVG (계속해서 인기있는 벡터 이미지 형식)로 작업하는 경우이 플러그인을 사용하면 손가락 하나 까딱하지 않고도 이미지 파일 크기를 무손실로 줄일 수 있습니다. 프로젝트에 많은 이미지가있는 경우 감시 이벤트에서이 작업을 실행하는 것보다 프로덕션으로 푸시 할 때만이 작업을 실행하는 것이 좋습니다 (다음 항목 참조).

06. 손목 시계

이 플러그인은 실제로 웹 사이트 프런트 엔드에 영향을주지 않지만 효율적인 Grunt 프로세스를 만드는 데 매우 유용합니다. Watch는 지정한 디렉토리를 주시하기 만하면 어떤 것이 변경되면 자동으로 특정 Grunt 작업이 트리거됩니다.

따라서 자바 스크립트 작업을 실행하기 위해 'js'디렉토리에 하나의 감시 조건을 설정하고 CSS 작업을 실행하기 위해 'css'디렉토리에 다른 하나를 설정할 수 있습니다. 즉, 메인 Grunt 프로세스를 수동으로 실행할 필요가 없습니다! 변경을 시작하기 전에 grunt watch 작업을 초기화하면 거기에 있다는 것을 잊을 수 있습니다.

말: 제이미 쉴즈

Jamie Shields는 디지털 마케팅 대행사의 백엔드 개발자입니다. Stickyeyes .

3D를 2D로 만드는 방법

이렇게? 이것을 읽으십시오!