Pengantar Gulp:
Gulp adalah alat untuk membangun kode dalam pengembangan front-end dan alat yang ampuh untuk membangun proyek otomatisasi. Ini tidak hanya dapat mengoptimalkan sumber daya situs web, tetapi juga banyak tugas yang berulang dapat secara otomatis diselesaikan dengan alat yang benar selama proses pengembangan. Dengan dia, kita tidak hanya dapat menulis kode dengan senang hati, tetapi juga sangat meningkatkan efisiensi kerja kita.
Gulp adalah pelari tugas otomatis berdasarkan nodeJS. Ini dapat secara otomatis menyelesaikan pengujian, pemeriksaan, penggabungan, kompresi, pemformatan, peramban otomatis yang menyegarkan, penerapan pembuatan file file seperti JavaScript/Coffee/Sass/Less/HTML/Image/CSS, dan dengarkan mengulangi langkah -langkah yang ditentukan setelah file diubah. Dalam hal implementasi, ia meminjam gagasan pipa dari sistem operasi UNIX. Output dari level sebelumnya secara langsung menjadi input dari level berikutnya, membuat operasi sangat sederhana. Melalui artikel ini, kita akan belajar cara menggunakan Gulp untuk mengubah proses pengembangan, membuat pengembangan lebih cepat dan lebih efisien.
Gulp sangat mirip dengan Grunt, tetapi dibandingkan dengan operasi IO yang sering dari Grunt, operasi streaming Gulp dapat menyelesaikan pekerjaan konstruksi lebih cepat dan lebih nyaman.
Ketika saya belajar menelan hari ini, saya menggunakan Gulp-Uglify untuk mengompres modul JS. Saya mengalami masalah - saat menggunakan Gulp.Watch untuk mendengarkan perubahan dalam file JS, saya mengalami masalah kompresi berulang.
Struktur direktori adalah sebagai berikut:
Kode Gulpfile.js adalah sebagai berikut:
var gulp = membutuhkan ('gulp'); var uclify = membutuhkan ('gulp-uglify'); var rename = membutuhkan ('gulp-rename'); gulp.task ('uclify', function () {gulp.src ('./ src/js/*. js'). PIPE (ganti nama ({sufiks: '. gulp.watch ('./ src/js/*. js', ['Uglify']); watcher.on ('ubah', function (event) {console.log ('file' + event.path + 'adalah' + event.type + ', menjalankan tugas ...');});Setelah mengeksekusi perintah Gulp Uglify:
*.Min.js yang sesuai juga dihasilkan:
Tetapi ketika saya membuka file kong.js dan menyimpannya lagi, situasi berikut terjadi:
Simpan sekali dan kemudian tekan lagi. Akan ada banyak file terkompresi JS seperti *.min.min ... js, dan hanya nilai kong.min.js pertama yang akan berubah menurut kong.js. Kemudian, saya memeriksa dokumen berikut dan seseorang menulis tentang Gulp-Uglify dan menemukan bahwa itu dapat digunakan! Untuk memfilter min.js, mencegahnya dari kompres, ubah kode:
var gulp = membutuhkan ('gulp'); var uclify = membutuhkan ('gulp-uglify'); var rename = membutuhkan ('gulp-rename'); gulp.task ('uclify', function () {gulp.src (['./ Src/js/*. Js', '! ./ Src/js/*. Min.js']). PIPE (ganti nama ({suffix: '. Min'})). PIPE (UGLIFY ()). PIPE (gulp.dest ('./ SRC/JS')); gulp.watch ('./ src/js/*. js', ['Uglify']); watcher.on ('ubah', function (event) {console.log ('file' + event.path + 'adalah' + event.type + ', menjalankan tugas ...');});Di atas adalah pengantar editor untuk Gulp-Uglify dan gulp.watch () ketika digunakan bersama dengan gulp.watch (). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!