Gulp.js ile Başlarken

Gulp, iş akışınızın bitlerini otomatikleştirmenize izin veren Javascript tabanlı bir araçtır. Otomasyon kelimenin tam anlamıyla günde saatlerce tasarruf sağlayabilir. İster şimdi geliştirici, ister HTML tel kafesleri yaratan bir tasarımcı olun, ister kazmak istersiniz.

Bu yazıda, kurulumdan temel sözdizimine ve birkaç örneğe kadar Gulp kullanmanın temellerini inceleyeceğiz. Makalenin sonunda yapabilmeniz gerekenler Gulp için başkalarının oluşturduğu paketleri bulma, kurma ve kullanma SASS'ı derlemek, görüntüleri optimize etmek, sprite oluşturmak, dosyaları birleştirmek ve daha fazlası için!

Gulp Kurulumu

Endişelenmeyin, kurulumu çok kolaydır. Terminali OSX ve Linux'ta veya Windows komut istemini kullanmamız gerekiyor. Bundan böyle Terminal olarak bahsedeceğim..

Açın ve npm -v yazıp enter tuşuna basın. Görüntülenen sürüm numarasını görüyorsanız, Düğüm zaten yüklü olmalıdır - bu Gulp’e bağımlılıktır..

Eğer alırsan “komut bulunamadı” (veya benzer bir hata), Node.js indirme sayfasına gidin ve sisteminiz için uygun paketi seçin. Kurulduktan sonra, npm komutu terminalde mevcut olacaktır..

Gulp'u kurmak çok kolaydır. Aşağıdaki komutu terminale yapıştırın, işte bu:

npm yüklemek - küresel gulp

Bu, sisteminizde global olarak kullanılabilecek Gulp komutunu yükleyecektir..

Bir Projeye Gulp Eklemek

Gulp şimdi kuruldu, ancak ihtiyaç duyduğumuz her projeye ayrı ayrı eklememiz gerekecek. Şimdi boş bir klasör oluşturun ve terminalinizde bu klasöre gidin. Proje klasöründeyken aşağıdaki komutu kullanın:

npm install - save-dev gulp

Bu, proje klasörünüzde bir node_modules klasörü ve npm-debug.log dosyası oluşturmalıdır. Bunlar Gulp tarafından projenize bir şey yapmak için kullanılıyor, bu aşamada onlar hakkında düşünmenize gerek yok.

Her bir özel projeye Gulp eklememizin gerekliliği her projenin farklı gereksinimleri vardır. Biri SASS'ı, diğeri Daha Az'ı arayabilir. Biri Coffeescript kullanabilir, diğeri kullanmayabilir, vb..

Gulpfile

Gulpfile sihrin olduğu yer, tanımladığınız yer İstediğiniz otomasyonlar ve onların olmasını istediğinde. Adında bir dosya oluşturarak boş bir varsayılan görev oluşturalım gulpfile.js ve aşağıdaki kodu yapıştırarak.

var gulp = zorunlu ('gulp'); gulp.task ('default', function () // Bu şimdilik bir şey yapmıyor, yakında işlevsellik ekleyeceğiz);

Bu dosya kaydedildiğinde terminalinize geri dönebilir ve gulp komutunu kendi başınıza çalıştırabilirsiniz. Gulp hangi projede olduğunu tespit eder ve varsayılan görevi yürütür - yeni yarattığımız işi. Böyle bir şey görmelisin:

Burada hiçbir şey olmuyor, çünkü görev boş, ama iyi çalışıyor. Şimdi, bazı doğru örneklerle gidelim!

Bir Dosyayı Kopyalamak

Bu çok sıkıcı bir şey, çok kabul ediyorum ama ne olduğunu kolayca anlamana yardımcı olacak..

Proje klasörünüzde adlı bir dosya oluşturun to_copy.txt , ve adlı bir klasör dev. Gulp dosyamızın içine girelim ve adında yeni bir görev yaratalım. kopya.

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

İlk satır copy adlı bir görevi tanımlar. Bunun içinde gulp.src dosyasını hangi görevle hedeflediğimizi belirtmek için kullanırız - bu durumda adlı tek bir dosyadır. to_copy.txt.

Daha sonra bu dosyaları nereye koyacağımızı belirten gulp.dest işlevine yönlendiririz - dev dizinini kullandım.

Terminalinize geri dönün ve yazın yutturmaca Bu görevi çalıştırmak için, belirtilen dosyayı belirtilen dizine, buna benzer şekilde kopyalamalıdır:

Boru komutanlığı Gulp’un kalbidir. Verileri komutlar arasında taşımak için etkili bir yoldur. Src komutu, dest komutuna aktarılan dosyaları belirtir. Daha karmaşık senaryolarda, bir hedef belirlemeden önce dosyalarımızı diğer komutlara aktaracağız.

Ayrıca kaynağın tek bir dosya veya birden fazla dosya olarak verilebileceğinin farkında olmalısınız. Eğer bir klasörümüz varsa üretim ve tüm dosyaları bizden taşımak istiyoruz. gelişme klasöründe aşağıdaki komutu kullanabiliriz:

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

Yıldız karakteri dizindeki herhangi bir şeyle eşleşir. Ayrıca, tüm alt dizinlerdeki tüm dosyaları eşleştirebilir ve başka türlü fantezi eşleştirmesi yapabilirsiniz. Daha fazla bilgi için düğüm glob belgelerine bakın..

SASS Derleme

SASS dosyalarından bir stil sayfası oluşturmak, geliştiriciler için ortak bir görevdir. Gulp ile oldukça kolay bir şekilde yapılabilir, biraz hazırlık yapmamız gerekecek. Src, dest ve diğerleri gibi temel komutların yanı sıra, tüm işlevler üçüncü taraf eklentileriyle eklenir. İşte onları nasıl kullanacağım.

Ben yazarım SASS Gulp Google’da ilk sonuç genellikle ihtiyacım olan şeydir, SASS paketi için sayfayı bulmalısınız. Nasıl kurulacağını gösterir (npm install gulp-sass). Muhtemelen bunu sudo'yu yönetici olarak kurmak için ihtiyacınız olacak, bu yüzden muhtemelen olacak (sudo npm install gulp-sass) .

Tamamlandıktan sonra, kodunuzu derlemek için paketin belirttiği sözdizimini kullanabilirsiniz. Bunu yapmak için, aşağıdaki içeriğe sahip styles.scss adlı bir dosya oluşturun:

$ birincil: # ff9900; vücut background: $ birincil; 

Şimdi Gulpfile'de aşağıdaki Gulp görevini oluştur.

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

Komutu çalıştırmadan önce, Gulpfile'nin üstündeki paketi 'zorunlu' olarak koymayı unutmayın:

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

Kaçtığında aldatmaca sass, scss uzantılı tüm dosyalar sss işlevine yönlendirilir ve bu da onları css'ye dönüştürür. Bunlar daha sonra onları css klasörüne yerleştiren hedef fonksiyona yönlendirilir..

Dosya ve Klasörleri İzleme

Şimdiye kadar bu çok kullanışlı, ancak yine de bir komut yazmamız gerekiyor. her zaman Özellikle stil sayfası değişiklikleri söz konusu olduğunda, çok verimli olmayan bir görevi yürütmek istiyoruz. Gulp, değişiklikleri izlemek için dosyaları izlemenizi ve komutları otomatik olarak çalıştırmanızı sağlar.

Gulpfile'de isimli bir komut oluşturun. otomatikleştirmek değişiklikler için bir dosya kümesini izlemek için watch komutunu kullanır ve bir dosya değiştiğinde belirli bir komutu çalıştırır..

gulp.task ('otomatikleştir', function () gulp.watch ('*. scss', ['sass']););

Yazarsanız gulp otomatikleştirmek terminale, görevi başlatacak ve bitirecek, ancak istemleri geri döndürmeyecek çünkü değişiklikleri izliyor. Kök dizinindeki tüm scss dosyalarını izlemek istediğimizi belirledik ve değişirlerse, daha önce kurduğumuz sass komutunu çalıştırmak istedik.

Şimdi style.scss dosyanızı değiştirirseniz, otomatik olarak css dizini içindeki css dosyasına derlenmelidir..

Birden Çok Görev Çalıştırmak

Birden fazla görevi çalıştırmak isteyebileceğiniz birçok durum vardır. Javascript klasörünüzü izlerken birleştirilmiş iki dosyayı derlemek ve daha sonra küçültmek için devam etmek isteyebilirsiniz. Bunu yapmanın iki yolu var..

Görevler ilgiliyse, hoşuma gider onları zincirle. İyi bir örnek, javascript dosyalarının birleştirilmesi ve küçültülmesidir. Önce dosyalarımızı concat eylemine yönlendiriyoruz, sonra onları yüceltmek için yönlendiriyoruz, sonra onları hedeflemek için hedef işlevini kullanıyoruz.

Görevler ilgisiz ise birden fazla görevi çağır. Bir örnek, senaryolarımızı birleştirip küçültmek ve SASS'ı derlemek istediğimiz bir görev olabilir. İşte o nasıl görüneceğini tam Gulpfile var.

var gulp = zorunlu ('gulp'); var uglify = zorunlu ('gulp-uglify'); var concat = zorunlu ('gulp-concat'); var sass = zorunlu ('gulp-sass'); gulp.task ('komut dosyaları', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('stiller', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('otomatikleştir', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['komut dosyaları', 'stiller']);); gulp.task ('varsayılan', ['komut dosyaları', 'stiller']);

Yazarsanız yutmak senaryoları terminale, js dizini içindeki tüm javascript dosyaları birleştirilecek, ana dizine gönderilecek, daha sonra büyütülecek ve ana dizine kaydedilecektir.

Yazarsanız aldatmaca sass, tüm scss dosyalarınız derlenecek ve css dizinine kaydedilecektir.

Yazarsanız yudum (varsayılan görev) senaryo görev çalıştırılacak, ardından stilleri görev.

gulp otomatikleştirmek görev, scss ve js dosyalarımızdaki değişiklikler için birden fazla klasör izler ve bir değişiklik tespit edilirse tanımladığımız her iki görevi de gerçekleştirir.

genel bakış

Gulp kullanmak zor değil, aslında birçok kişi basit sözdizimi nedeniyle Grunt'u tercih ediyor. Yeni bir otomasyon oluştururken atılacak adımları unutmayın:

• Eklenti ara
• Eklenti kur
• Gulpfile'inizde eklenti isteyin
• Belgelerde sözdizimini kullanın

Gulp'ta mevcut olan beş komut (görev, koş, izle, src, dest) bilmeniz gerekenler yalnızca üçüncü parti eklerinin harika belgeleri var. İşte şimdi kullanmaya başladığım bazı şeylerin bir listesi:

• Görüntüleri görüntü optimizasyonu ile optimize etme
• Gulp-sprite ile görüntü sprite oluşturma
• Gulp-concat ile dosyaları birleştirme
• Gulp-uglify ile dosyaların küçültülmesi
• Gulp-del ile dosyaları silme
• Gulp-jslint ile Javascript astarı
• JSON gulp-jsonlint ile astarlama
• Gulp-autoprefixer ile Autoprefix CSS
• Gulp-frep kullanarak arama ve değiştirme
• Gulp-minify-css ile küçültün CSS