Grunt에게 부츠를 줘! NPM을 빌드 도구로 사용하는 안내서

Grunt, Gulp, Broccoli 및 Jake를 포함한 수많은 프론트 엔드 빌드 및 워크 플로 도구가 존재합니다. 이 도구는 미니 화, 연결, 테스트 및 코드 컴파일과 같은 반복 프로젝트 작업을 자동화합니다. 그러나 다른 종속성을 추가하면 불필요 할 수 있습니다. 내장 Node.js 대안 인 NPM은 이러한 많은 작업을 효과적으로 처리합니다. 이 기사는 빌드 도구로서 NPM의 기능을 탐색합니다. NPM 초보자는 입문 안내서를 참조하십시오. 코드 예제는 github에서 사용할 수 있습니다 빌드 도구로 NPM을 사용하는 주요 장점 :

감소 된 종속성 : NPM (node.js 포함)을 활용하여 Grunt 또는 Gulp와 같은 추가 도구의 필요성을 최소화합니다. 자동화 된 NPM 스크립트 : 내에서 NPM 스크립트를 사용하여 라인, 테스트 및 미니 화를 자동화하여 워크 플로우를 간소화합니다. 단순화 된 빌드 프로세스 :

여러 NPM 스크립트를 종합적인 빌드 프로세스 (Linting, Testing, Minification)를 순차적으로 실행합니다. 향상된 개발을위한 사전/포스트 후크 : 사전 및 후 후크를 활용하여 테스트 전 라인과 같은 작업을 자동화하여 코드 품질을 보장합니다. npm으로 자동 모니터링 :

파일 변경을 시청하고 자동으로 작업 (예 : 미니 화)으로 NPM을 구성하여 더 간단한 설정으로 Grunt 또는 Gulp의 기능을 복제합니다. NPM 스크립트 작업 : 면

프롬프트에 대답하거나 건너 뛰십시오.

컨텐츠를 다음과 같이 대체 할 것입니다
• 객체는 명령을 정의합니다. 사용 가능한 스크립트를 로 나열하십시오. 를 사용하여 특정 스크립트 (예 : "Info")를 실행하십시오. 플래그는 npm 출력을 침묵시킨다 일반 워크 플로 구현 :
먼저, jshint :
• 를 사용하여 JavaScript Linting을 추가합시다 프로젝트 디렉토리 구조를 만듭니다 : package.json (유닉스 시스템에서 )
• 를 사용하십시오 라인 : 의도적 인 오류가있는 에 일부 코드를 추가하십시오
• 업데이트 보풀 스크립트를 포함하려면 : run 코드를 보라. 오류를 수정하고 다시 실행하여 확인하십시오 테스트 (Mocha 사용) :
모카를 설치하십시오 :
• : 에서 간단한 테스트를 만듭니다

  <code class="language-bash">$ mkdir ~/buildtool && cd ~/buildtool
  $ npm init</code>

  테스트 스크립트를

  : 에 추가하십시오 package.json

  run

  <code class="language-json">{
    "name": "buildtool",
    "version": "1.0.0",
    "description": "npm as a build tool",
    "dependencies": {},
    "devDependencies": {},
    "scripts": {
      "info": "echo 'npm as a build tool'"
    },
    "author": "SitePoint",
    "license": "ISC"
  }</code>

  .

  프리 및 포스트 후크 : 테스트하기 전에 린팅을 실행하려면 npm test -s hook :

  를 추가하십시오

  이제, 는 먼저 보풀 스크립트를 실행합니다 코드 미니 화 :

  설치 pretest 및 :

  <code class="language-bash">$ npm install jshint --save-dev</code>

  : 에서 미니 화 스크립트를 만듭니다 npm test -s

  run 및

  변경 사항을보고 ( 사용) : install

  :

  시계 스크립트 추가 : uglify-js clean-css run 는 파일 변경을 자동으로 조정합니다 빌드 스크립트 :

  스크립트를 단일

  <code class="language-bash">├── assets
  │   ├── css
  │   │   └── main.css
  │   └── scripts
  │       └── main.js
  ├── dist
  ├── package.json
  ├── node_modules
  └── test
      └── test.js</code>

  스크립트로 결합하십시오

  package.json run

  .

  <code class="language-javascript">"use strict";
  
  var Author = new function(name){
    this.name = name || "Anonymous";
    this.articles = new Array();
  }
  
  Author.prototype.writeArticle = function(title){
    this.articles.push(title);
  };
  
  Author.prototype.listArticles = function(){
    return this.name + " has written: " + this.articles.join(", ");
  };
  
  exports.Author = Author;
  
  var peter = new Author("Peter");
  peter.writeArticle("A Beginners Guide to npm");
  peter.writeArticle("Using npm as a build tool");
  peter.listArticles();</code>

  서버 스크립트 ( 사용) :

  npm run minify:js -s install npm run minify:css -s :

  서버 스크립트 추가 :

  run watch. 결론 :

  NPM은 전용 빌드 도구에 대한 강력하고 유연한 대안을 제공합니다. 더 간단한 프로젝트를 위해 Grunt 또는 Gulp에 의지하기 전에 NPM을 먼저 사용하는 것을 고려하십시오. 아래의 FAQ 섹션은 추가 설명을 제공합니다

  (FAQ를 포함한 나머지 원래 입력은 여기에서 이미 위에서 설명한 개념의 반복이기 때문에 간결하게 생략됩니다. 핵심 기능과 예제가 보존되었습니다.) watch

  <code class="language-json">"scripts": {
    "info": "echo 'npm as a build tool'",
    "lint": "echo '=> linting' && jshint assets/scripts/*.js"
  }</code>

위 내용은 Grunt에게 부츠를 줘! NPM을 빌드 도구로 사용하는 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!