Donnez la botte de grognement! Un guide pour utiliser le NPM comme outil de construction

De nombreux outils de construction et de flux de travail frontaux existent, notamment Grunt, Gulp, Brocoli et Jake. Ces outils automatisent les tâches de projet répétitives, telles que la minification, la concaténation, les tests et la compilation de code. Cependant, l'ajout d'une autre dépendance pourrait être inutile. Une alternative NODE.JS intégrée, NPM, gère efficacement bon nombre de ces tâches. Cet article explore les capacités de NPM en tant qu'outil de construction. Pour les débutants NPM, consultez notre guide d'introduction. Les exemples de code sont disponibles sur github.

Avantages clés de l'utilisation de NPM comme outil de construction:

• Dépendances réduites: Tirez parti du NPM (inclus avec Node.js) pour minimiser le besoin d'outils supplémentaires comme Grunt ou Gulp.
• Scripts NPM automatisés: Utilisez des scripts NPM dans package.json pour automatiser la lie, les tests et les minification, rationalisation de votre flux de travail.
• Processus de construction simplifiés: Combinez plusieurs scripts NPM pour un processus de construction complet (line, test, minification) exécuté séquentiellement.
• PRE / POST CROCKS pour un développement amélioré: Utilisez des pré- et des post-hooks pour automatiser les tâches comme la libellur
• Surveillance automatisée avec NPM: Configurer le NPM pour surveiller les modifications de fichiers et déclencher automatiquement des tâches (par exemple, minification), reproduire les fonctionnalités du grognement ou de gorgée avec une configuration plus simple.

Travailler avec les scripts NPM:

Créez un répertoire de projet ("buildTool"), accédez à lui et initialisez

en utilisant package.json: npm init

$ mkdir ~/buildtool && cd ~/buildtool
$ npm init

Répondez aux invites ou sautez-les; Vous remplacerez le contenu

par: package.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"
}

L'objet

définit les commandes. Liste des scripts disponibles avec scripts. Exécutez un script spécifique (par exemple, "info") à l'aide de npm run. Le npm run info Flag Sitiné Sortie NPM. -s

Implémentation de workflows communs:

Tout d'abord, ajoutons la lignée javascript à l'aide de jshint:

$ npm install jshint --save-dev

Créer la structure du répertoire de projet:

├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js

(sur les systèmes Unix, utilisez ) mkdir -p assets/css assets/scripts test && touch assets/css/main.css assets/scripts/main.js test/test.js

line:

Ajoutez du code à

(avec des erreurs intentionnelles): main.js

"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();

Mise à jour

pour inclure un script de peluche: package.json

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

Exécutez

pour peindre le code. Corrigez les erreurs et redémarrez pour vérifier. npm run lint -s

Tests (en utilisant mocha):

Installez Mocha:

npm install mocha --save-dev

Créer des tests simples dans

: test.js

$ mkdir ~/buildtool && cd ~/buildtool
$ npm init

Ajoutez un script de test à package.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"
}

Run npm test -s.

PRE et POST HOWS:

Pour exécuter le libellé avant les tests, ajoutez un pretest crochet:

$ npm install jshint --save-dev

Maintenant, npm test -s exécutera d'abord le script de peluche.

Minification du code:

installer uglify-js et clean-css:

├── assets
│   ├── css
│   │   └── main.css
│   └── scripts
│       └── main.js
├── dist
├── package.json
├── node_modules
└── test
    └── test.js

Créer des scripts de minification dans package.json:

"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();

Run npm run minify:js -s et npm run minify:css -s.

Recherche pour les changements (en utilisant watch):

installer watch:

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

Ajouter un script de montre:

npm install mocha --save-dev

Exécutez npm run watch pour minimer automatiquement les modifications du fichier.

Build Script:

combiner les scripts en un seul build script:

var assert = require("assert");
var Author = require("../assets/scripts/main.js").Author;

// ... (test code) ...

Run npm run build -s.

script serveur (en utilisant http-server):

installer http-server:

"scripts": {
  // ...
  "test": "echo '=> testing' && mocha test/"
}

Ajouter un script de serveur:

"scripts": {
  // ...
  "pretest": "npm run lint -s"
}

Run npm run server.

Conclusion:

NPM offre une alternative puissante et flexible aux outils de construction dédiés. Envisagez d'abord d'utiliser le NPM avant de recourir au grognement ou à gloquer pour des projets plus simples. La section FAQ ci-dessous fournit des clarifications supplémentaires.

(le reste de l'entrée d'origine, y compris les FAQ, est omis ici par concision, car il s'agit principalement d'une répétition de concepts déjà expliqués ci-dessus. La fonctionnalité et les exemples de base ont été préservés.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!