Memulai Dengan Gulp.js

Gulp adalah alat berbasis Javascript yang memungkinkan Anda untuk mengotomatisasi bit dari alur kerja Anda. Otomasi dapat benar-benar menghemat waktu Anda sehari. Apakah Anda seorang pengembang atau desainer yang membuat gambar rangka HTML sesekali, saya mendorong Anda untuk menggali.

Pada artikel ini kita akan melihat dasar-dasar penggunaan Gulp - mulai dari instalasi hingga sintaks dasar dan beberapa contoh. Pada akhir artikel Anda seharusnya bisa temukan, instal, dan gunakan paket yang dibuat orang lain untuk Gulp untuk mengkompilasi SASS, mengoptimalkan gambar, membuat sprite, menggabungkan file, dan banyak lagi!

Menginstal Gulp

Jangan khawatir, instalasinya sangat mudah. Kita harus menggunakan terminal di OSX dan Linux, atau command prompt untuk Windows. Saya akan menyebutnya sebagai Terminal mulai sekarang.

Buka dan ketik npm -v dan tekan enter. Jika Anda melihat nomor versi yang ditampilkan, Anda sudah menginstal Node - ini adalah ketergantungan untuk Gulp.

Jika Anda mendapatkan “perintah tidak ditemukan” (atau kesalahan serupa), buka halaman unduhan Node.js dan pilih paket yang sesuai untuk sistem Anda. Setelah diinstal, perintah npm akan tersedia di terminal.

Memasang Gulp juga mudah. Rekatkan perintah berikut ke terminal, hanya itu:

npm instal --global tegp

Ini akan menginstal perintah Gulp yang akan tersedia secara global di sistem Anda.

Menambahkan Gulp ke Proyek

Gulp sekarang diinstal, tetapi kita perlu menambahkannya ke setiap proyek yang kita butuhkan, secara terpisah. Buat folder kosong sekarang dan navigasikan ke sana di terminal Anda. Saat berada di folder untuk proyek, gunakan perintah berikut:

npm instal --save-dev tegukan

Ini harus membuat folder node_modules dan file npm-debug.log di folder proyek Anda. Ini digunakan oleh Gulp untuk melakukan hal itu untuk proyek Anda, Anda tidak perlu memikirkannya pada tahap ini.

Alasan kita perlu menambahkan Gulp ke setiap proyek spesifik adalah itu setiap proyek memiliki persyaratan berbeda. Satu dapat memanggil untuk SASS, yang lain untuk Kurang. Satu mungkin menggunakan Coffeescript, yang lain mungkin tidak, dan sebagainya.

Gulpfile

Gulpfile adalah tempat keajaiban terjadi, di situlah Anda mendefinisikan otomasi yang Anda butuhkan dan ketika Anda ingin itu terjadi. Mari kita buat tugas default kosong dengan membuat file bernama gulpfile.js dan menempelkan kode berikut ke dalamnya.

var meneguk = membutuhkan ('tegukan'); gulp.task ('default', function () // Ini tidak ada artinya untuk saat ini, kami akan segera menambahkan fungsionalitas);

Setelah file ini disimpan, Anda dapat kembali ke terminal dan menjalankan perintah tegukan sendiri. Gulp mendeteksi proyek yang menjalankannya dan menjalankan tugas default - yang baru saja kita buat. Anda harus melihat sesuatu seperti ini:

Tidak ada yang benar-benar terjadi di sini, karena tugasnya kosong, tetapi berfungsi dengan baik. Sekarang, mari kita mulai dengan beberapa contoh yang tepat!

Menyalin File

Ini membosankan, saya akui juga, tapi ini akan membantu Anda memahami apa yang terjadi dengan mudah.

Di folder proyek Anda buat file bernama to_copy.txt , dan folder bernama dev. Ayo masuk ke Gulpfile kami dan buat tugas baru dengan nama salinan.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Baris pertama mendefinisikan tugas yang dinamai copy. Dalam hal ini kami menggunakan gulp.src untuk menentukan file mana yang kami targetkan dengan tugas ini - dalam hal ini adalah file tunggal bernama to_copy.txt.

Kami kemudian mem-pipe file-file ini ke fungsi gulp.dest yang menentukan di mana kami ingin meletakkan file-file ini - saya telah menggunakan direktori dev.

Kembali ke terminal Anda dan ketik teguk kopi untuk menjalankan tugas ini, itu harus menyalin file yang ditentukan ke direktori yang ditentukan, sesuatu seperti ini:

Perintah pipa adalah jantung dari Gulp. Ini adalah cara yang efisien untuk memindahkan data antar perintah. Perintah src menentukan file yang disalurkan ke perintah dest. Dalam skenario yang lebih kompleks, kami akan mengirim file ke perintah lain sebelum menentukan tujuan.

Anda juga harus menyadari bahwa sumbernya dapat diberikan sebagai file tunggal, atau banyak file. Jika kami memiliki folder bernama produksi dan kami ingin memindahkan semua file dari file kami pengembangan folder ke dalamnya, kita bisa menggunakan perintah berikut:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Karakter bintang akan cocok dengan apa pun dalam direktori. Anda juga bisa mencocokkan semua file dalam semua subdirektori, dan melakukan segala macam pencocokan mewah lainnya. Lihatlah dokumentasi node-glob untuk info lebih lanjut.

Kompilasi SASS

Mengompilasi lembar gaya dari file SASS adalah tugas umum bagi pengembang. Itu bisa dilakukan dengan Gulp dengan cukup mudah, kita harus melakukan beberapa persiapan. Terlepas dari perintah dasar seperti src, dest dan sejumlah lainnya, semua fungsionalitas ditambahkan melalui addon pihak ketiga. Begini cara saya menggunakannya.

saya mengetik SASS Gulp ke Google, hasil pertama biasanya yang saya butuhkan, Anda harus menemukan halaman untuk paket SASS. Ini menunjukkan kepada Anda cara menginstalnya (npm install gulp-sass). Kemungkinannya adalah Anda harus menggunakan sudo untuk menginstalnya sebagai administrator, jadi itu mungkin (sudo npm install gulp-sass) .

Setelah selesai, Anda dapat menggunakan sintaks yang ditentukan paket untuk mengkompilasi kode Anda. Untuk melakukan ini, buat file bernama styles.scss dengan konten berikut:

$ primary: # ff9900; body background: $ primary; 

Sekarang buat tugas Gulp berikut di Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Sebelum menjalankan perintah, jangan lupa untuk 'meminta' paket di bagian atas Gulpfile seperti ini:

var sass = membutuhkan ('gulp-sass');

Ketika Anda berlari teguk sass, semua file dengan ekstensi scss akan disalurkan ke fungsi sass, yang akan mengubahnya menjadi css. Ini kemudian disalurkan ke fungsi tujuan yang menempatkannya di folder css.

Menonton File Dan Folder

Sejauh ini semua berguna, tetapi kita masih perlu mengetikkan perintah setiap kali kami ingin menjalankan tugas, yang tidak terlalu efisien, terutama dalam hal perubahan stylesheet. Gulp memungkinkan Anda untuk menonton file untuk perubahan dan menjalankan perintah secara otomatis.

Di Gulpfile, buat perintah bernama mengotomatisasikan yang akan menggunakan perintah arloji untuk menonton satu set file untuk perubahan, dan menjalankan perintah tertentu ketika file berubah.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Jika Anda mengetik menelan otomatis ke terminal, ia akan memulai dan menyelesaikan tugas, tetapi tidak akan kembali ke prompt karena sedang memantau perubahan. Kami telah menetapkan bahwa kami ingin menonton semua file scss di direktori root dan jika mereka berubah, kami ingin menjalankan perintah sass yang telah kami atur sebelumnya.

Jika sekarang Anda mengubah file style.scss Anda harus dikompilasi ke file css dalam direktori css secara otomatis.

Menjalankan Banyak Tugas

Ada banyak situasi di mana Anda mungkin ingin menjalankan banyak tugas. Saat menonton folder javascript Anda, Anda mungkin ingin mengkompilasi menggabungkan dua file dan kemudian melanjutkan untuk memperkecil mereka. Ada dua cara untuk menyelesaikannya.

Jika tugas terkait, saya suka rantai mereka. Contoh yang baik adalah rangkuman dan minifikasi file javascript. Kami pertama-tama mem-pipe file-file kami ke action concat, kemudian pipe-nya ke gulp-uglify, kemudian gunakan fungsi tujuan untuk menampilkannya.

Jika tugas tidak berhubungan Anda bisa panggilan beberapa tugas. Contohnya adalah tugas di mana kita ingin menggabungkan dan memperkecil skrip kita dan juga mengkompilasi SASS kita. Inilah dia Gulpfile penuh tentang bagaimana itu akan terlihat.

var meneguk = membutuhkan ('tegukan'); var uglify = butuhkan ('gulp-uglify'); var concat = butuhkan ('gulp-concat'); var sass = membutuhkan ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['script', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Jika Anda mengetik naskah tegukan ke terminal, semua file javascript dalam direktori js akan digabungkan, output ke direktori utama, kemudian uglified dan disimpan ke direktori utama.

Jika Anda mengetik teguk sass, semua file scss Anda akan dikompilasi dan disimpan ke direktori css.

Jika Anda mengetik teguk (tugas default), Anda skrip tugas akan dijalankan, diikuti oleh Anda gaya tugas.

Itu menelan otomatis tugas melihat beberapa folder untuk perubahan dalam file scss dan js kami dan akan melakukan kedua tugas yang telah kami tetapkan, jika perubahan terdeteksi.

Ikhtisar

Menggunakan Gulp tidak sulit, pada kenyataannya, banyak orang lebih menyukainya daripada Grunt karena sintaksinya yang lebih sederhana. Ingat langkah yang harus diambil saat membuat otomatisasi baru:

• Cari plugin
• Pasang plugin
• Membutuhkan plugin di Gulpfile Anda
• Gunakan sintaks dalam dokumentasi

Lima perintah yang tersedia di Gulp (tugas, jalankan, tonton, src, dest) adalah satu-satunya yang perlu Anda ketahui, semua addon pihak ketiga memiliki dokumentasi yang bagus. Berikut adalah daftar beberapa hal yang saya gunakan yang dapat Anda mulai sekarang:

• Mengoptimalkan gambar dengan optimasi-tegukan-gambar
• Membuat sprite gambar dengan menelan-sprite
• Menggabungkan file dengan gulp-concat
• Meminimalkan file dengan gulp-uglify
• Menghapus file dengan gulp-del
• Linting Javascript dengan gulp-jslint
• JSON linting dengan gulp-jsonlint
• Autoprefix CSS dengan gulp-autoprefixer
• Cari dan ganti menggunakan gulp-frep
• Minify CSS with gulp-minify-css