당신이 우승 한 5 가지 그 런트 작업을 놓치고 싶어!

5 개의 필수 그럴링 작업으로 프론트 엔드 워크 플로우를 간소화합니다 인기있는 작업 러너 인 Grunt는 반복적 인 프론트 엔드 개발 작업을 크게 단순화합니다. 이 기사는 효율성과 코드 품질을 향상시키는 5 가지 강력한 Grunt 플러그인을 강조합니다. Gulp와 같은 다른 작업 주자가 존재하지만 (자세한 내용은 "Gulp.js 소개"참조) Grunt의 광범위한 플러그인 생태계는 여전히 귀중한 자산입니다. Grunt에 새로? "Grunt를 사용하여 반복 작업 자동화"또는 공식 Grunt Getting 시작 가이드를 확인하십시오. 키 테이크 아웃 :

: CSS에서 공급 업체 접두사를 자동화하여 브라우저 호환성에 대한 접두사를 추가하는 지루한 수동 프로세스를 제거합니다. :

는 사용되지 않은 CSS를 제거하고 파일 크기를 줄이고 페이지로드 시간을 개선합니다. 한계에 유의하십시오 : JavaScript 또는 사용자 상호 작용을 통해 동적으로 추가 된 클래스를 처리하지 않습니다.

• : 여러 grunt 작업을 동시에 실행하여 전체 빌드 시간, 특히 멀티 코어 프로세서에서 유리한 전체 빌드 시간을 크게 줄입니다. grunt-autoprefixer (이전
) :
• 는 바워 구성 요소를 HTML에 포함시켜 종속성을 관리 할 때 시간과 노력을 절약합니다. grunt-uncss : 프로젝트에 사용 된 기능 만 포함하여 라이브러리 크기를 최소화하는 사용자 정의 Modernizr 빌드를 생성합니다.
• 1. : 정복 공급 업체 접두사 CSS 작성에는 종종 실험적 특성과 공급 업체 접두사가 저글링됩니다. AutoPrefixer 라이브러리를 기반으로 가이를 단순화합니다. CSS를 구문 분석하고 데이터베이스를 사용하는 CAN을 기반으로 필요한 접두사를 추가합니다. 옵션을 사용하면 대상 브라우저 및 버전을 지정할 수 있으므로 필요한 접두사 만 포함되도록합니다. 샘플 구성 : grunt-concurrent 이 구성 프로세스 , 접두사 버전을 로 출력하여 주요 브라우저의 마지막 두 버전과 IE 8, 9 및 Opera 12.1.
2. : CSS를 슬림합니다 UNCSS에 의해 구동되는
• 는 프로젝트에서 사용되지 않은 CSS를 제거합니다. CSS 프레임 워크를 사용하면 최종 CSS 파일 크기를 크게 줄여서 다운로드가 더 빠르기 때문에 이것은 매우 중요합니다. 제한 사항 : grunt-wiredep JavaScript 또는 사용자 상호 작용을 통해 동적으로 추가 된 CSS 클래스를 감지 할 수 없습니다. 이 부분적으로 해결하려면 옵션 (문자 ​​클래스 이름 또는 정수 패턴을 수락)을 사용하십시오. 복잡한 선택기는 또한 오류를 유발할 수 있습니다. 이것을 별도의 스타일 시트로 분리하십시오

  

  3. : 손쉬운 종속성 관리

  bower (JavaScript/CSS 종속성 관리자)는 HTML에 구성 요소를 수동으로 포함해야합니다. 구성을 자동화하여 구성을 기반으로 종속성을 주입합니다 기본 구성 : grunt-wiredep 이것은 종속성을 에 주입합니다. 실행 후 , html은 다음과 같은 선이 포함됩니다.

  4. : 최적화 Modernizr

  modernizr은 최신 기능에 대한 브라우저 지원을 감지하는 데 도움이됩니다. 는 프로젝트가 사용하는 기능 만 포함하여 맞춤형 Modernizr 빌드를 만듭니다. 예제 구성 : grunt-wiredep

  5. : 속도 에 대한 병렬 처리 많은 작업이있는 프로젝트의 경우 는 동시에 실행하여 특히 강력한 기계에서 빌드 프로세스의 속도를 크게 높이고 있습니다.

  예 :

  이것은

  <code class="language-javascript">grunt.initConfig({
    autoprefixer: {
      options: {
        browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
      },
      dist: {
        src: 'src/css/main.css',
        dest: 'dest/css/main-prefixed.css'
      }
    }
  });</code>

  작업 하에서 동시에 와

  를 동시에 실행하고 작업하에 동시에 와 index.html가 동시에 실행됩니다. 이 선택은 grunt 기반 워크 플로를 향상시키기위한 견고한 기반을 제공합니다. 광대 한 Grunt 플러그인 생태계를 탐색하여 개발 프로세스를 간소화 할 수있는 더 많은 도구를 발견하십시오.

위 내용은 당신이 우승 한 5 가지 그 런트 작업을 놓치고 싶어!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!