Apakah maksud gulp dalam nodejs?

gulp ialah alat pembinaan kod berasaskan aliran dalam proses pembangunan bahagian hadapan Ia adalah pelari tugas automatik berdasarkan Nodejs Ia bukan sahaja boleh mengoptimumkan sumber tapak web, tetapi juga melengkapkan ujian dan pemeriksaan secara automatik kod bahagian hadapan , cantumkan, mampatkan, format, muat semula penyemak imbas secara automatik, jana fail penggunaan dan pantau fail untuk mengulangi langkah yang ditentukan selepas perubahan. Menggunakannya, kami bukan sahaja boleh menulis kod dengan gembira, tetapi juga meningkatkan kecekapan kerja kami.

Persekitaran pengendalian tutorial ini: sistem Windows 7, nodejs versi 16, komputer DELL G3.

1.

Gulp ialah alat pembinaan kod berasaskan aliran dalam proses pembangunan bahagian hadapan Ia adalah alat untuk membina projek automasi, ia bukan sahaja boleh mengoptimumkan sumber tapak web, tetapi juga mencipta banyak penduaan semasa proses pembangunan boleh diselesaikan secara automatik menggunakan alat yang betul, bukan sahaja ia boleh menjadi keseronokan untuk menulis kod, tetapi juga meningkatkan kecekapan kerja kami.

Gulp ialah pelari tugas automatik berdasarkan Nodejs Ia boleh melengkapkan ujian, pemeriksaan, penggabungan, pemampatan, pemformatan kod bahagian hadapan automatik, penjanaan fail penggunaan dan memantau fail secara automatik selepas perubahan. Ulangi langkah ini seperti yang dinyatakan.

2. Apakah itu aliran?

Alirkan, alir, bandingkan fail dengan sungai, kemudian satu sungai mengalir keluar dan sungai lain mengalir masuk. Beginilah cara tegukan beroperasi pada aliran fail Input operasi adalah seperti ini

Operasi ini agak serupa dengan operasi rantai jQuery: $("").html("gg").css({} ) .parent().find("a".......); Apabila menggunakan strim, gulp mengalih keluar fail perantaraan dan hanya menulis output akhir ke cakera, menjadikan keseluruhan proses lebih cepat.

3. Pemasangan gulp

Gulp adalah berdasarkan persekitaran nod Pertama, pastikan nod dipasang

Selepas nod dipasang, npm [(pengurus pakej nod) pengurus pakej nodejs, digunakan untuk pengurusan pemalam nod (termasuk pemasangan, nyahpasang, pengurusan pergantungan, dll.)] juga secara automatik dipasang

Kerana pemalam pemasangan npm dimuat turun dari pelayan asing, yang sangat terjejas oleh rangkaian dan boleh menyebabkan keabnormalan, jadi sebaiknya gunakan cnpm yang disediakan oleh Taobao untuk memasang pemalam nod.

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

Selepas pemasangan, semak versi cnpm untuk memastikan pemasangan berjaya

Seterusnya anda boleh memasang gulp Mula-mula pasang gulp secara global: cnpm install -g gulp

Kemudian. pergi ke demo desktop/bbs2.0/src, masukkan persekitaran bash, dan gunakan cnpm install gulp untuk memasang gulp ke dalam direktori semasa

Selepas pemasangan berjaya, folder node_modules akan muncul, dan kemudian buat package.json melalui cnpm init (fail konfigurasi projek nod: Oleh kerana pakej pemalam nod agak besar, pengurusan versi tidak disertakan dan konfigurasi maklumat ditulis ke dalam pakej .json dan tambahkannya pada pengurusan versi, pembangun lain boleh memuat turunnya dengan sewajarnya)

Tekan Enter sepenuhnya, dan fail package.json akan dijana ke folder semasa. Pada masa ini Cuba gunakan gulp untuk memulakan tegukan, anda akan mendapati bahawa ralat akan dilaporkan

Berdasarkan mesej ralat, kita perlu untuk mencipta fail gulpfile.js

Kemudian jalankan gulp

Anda akan mendapati bahawa "ok" yang kita perlukan dicetak, dan gulp pada dasarnya boleh berfungsi seperti biasa di sini.

4. Penggunaan fail .html pemalam gulp biasa

Cipta dua fail js baharu dalam direktori js

Edit fail gulpfile. Seperti berikut:

Memandangkan kami menggunakan dua pemalam, gulp-uglify dan gulp-concat, kami mesti memasang kedua-dua pemalam ini terlebih dahulu ke dalam direktori semasa

Semasa memasang pemalam, gunakan --save-dev untuk menambahkannya pada package.json Kami boleh menyemak sama ada fail itu berjaya ditulis dalam package.json

OK, jika anda memilikinya, kemudian terus memasang Gulp-Concat ke direktori. dipasang. Sekarang mari kita mulakan

OK, jika tiada ralat dilaporkan, ini bermakna kejayaan Seterusnya, semak fail dan mendapati terdapat fail all.min.js di bawah src yang kita mahu mampatkan dan gabungkan

　2) gulp-sass

Untuk memasang sass, anda mesti memasang ruby ​​​​dahulu ​​dan masukkan tutorial sass

Klik pada install dan anda akan diberi arahan tentang cara memasang sass dan memasang ruby ​​​​

Selepas ruby ​​​​dipasang dengan jayanya, semak versi ruby ​​

　Selepas berjaya, pasang sass through gem

　Jika anda perlu menggunakan kompas (hubungan antara kompas dan sass adalah bersamaan dengan jQuery dan js), pasang kompas dengan cara

Apa yang perlu yang perlu diperhatikan di sini ialah masalah dengan sumber permata, yang akan menyebabkan pemasangan gagal: ralat akan dilaporkan: SSL_connect return=1 errno=0 state=SSLv3 baca sijil pelayan B: ce rtificate verify failed error. Anda boleh menukar sumber permata kepada https://ruby.taobao.org/ Jika ia masih tidak berfungsi, tukarkannya kepada http://gems.ruby-china.org/ Jika ia tidak berkesan isu watak

Seterusnya, gunakan cipta kompas untuk mencipta projek sass

Selepas penciptaan berjaya, tiga fail, sass, lembaran gaya dan config.rb akan dijana secara automatik

Buka fail sass Mana-mana fail, edit

Kemudian edit gulpfile

Kemudian pasang gulp-sass dan gulp-compass ke direktori semasa

Selepas memulakan gulp, semak fail yang sepadan dalam lembaran gaya

OK, sass telah berjaya dikompilasi ke dalam css

　3) Mampat css melalui gulp-minify-css

Selepas memulakan teguk

　4) Gunakan gulp-load-plugin untuk membantu kami memuatkan pemalam

　gulp-load-plugins ialah pemalam yang secara automatik boleh membantu Anda memuatkan pemalam gulp dalam fail package.json

Kami hanya perlu memerlukan('gulp-load-plugins')();

Anda hanya perlu menggunakan pemalam.** di bawah (berbilang perkataan dinamakan dengan sarung unta)

　5) gulp-imagemin dan imagemin-pngquant memampatkan imej

6) gulp-livereload untuk menyegarkan semula halaman web secara automatik

Pasang dahulu gulp-livereload: cnpm install gulp gulp-livereload, di sini HTML yang dimampatkan dan sass yang dikompilasi dan dimampatkan disenaraikan

　 Kemudian dalam fail gulp

Untuk berjaya mencapai no Muat semula

1. Anda juga memerlukan sokongan muat semula pemalam chrome, jadi pergi ke atas dinding

2. Buka halaman web dalam persekitaran pelayan

Untuk lebih banyak pengetahuan berkaitan nod, sila lawati: tutorial nodejs!

Atas ialah kandungan terperinci Apakah maksud gulp dalam nodejs?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!