Beri Grunt Boot! Panduan untuk menggunakan npm sebagai alat binaan

Banyak alat binaan dan aliran kerja front-end wujud, termasuk Grunt, Gulp, Broccoli, dan Jake. Alat ini mengautomasikan tugas -tugas projek berulang, seperti minifikasi, penggabungan, ujian, dan kompilasi kod. Walau bagaimanapun, menambah kebergantungan lain mungkin tidak perlu. Alternatif node.js terbina dalam, NPM, dengan berkesan mengendalikan banyak tugas ini. Artikel ini meneroka keupayaan NPM sebagai alat binaan. Untuk pemula NPM, berunding dengan panduan pengenalan kami. Contoh kod boleh didapati di GitHub.

Kelebihan utama menggunakan NPM sebagai alat binaan:

• Dependencies dikurangkan: Leverage NPM (disertakan dengan node.js) untuk meminimumkan keperluan untuk alat tambahan seperti Grunt atau Gulp.
• skrip NPM automatik: menggunakan skrip NPM dalam untuk mengautomasikan linting, ujian, dan minifikasi, menyelaraskan aliran kerja anda. package.json
• Proses Membina Ringkas: Campurkan skrip NPM berganda untuk proses membina komprehensif (linting, ujian, minifikasi) yang dilaksanakan secara berurutan.
• cangkuk pra/pos untuk pembangunan yang dipertingkatkan: Gunakan pra-dan pasca cangkuk untuk mengautomasikan tugas-tugas seperti linting sebelum menguji, memastikan kualiti kod.
Pemantauan automatik dengan NPM:
• Konfigurasi NPM untuk menonton perubahan fail dan secara automatik mencetuskan tugas (mis., Minification), mereplikasi fungsi grunt atau tong dengan persediaan yang lebih mudah.
Bekerja dengan skrip NPM:

3 jawab arahan atau melangkauinya; Anda akan menggantikan kandungan

dengan:

package.json npm init objek

mentakrifkan arahan. Senaraikan skrip yang tersedia dengan

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

. Jalankan skrip tertentu (mis., "Maklumat") menggunakan

. The package.json bendera silence output npm.

<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>

Melaksanakan aliran kerja biasa: scripts npm run npm run info Pertama, mari tambahkan javascript linting menggunakan jshint: -s

Buat struktur direktori projek:

(pada sistem unix, gunakan

)

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

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

linting:

mkdir -p assets/css assets/scripts test && touch assets/css/main.css assets/scripts/main.js test/test.js tambahkan beberapa kod ke (dengan kesilapan yang disengajakan):

kemas kini untuk memasukkan skrip serat:

main.js Run untuk membongkar kod. Betulkan kesilapan dan dijalankan semula untuk mengesahkan.

<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>

ujian (menggunakan mocha): package.json

Pasang mocha:

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

npm run lint -s Buat ujian mudah dalam

:

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

tambahkan skrip ujian ke package.json:

<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>

Run npm test -s.

cangkuk pra dan pos:

untuk menjalankan linting sebelum ujian, tambahkan pretest cangkuk:

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

sekarang, npm test -s akan menjalankan skrip lint terlebih dahulu.

Minifikasi kod:

Pasang uglify-js dan clean-css:

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

Buat skrip minifikasi dalam package.json:

<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>

run npm run minify:js -s dan npm run minify:css -s.

menonton perubahan (menggunakan watch):

Pasang watch:

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

Tambahkan skrip menonton:

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

run npm run watch untuk minify secara automatik pada perubahan fail.

Bina skrip:

menggabungkan skrip ke dalam skrip tunggal build:

<code class="language-javascript">var assert = require("assert");
var Author = require("../assets/scripts/main.js").Author;

// ... (test code) ...</code>

Run npm run build -s.

skrip pelayan (menggunakan http-server):

Pasang http-server:

<code class="language-json">"scripts": {
  // ...
  "test": "echo '=> testing' && mocha test/"
}</code>

tambahkan skrip pelayan:

<code class="language-json">"scripts": {
  // ...
  "pretest": "npm run lint -s"
}</code>

Run npm run server.

Kesimpulan:

NPM menawarkan alternatif yang kuat dan fleksibel untuk alat binaan khusus. Pertimbangkan untuk menggunakan NPM terlebih dahulu sebelum menggunakan Grunt atau Gulp untuk projek yang lebih mudah. Seksyen Soalan Lazim di bawah memberikan penjelasan lanjut.

(yang lain dari input asal, termasuk Soalan Lazim, ditinggalkan di sini untuk keringkasan, kerana kebanyakannya pengulangan konsep yang telah dijelaskan di atas. Fungsi dan contoh teras telah dipelihara.) 🎜>

Atas ialah kandungan terperinci Beri Grunt Boot! Panduan untuk menggunakan npm sebagai alat binaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!