Ada langkah -langkah berikut:
1. Buat proyek baru
2. Buat paket file baru.json
3. Buat file baru Gruntfile.js
4. Jalankan tugas kasar di baris perintah
1. Proyek baru bejs
Kode sumber ditempatkan di bawah SRC, dan direktori memiliki dua aset subdirektori dan JS. JS mendesentralisasi selector.js dan ajax.js, yang telah dibahas dalam artikel sebelumnya cara menggabungkan dan mengompresnya. Artikel ini hanya berfokus pada direktori aset, yang berisi beberapa gambar dan file CSS. Dalam beberapa saat, dua sumber daya CSS Reset.CSS dan Style.css akan digabungkan dan dikompresi ke direktori DEST/Asset. Versi gabungan all.css, versi terkompresi all-min.css.
2. Buat paket baru.json
package.json ditempatkan di direktori root, dan artinya telah diperkenalkan di artikel sebelumnya. 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-Concat": "~ 0.1.1”,
"Grunt-CSS": "> 0.0.0"
}
}
Artikel sebelumnya dari Grunt-Contrib-Concat telah diperkenalkan. Grunt-CSS adalah plugin yang akan digunakan dalam artikel ini.
Pada saat ini, buka alat baris perintah dan masukkan direktori root proyek, dan ketik perintah berikut: instal NPM
Periksa direktori root 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.
Kode sumber adalah sebagai berikut
Salinan kode adalah sebagai berikut:
module.exports = function (grunt) {
// Konfigurasi
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
CSS: {
src: ['src/asset/*. css'],
Dest: 'Dest/Asset/All.css'
}
},
CSSMIN: {
CSS: {
SRC: 'Dest/Asset/All.css',
Dest: 'Dest/Asset/All-Min.css'
}
}
});
// Muat plugin Concat dan CSS, untuk penggabungan dan kompresi masing -masing
Grunt.LoadnpmTasks ('Grunt-Contrib-Concat');
Grunt.LoadnpmTasks ('Grunt-CSS');
// tugas default
Grunt.RegisterTask ('default', ['concat', 'cssmin']);
};
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
Pada titik ini, penggabungan dan kompresi CSS selesai.