Apa arti gulp di nodejs

Penulis：Eve Cole Waktu Pembaruan：2022-07-18 16:15:28

Gulp adalah alat konstruksi kode berbasis aliran dalam proses pengembangan front-end. Ini adalah pelari tugas otomatis berdasarkan Nodejs. Ini tidak hanya dapat mengoptimalkan sumber daya situs web, tetapi juga secara otomatis menyelesaikan pengujian, inspeksi, penggabungan, kompresi, dan pemformatan kode front-end. , secara otomatis menyegarkan browser, menghasilkan file penerapan, dan memantau file untuk mengulangi langkah-langkah yang ditentukan setelah perubahan. Dengan menggunakannya, kita tidak hanya dapat menulis kode dengan senang hati, tetapi juga meningkatkan efisiensi kerja kita secara signifikan.

Lingkungan operasi tutorial ini: sistem Windows 7, nodejs versi 16, komputer DELL G3.

1. Apa itu tegukan?

Gulp adalah alat konstruksi kode berbasis aliran dalam proses pengembangan front-end. Ini adalah alat untuk membangun proyek otomatis. Ini tidak hanya dapat mengoptimalkan sumber daya situs web, tetapi juga banyak tugas berulang selama proses pengembangan dapat diselesaikan secara otomatis menggunakan yang benar alat; menggunakannya, tidak hanya dapat menulis kode dengan senang hati, tetapi juga sangat meningkatkan efisiensi kerja kita.

Gulp adalah pelari tugas otomatis berdasarkan Nodejs. Ia dapat secara otomatis menyelesaikan pengujian, inspeksi, penggabungan, kompresi, pemformatan kode front-end, penyegaran browser otomatis, pembuatan file penerapan, dan pemantauan file untuk mengulangi langkah-langkah yang ditentukan setelah perubahan.

2. Apa itu aliran?

Aliran, aliran, bandingkan file dengan sungai, lalu satu sungai mengalir keluar dan sungai lainnya mengalir masuk. Beginilah cara gulp beroperasi pada aliran file. Output dari satu operasi digunakan sebagai input dari operasi lain, seperti ini

Operasi ini agak mirip dengan operasi rantai jQuery: $("").html("gg").css({}).parent().find("a").......; Saat menggunakan stream , gulp menghapus file perantara dan hanya menulis hasil akhir ke disk, membuat seluruh proses lebih cepat.

3. Pemasangan teguk

Gulp didasarkan pada lingkungan node. Pertama, pastikan node tersebut diinstal.

Setelah node diinstal, npm [(node package manager) nodejs package manager, digunakan untuk manajemen plug-in node (termasuk instalasi, uninstall, manajemen ketergantungan, dll.)] juga diinstal secara otomatis.

Karena plugin instalasi npm diunduh dari server asing, hal ini sangat dipengaruhi oleh jaringan dan dapat menyebabkan kelainan, jadi yang terbaik adalah menggunakan cnpm yang disediakan oleh Taobao untuk menginstal plugin node.

Instal cnpm: http://npm.taobao.org/

Setelah instalasi, periksa versi cnpm untuk memastikan instalasi berhasil

Selanjutnya Anda dapat menginstal gulp. Pertama, instal gulp secara global: cnpm install -g gulp

Lalu buka demo desktop/bbs2.0/src, masuk ke lingkungan bash, dan gunakan cnpm install gulp untuk menginstal gulp ke direktori saat ini.

Setelah instalasi berhasil, folder node_modules akan muncul, lalu buat package.json melalui cnpm init (file konfigurasi proyek node: Karena paket plug-in node relatif besar, manajemen versi tidak disertakan. Tulis informasi konfigurasi ke dalam paket .json dan Tambahkan ke manajemen versi dan pengembang lain dapat mengunduhnya sesuai)

Masukkan sepenuhnya dan file package.json akan dibuat ke folder saat ini, jika Anda mencoba menggunakan gulp untuk memulai gulp, Anda akan menemukan bahwa kesalahan akan dilaporkan.

Berdasarkan pesan kesalahan tersebut, kita perlu membuat file gulpfile.js

Lalu jalankan teguk

Anda akan menemukan bahwa "ok" yang kita perlukan telah dicetak, dan gulp pada dasarnya dapat berfungsi normal di sini.

4. Penggunaan plug-in yang biasa digunakan dalam gulp

1) Kompres file yang digabungkan

Buat file index.html baru

Buat dua file js baru di direktori js

Edit file gulpfile. sebagai berikut:

Karena kita menggunakan dua plug-in, gulp-uglify dan gulp-concat, pertama-tama kita harus menginstal kedua plug-in ini ke direktori saat ini.

Saat memasang plugin, gunakan --save-dev untuk menambahkannya ke package.json. Kita dapat memeriksa apakah file berhasil ditulis ke package.json.

Oke ya, lalu lanjutkan instalasi gulp-concat ke direktori. Setelah instalasi selesai, kita klik node_modules dan kita akan menemukan bahwa plugin berhasil diinstal

Oke, jika tidak ada error yang dilaporkan berarti berhasil. Selanjutnya periksa file tersebut dan temukan semua file.min.js di bawah src yang ingin kita kompres dan gabungkan.

2) tegukan

Untuk menginstal sass, Anda harus menginstal ruby terlebih dahulu dan masuk ke tutorial sass

Klik Install dan Anda akan diberikan petunjuk tentang cara menginstal sass dan ruby.

Setelah ruby berhasil terinstal, periksa versi ruby

Setelah berhasil, instal sass melalui gem

Jika Anda perlu menggunakan kompas (hubungan antara kompas dan sass setara dengan jQuery dan js), instal kompas.

Yang perlu diperhatikan di sini adalah ada masalah pada sumber permata, yang menyebabkan instalasi gagal: akan dilaporkan kesalahan: SSL_connect return=1 errno=0 state=SSLv3 baca sertifikat server B: verifikasi sertifikat gagal . Anda dapat mengubah sumber permata ke https://ruby.taobao.org/. Jika masih tidak berhasil, ubah ke http://gems.ruby-china.org/ masalah karakter.

Selanjutnya gunakan kompas buat untuk membuat proyek sass