Marie Kondo 조직 치료에 대해 grunt 작업을 제공하자

Webpack 및 NPM 스크립트는 최신 JavaScript 개발, 작업 처리 및 번들링을 지배합니다. 그러나 많은 프로젝트는 여전히 Grunt에 의존합니다. 블록의 최신 아이는 아니지만 Grunt는 여전히 신뢰할 수있는 작업장으로 남아 있습니다. 이 기사에서는 기존 Grunt 프로젝트를 간소화하고 개선하는 전략을 살펴 봅니다.

jit-grunt 로로드하는 과급 작업

grunt.loadNpmTasks 사용하여 각 grunt 작업을 수동으로로드하는 것은 지루합니다. load-grunt-tasks 자동화를 제공하지만 jit-grunt 더 빠른 성능을 제공하며 특히 대규모 프로젝트에 유리합니다.

성능 비교 :

jit-grunt 없이 :

 <code>loading tasks 5.7s ▇▇▇▇▇▇▇▇ 84% assemble:compile 1.1s ▇▇ 16% Total 6.8s</code>

jit-grunt 와 함께 :

 <code>loading tasks 111ms ▇ 8% loading assemble 221ms ▇▇ 16% assemble:compile 1.1s ▇▇▇▇▇▇▇▇ 77% Total 1.4s</code>

상당한 속도 개선! jit-grunt 필요에 따라 작업을로드 하여이 최적화를 달성합니다.

jit-grunt 사용 :

1. 설치 : npm install jit-grunt --save
2. 작업 로딩 명세서를 대체합니다.

 module.exports = function (grunt) {
  // 개별 grunt 대신 grunt.loadnpmtasks 호출 ...
  요구 ( 'jit-grunt') (grunt);

  grunt.initconfig ({});
}

구성로드 간소화

다음 단계는 GruntFile을 더 작고 관리하기 쉬운 구성 파일로 해체하는 것입니다. monolithic gruntfile.js 대신 구성을 별도의 파일로 구성하십시오. 효율적인 하중을 위해 load-grunt-configs 사용하겠습니다.

load-grunt-configs 사용 :

 module.exports = function (grunt) {
  요구 ( 'jit-grunt') (grunt);

  const configs = require ( 'load-grunt-configs') (grunt, {
    구성 : {src : 'tasks/*. js'}
  });

  grunt.initconfig (configs);
  grunt.registertask ( 'default', [ 'cssmin']);
}

또는 Grunt는 기본 작업 로딩을 제공합니다 : grunt.loadTasks('tasks') . 그러나 구성에 이상적이지 않지만 파일을 즉시 실행합니다. 이를 활용하려면 grunt.config 사용하여 외부 파일 자체 내에서 작업을 구성해야합니다.

grunt.loadTasks 사용 예 :

 // tasks/mytask.js
module.exports = function (grunt) {
  grunt.config ( 'mytask', {
    옵션 : 'value'
  });
};

// gruntfile.js
module.exports = function (grunt) {
  요구 ( 'jit-grunt') (grunt);
  grunt.initconfig ({});
  grunt.loadtasks ( '작업');
  grunt.registertask ( 'default', [ 'mytask']);
};

고급 구성 조직 : 기능 별 그룹화

파일 이름으로 작업을 구성하는 것이 항상 직관적 인 것은 아닙니다. 보다 효과적인 접근 방식은 기능 또는 기능별로 구성하는 것입니다.

수많은 개별 작업 파일 대신 기능 (예 : styles.js , scripts.js , images.js )을 나타내는 파일을 만듭니다. grunt.config.merge 사용하여 관련 작업에 대한 구성을 결합하여 덮어 쓰기를 피하십시오.

예 : 스타일 구성 :

 // tasks/styles.js
module.exports = function (grunt) {
  grunt.config ( 'sass', { / * ... * /});
  grunt.config ( 'postcss', { / * ... * /});
  grunt.config.merge ({
    보다: {
      스타일 : {
        파일 : [ '소스/스타일/*. scss'],
        작업 : [ 'Sass', 'Postcss']
      }
    }
  });
};

이 접근법은 가독성과 유지 관리를 향상시켜 프로젝트 구조에 대한 명확한 개요를 제공합니다.

결론

최신 기술은 아니지만 Grunt는 적절한 조직에서 실행 가능한 옵션으로 남아 있습니다. jit-grunt , load-grunt-configs (또는 신중한 작업 정의가있는 grunt.loadTasks )와 기능 기반 구성 구조를 활용하면 Grunt 프로젝트의 효율성과 유지 관리를 크게 향상시킬 수 있습니다. 자세한 내용과 가능성은 Grunt 문서에 문의하십시오.

위 내용은 Marie Kondo 조직 치료에 대해 grunt 작업을 제공하자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!