Bermula Dengan Gulp.js

Gulp adalah alat berasaskan Javascript yang membolehkan anda mengotomatisasi bit dari alur kerja anda. Automasi secara harfiah boleh menjimatkan jam anda sehari. Sama ada anda pemaju atau pereka yang mencipta wireframe HTML sekarang dan kemudian, saya menggalakkan anda untuk menggali.

Dalam artikel ini kita akan melihat asas-asas menggunakan Gulp - dari pemasangan kepada sintaks asas dan beberapa contoh. Pada akhir artikel ini anda harus dapat cari, pasang dan gunakan pakej yang telah dibuat oleh orang lain untuk Gulp untuk menyusun SASS, mengoptimumkan imej, membuat sprite, menggabungkan fail, dan banyak lagi!

Memasang Gulp

Jangan bimbang, pemasangan sangat mudah. Kami perlu menggunakan terminal di OSX dan Linux, atau arahan segera untuk Windows. Saya akan merujuknya sebagai Terminal dari sekarang.

Buka dan taipkan npm -v dan tekan enter. Sekiranya anda melihat nombor versi dipaparkan, anda telah memasang Node - ini adalah pergantungan untuk Gulp.

Sekiranya anda mendapat “arahan tidak dijumpai” (atau kesilapan yang sama), pergi ke halaman muat turun Node.js dan pilih pakej yang sesuai untuk sistem anda. Setelah dipasang, arahan npm akan tersedia di terminal.

Memasang Gulp sama mudahnya. Tampal perintah berikut ke terminal, itu sahaja:

npm install - gulp global

Ini akan memasang perintah Gulp yang akan tersedia di seluruh dunia pada sistem anda.

Menambah Gulp Untuk Projek A

Gulp kini dipasang, tetapi kita perlu menambahnya kepada setiap projek yang kita perlukan untuk, secara berasingan. Buat folder kosong sekarang dan arahkan ke terminal itu. Semasa dalam folder untuk projek, gunakan arahan berikut:

npm install --save-dev gulp

Ini harus membuat folder node_modules dan fail npm-debug.log dalam folder projek anda. Ini digunakan oleh Gulp untuk melakukan perkara itu kepada projek anda, anda tidak perlu memikirkannya pada peringkat ini.

Sebabnya kita perlu menambah Gulp untuk setiap projek tertentu ialah setiap projek mempunyai keperluan yang berbeza. Seseorang boleh memanggil SASS, satu lagi untuk Kurang. Orang boleh menggunakan Coffeescript, yang lain mungkin tidak, dan sebagainya.

The Gulpfile

The Gulpfile adalah tempat sihir berlaku, di mana anda menentukan automasi yang anda perlukan dan apabila anda mahu mereka berlaku. Mari buat tugas lalai kosong dengan membuat fail bernama gulpfile.js dan menyisipkan kod berikut ke dalamnya.

var gulp = require ('gulp'); gulp.task ('lalai', fungsi () // Ini tidak berfungsi buat masa ini, kami akan menambah fungsi tidak lama lagi);

Sebaik sahaja fail ini disimpan, anda boleh kembali ke terminal anda dan jalankan perintah gulp sendiri. Gulp mengesan projek yang sedang dijalankan dan menjalankan tugas lalai - yang baru kami buat. Anda sepatutnya melihat sesuatu seperti ini:

Tidak ada yang benar-benar berlaku di sini, kerana tugas itu kosong, tetapi ia berfungsi dengan baik. Sekarang, mari kita pergi dengan beberapa contoh yang betul!

Menyalin Fail

Ini adalah satu membosankan, saya akan mengakui banyak, tetapi ia akan membantu anda memahami apa yang berlaku dengan mudah.

Dalam folder projek anda, buat fail bernama to_copy.txt , dan folder bernama dev. Mari kita masuk ke Gulpfile kami dan buat tugas baru bernama salinan.

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

Baris pertama menentukan tugas yang dinamakan salinan. Di dalam ini kita menggunakan gulp.src untuk menentukan fail mana yang kita targetkan dengan tugas ini - dalam kes ini ia satu fail bernama to_copy.txt.

Kami kemudian paip fail ini ke fungsi gulp.dest yang menentukan di mana kita mahu meletakkan fail ini - Saya telah menggunakan direktori dev.

Kembali ke terminal anda dan taipkan menipu salinan untuk menjalankan tugas ini, ia perlu menyalin fail yang dinyatakan ke direktori yang ditentukan, seperti ini:

Perintah paip berada di tengah-tengah Gulp. Ini adalah cara yang berkesan untuk memindahkan data antara arahan. Perintah src menentukan fail yang disalurkan ke perintah dest. Dalam senario yang lebih rumit, kami akan memindahkan fail kami kepada arahan lain sebelum menentukan destinasi.

Anda juga perlu sedar bahawa sumber boleh diberikan sebagai satu fail, atau berbilang fail. Jika kita mempunyai folder bernama pengeluaran dan kami mahu memindahkan semua fail dari kami pembangunan folder ke dalamnya, kita boleh menggunakan arahan berikut:

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

Watak bintang akan memadankan apa-apa dalam direktori. Anda juga boleh memadankan semua fail dalam semua subdirektori, dan melakukan pelbagai pencocokan mewah yang lain. Lihatlah dokumentasi glob-node untuk maklumat lanjut.

Menyusun SASS

Menyusun lembaran gaya keluar dari fail SASS adalah tugas biasa untuk pemaju. Ia boleh dilakukan dengan Gulp dengan mudah, kita perlu melakukan beberapa persiapan. Selain daripada arahan asas seperti src, dest dan beberapa orang lain, semua fungsi ditambah melalui addon pihak ketiga. Berikut adalah cara saya menggunakannya.

Saya menaip SASS Gulp ke Google, keputusan pertama biasanya yang saya perlukan, anda perlu mencari halaman untuk pakej SASS. Ia menunjukkan kepada anda cara memasangnya (npm install gulp-sass). Kemungkinannya anda perlu menggunakan sudo untuk memasangnya sebagai pentadbir, jadi mungkin akan menjadi (sudo npm install gulp-sass) .

Sebaik sahaja selesai, anda boleh menggunakan sintaks yang ditetapkan oleh pakej untuk menyusun kod anda. Untuk melakukan ini, buat fail bernama styles.scss dengan kandungan berikut:

$ utama: # ff9900; badan latar belakang: $ primary; 

Sekarang buat tugas Gulp berikut dalam Gulpfile.

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

Sebelum menjalankan arahan, jangan lupa untuk 'memerlukan' pakej di bahagian atas Gulpfile seperti ini:

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

Apabila anda berlari langgar sass, semua fail dengan sambungan scss akan disalurkan ke fungsi sass, yang akan mengubahnya menjadi css. Ini kemudian disalurkan ke fungsi destinasi yang meletakkannya dalam folder css.

Menonton Fail Dan Folder

Sejauh ini ini semua berguna, tetapi kita masih perlu menaip perintah setiap masa kami ingin menjalankan tugas, yang tidak begitu cekap, terutamanya apabila terdapat perubahan stylesheet. Gulp membolehkan anda melihat fail untuk perubahan dan menjalankan arahan secara automatik.

Dalam Gulpfile, buat arahan bernama automate yang akan menggunakan arahan menonton untuk menonton satu set fail untuk perubahan, dan menjalankan arahan tertentu apabila fail berubah.

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

Jika anda menaip gulp automate ke dalam terminal, ia akan bermula dan selesai tugas, tetapi ia tidak akan kembali kepada prompt kerana ia memantau perubahan. Kami telah menyatakan bahawa kami ingin menonton semua fail scss dalam direktori root dan jika mereka berubah, kami ingin menjalankan perintah sass yang telah kami tetapkan sebelumnya.

Sekiranya anda menukar fail style.scss anda, ia perlu disusun ke fail css dalam direktori css secara automatik.

Menjalankan Pelbagai Tugasan

Terdapat banyak situasi di mana anda mungkin mahu menjalankan pelbagai tugas. Ketika menonton folder javascript anda, anda mungkin ingin menyusun dua file dan kemudian menerangkannya. Terdapat dua cara anda boleh mendapatkannya.

Jika tugas berkaitan, saya suka rantai mereka. Satu contoh yang baik ialah penggabungan dan pengurangan fail javascript. Kami mula-mulanya paip fail kami ke aksi aksi, kemudian paip mereka untuk menegangkan, kemudian gunakan fungsi destinasi untuk mengeluarkannya.

Jika tugas tidak berkaitan, anda boleh memanggil berbilang tugas. Satu contoh akan menjadi tugas di mana kita mahu menggabungkan dan meminimumkan skrip kami dan juga menyusun SASS kami. Inilah dia Gulpfile penuh bagaimana rupa itu akan kelihatan.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('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'], ['scripts', 'styles']); gulp.task ('lalai', ['skrip', 'gaya']);

Jika anda menaip skrip gulp ke dalam terminal, semua fail javascript dalam direktori js akan digabungkan, output ke direktori utama, kemudian uglified dan disimpan ke direktori utama.

Jika anda menaip langgar sass, semua fail scss anda akan disusun dan disimpan ke direktori css.

Jika anda menaip menelan (tugas lalai), anda skrip tugas akan dijalankan, diikuti oleh anda gaya tugas.

The gulp automate tugas menghidupkan banyak folder untuk perubahan dalam fail scss dan js kami dan akan melaksanakan kedua-dua tugas yang kami tentukan, jika perubahan dikesan.

Gambaran keseluruhan

Menggunakan Gulp tidak sukar, sebenarnya, ramai orang lebih suka menggunakan Grunt kerana sintaksnya lebih mudah. Ingat langkah-langkah yang perlu diambil semasa mencipta automasi baru:

• Cari plugin
• Pasang plugin
• Memerlukan plugin dalam Gulpfile anda
• Gunakan sintaks dalam dokumentasi

Lima perintah yang terdapat dalam Gulp (tugas, lari, menonton, src, dest) adalah satu-satunya yang perlu anda ketahui, semua addon pihak ketiga mempunyai dokumentasi yang hebat. Berikut ialah senarai beberapa perkara yang saya gunakan yang boleh anda mulakan sekarang:

• Mengoptimumkan imej dengan pengoptimuman imej gulp
• Membuat sprite imej dengan gulp-sprite
• Menyelesaikan fail dengan gulp-concat
• Meminimumkan fail dengan gulp-uglify
• Memadam fail dengan gulp-del
• Javascript linting dengan gulp-jslint
• JSON linting dengan gulp-jsonlint
• Autoprefix CSS dengan gulp-autoprefixer
• Cari dan ganti menggunakan gulp-frep
• Minify CSS dengan gulp-minify-css