Mungkin ada langkah -langkah berikut
Proyek baru BEJS
Buat paket file baru.json
Buat file baru gruntfile.js
Jalankan tugas kasar di baris perintah
1. Proyek baru bejs
Kode sumber ditempatkan di bawah SRC, dan direktori memiliki dua file JS, Selector.js dan Ajax.js. Setelah kompilasi, kode ditempatkan di Dest, dan gerutuan ini akan dihasilkan secara otomatis.
2. Buat paket baru.json
package.json ditempatkan di direktori root dan berisi beberapa informasi meta proyek, seperti nama proyek, deskripsi, nomor versi, paket ketergantungan, dll. Itu harus dikirimkan ke SVN atau git seperti kode sumber. Struktur proyek saat ini adalah sebagai berikut
Package.json Konten harus mematuhi spesifikasi sintaks JSON, sebagai berikut
Salinan kode adalah sebagai berikut:
{
"Nama": "Bejs",
"Versi": "0.1.0",
"DevDependencies": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-Jshint": "~ 0,1.1",
"Grunt-Contrib-Uglify": "~ 0,1,2",
"Grunt-Contrib-Concat": "~ 0,1.1"
}
}
Grunt in DevDependencies telah dipasang di artikel sebelumnya, sementara Grunt-Contrib-Jshint/Grunt-Contrib-Uglify/Grunt-Contrib-Concat tidak diinstal. Tiga untuk Tiga Tugas
Pemeriksaan Sintaks Grunt-Contrib-JS
Kompresi Grunt-Contrib-Uglify, menggunakan Uglifyjs
File penggabungan Grunt-Contrib-Concat
Pada saat ini, buka alat baris perintah dan masukkan direktori root proyek, dan ketik perintah berikut: instal NPM
Periksa direktori root lagi dan menemukan bahwa ada direktori node_modules tambahan, termasuk empat subdirektori, lihat gambarnya
3. Buat file baru Gruntfile.js
Gruntfile.js juga ditempatkan di direktori root proyek. Hampir semua tugas didefinisikan dalam file ini. Ini adalah file JS biasa, di mana kode JS apa pun dapat ditulis alih -alih JSON. Seperti package.json, itu harus dikirimkan ke SVN atau git seperti kode sumber.
Gruntfile.js terdiri dari konten berikut
Fungsi pembungkus memiliki struktur berikut. Ini adalah cara khas menulis node.js. Gunakan ekspor untuk mengekspos API
Salinan kode adalah sebagai berikut:
module.exports = function (grunt) {
// lakukan hal-hal yang berhubungan dengan mendengus di sini
};
Konfigurasi Proyek dan Tugas
Muat plugin dan tugas Grunt
Kustomisasi Eksekusi Tugas
Contoh ini melengkapi tugas -tugas berikut
Gabungkan file di bawah SRC (Ajax.js/Selector.js) ke Domop.js
Kompres domop.js ke domop.min.js
Kedua file ditempatkan di direktori DEST
Gruntfile.js terakhir adalah sebagai berikut
Salinan kode adalah sebagai berikut:
module.exports = function (grunt) {
// Konfigurasi
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
domop: {
SRC: ['src/ajax.js', 'src/selector.js'],
Dest: 'Dest/domop.js'
}
},
Uglify: {
Opsi: {
Banner: '/*! < %= pkg.name %> < %= grunt.template.today ("yyyy-mm-dd") %> *// n '
},
membangun : {
src: 'dest/domop.js',
Dest: 'Dest/domop.min.js'
}
}
});
// Muat concat dan plugin Uglify, untuk penggabungan dan kompresi masing -masing
Grunt.LoadnpmTasks ('Grunt-Contrib-Concat');
Grunt.LoadnpmTasks ('Grunt-Contrib-Uglify');
// Daftarkan tugas
Grunt.RegisterTask ('default', ['concat', 'Uglify']);
};
4. Jalankan tugas kasar
Buka baris perintah, masukkan direktori root proyek, dan klik Grunt
Dari informasi pencetakan, terlihat bahwa penggabungan dan kompresi yang berhasil dihasilkan dan direktori DEST dan file yang diharapkan dihasilkan. Pada saat ini, ada lebih banyak Dest di direktori proyek, sebagai berikut
Ok, berikut adalah dua tugas umum, CONDAT dan UGLIFY, JShint, dll., Yang tidak diperkenalkan. Kode di Gruntfile.js tidak ditafsirkan satu per satu. Siswa yang tertarik dapat menemukannya dalam dokumen resmi Gruntjs.