İş Akışınızı Otomatikleştirmek için Grunt Nasıl Kullanılır [Rehberler]

Ben bir otomasyonun büyük savunucusu çünkü hayatı çok daha kolay hale getiriyor. Sizin için bir şeyler yapacak bir bilgisayar varken neden yaşam gücünüzü emen basit, monoton görevlere zaman ayırıyorsunuz? Bu özellikle web geliştirme için geçerlidir.

Birçok geliştirme görevi bir angarya olabilir. Geliştirme sırasında kodu derlemek isteyebilirsiniz, geliştirme sürümünü zorlarken dosyaları birleştirebilir ve küçültebilir, yalnızca geliştirme kaynaklarını kaldırabilirsiniz, vb. Bir grup dosyayı silmek ya da klasörleri yeniden adlandırmak gibi nispeten karmaşık olanlar bile zamanımızın büyük bir kısmını kaldırabilir.

Bu makalede, bir Javascript görevi olan Grunt tarafından sunulan mükemmel işlevselliği kullanarak hayatınızı nasıl kolaylaştıracağınızı göstereceğim. Javascript sihirbazı olmasanız bile, tüm süreç boyunca size rehberlik edeceğim.!

Hongkiat.com hakkında daha fazlası:

• CSSMatic, CSS'yi Web Tasarımcıları İçin Kolaylaştırır
• Mac'teki Görevleri Klasör Eylemleriyle Otomatikleştirme
• Dropbox dosyalarınızı Eylemlerle Otomatikleştirin
• Android cihazınızdaki Görevlerin otomatikleştirilmesine yardımcı olacak 10 uygulama
• Web sitenizi Dropbox'a nasıl (otomatik olarak) yedekleyebilirsiniz?

Grunt Kurulumu

Düğüm paket yöneticisini kullandığından Grunt'u yüklemek oldukça kolaydır. Bu, Düğümün kendisini de yüklemeniz gerekebileceği anlamına gelir. Bir terminal veya komut istemi açın (Bundan sonra bu terminali arayacağım) ve nmp -v.

Bir sürüm numarası görüyorsanız, npm "Komut bulunamadı" hatası görürseniz, indirilen düğüme gidip ihtiyacınız olan sürümü seçerek yüklemeniz gerekir..

Düğüm kurulduktan sonra, Grunt'u almak terminalde verilen tek bir emir meselesidir:

npm yüklemek -g grunt-cli

Temel kullanım

Her projenin farklı gereksinimleri olacağından, Grunt'u proje bazında kullanacaksınız. Şimdi bir proje oluşturalım, bir klasör oluşturarak ve terminalimiz üzerinden de gezerek başlayalım..

İki dosya Grunt'un kalbini oluşturur: package.json ve Gruntfile.js. Paket dosyası, otomasyonunuzun kullanacağı tüm üçüncü taraf bağımlılıklarını tanımlar, Gruntfile kontrol etmenizi sağlar Nasıl tam olarak bunlar kullanılır. Şimdi aşağıdaki içerikle bir çıplak kemik paketi dosyası oluşturalım:

"name": "test projesi", "sürüm": "1.0", "devDependencies": "grunt": "~ 0.4.5",

İsim ve sürüm size kalmış, bağımlılıklar kullandığınız tüm paketleri içermelidir. Şu anda herhangi bir şey yapmıyoruz, bu yüzden Grunt'un kendisinin bir bağımlılık olarak eklendiğinden emin olacağız..

Kendine, tilde adı verilen dalgalı çizginin (~) orada ne yaptığını soruyor olabilirsiniz..

Npm için semantik sürümcü kurallarını kullanarak sürümler gerekebilir. Kısaca:

• Gibi tam bir sürüm belirtin 4.5.2
• Gibi minimum veya maksimum sürümü belirtmek için büyük / küçük kullanabilirsiniz. > 4.0.3
• Tilde kullanılması bir sürüm bloğunu belirtir. kullanma ~ 1.2 olarak kabul edilir 1.2.x, 1.2.0'ın üstünde ancak 1.3'ün altında olan herhangi bir sürüm

Sürümleri belirtmenin çok daha fazla yolu var, ancak bu çoğu ihtiyaç için yeterli. Bir sonraki adım otomasyonlarımızı gerçekleştirecek bir Gruntfile oluşturmaktır.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('varsayılan', []); ; 

Bu temelde bir Gruntfile için iskelet; iki tane ilgi çekici yer var. Bir konum içinde initconfig () işlevi. Bu, tüm proje yapılandırmanızın gerçekleştiği yerdir. Bu, LESS / SASS derleme işlemlerini yürütme, komut dosyalarını küçültme vb. İşlemleri içerir..

İkinci konum, görevleri belirttiğiniz işlevin altında. Adında belirtilen bir görevi görebilirsiniz. “varsayılan”. Şu anda boş yani hiçbir şey yapmıyor, ama sonra genişleteceğiz.. Görevler, proje konfigürasyonumuzdan bit ve parçaları sıraya sokar ve uygular.

Örneğin, bir görev “senaryo” tüm komut dosyalarımızı birleştirebilir, daha sonra sonuç dosyasını küçültebilir ve ardından son konumuna taşıyabilir. Bu üç eylemin tümü proje yapılandırmasında tanımlanmıştır ancak “Birlikte çekildi” görev tarafından. Bu henüz net değilse, endişelenmeyin, size bunun nasıl yapıldığını göstereceğim.

İlk Görevimiz

Tek bir javascript dosyasını bizim için küçümseyen bir görev oluşturalım.

Yeni bir görev eklemek istediğimizde yapmamız gereken dört şey var:

• Gerekirse bir eklenti yükleyin
• Gruntfile içinde gerekli
• Bir görev yaz
• Gerekirse bir görev grubuna ekleyin

(1) Eklentiyi Bul ve Yükle

İhtiyacınız olan eklentiyi bulmanın en kolay yolu Google’a böyle bir şey yazmaktır: “küçültmek javascript grunt eklentisi”. İlk sonuç sizi tam ihtiyacımız olan şey olan grunt-katkı-uglify eklentisine yönlendirmeli.

Github sayfası size bilmeniz gereken her şeyi söyler. Kurulum terminalde tek bir satırdır, işte kullanmanız gerekenler:

 npm yüklemek grunt-katkıda-uglify - save-dev 

Bunu yönetici ayrıcalıklarıyla çalıştırmanız gerekebilir. Gibi bir şey alırsanız npm ERR! Lütfen bu komutu tekrar root / Administrator olarak çalıştırmayı deneyin.. yol boyunca komuttan önce sudo yazın ve istendiğinde şifrenizi girin:

 sudo npm yüklemek grunt-katkıda-uglify --save-dev 

Bu komut aslında sizin package.json dosya ve orada bir bağımlılık ekler, bunu el ile yapmanız gerekmez.

(2) Gruntfile İste

Bir sonraki adım, Gruntfile'nizi bir gereklilik olarak eklemek. Dosyanın en üstüne eklenti eklemeyi seviyorum, işte ekleyen Gruntfile işte grunt.loadNpmTasks ( 'hırıltı-Contrib-çirkinleştirmek');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-katkı-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('varsayılan', []); ; 

(3) Komut dosyalarını küçültmek için bir görev oluşturun

Tartıştığımız gibi, bunun içinde yapılması gerekir. initconfig () işlevi. Eklentinin Github sayfası (ve diğer eklentilerin çoğu) size birçok bilgi ve örnek sunar. İşte test projemde kullandıklarım.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Bu oldukça basit, ben belirtti scripts.js Projemin js dizinindeki dosya ve küçültülmüş dosyanın hedefi. Kaynak dosyaları belirtmenin birçok yolu vardır, daha sonra buna bir göz atacağız..

Şimdilik, işlerin nasıl bir araya geldiğini bildiğinizden emin olmak için, bu eklendikten sonra tüm Gruntfile'ye bir göz atalım..

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-katkı-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', hedef: 'scripts.min.js'); grunt.registerTask ('varsayılan', []); ; 

(4) Bu yapılandırmayı bir görev grubuna ekleyin

Şu anda terminalinize gidebilir ve yazabilirsiniz hırıltı çirkin ancak daha sonra birden fazla görevi çalıştırmak için görev gruplarına ihtiyacımız olacak. Varsayılan görevimiz boş: sadece eklenecek bir şeyler bekliyoruz, bu yüzden aşağıdakileri değiştirelim:

 grunt.registerTask ('default', ['uglify']); 

Bu aşamada terminale gidebilmeniz gerekir. homurtu ve küçültmenin gerçekleştiğini görün. Oluşturmayı unutma scripts.js elbette dosya!

Kurulması çok zaman almadı mı? Tüm bunlar için yeniyseniz ve bu adımları atmanız biraz zaman aldı, tasarruf süresi birkaç harcayarak harcanan zamanı aşacak.

Dosyaları Birleştir

Dosyaları birleştirmeye bakalım ve Birden fazla dosyayı hedef olarak nasıl belirteceğinizi öğrenin yol boyunca.

Birleştirme, birden fazla dosyanın içeriğini tek bir dosyada birleştirme işlemidir. Grunt-Contrib-Concat eklentisine ihtiyacımız var. Adımlarla çalışalım:

Eklentiyi kullanmak için npm yüklemek grunt-katkıda-concat - save-dev Terminalde Bir kez yaptıktan sonra, kullanmadan önce tıpkı Gruntfile’inize eklemeyi unutmayın. grunt.loadNpmTasks ( 'hırıltı-Contrib-concat');.

Sıradaki yapılandırma. Üç özel dosyayı birleştirelim, sözdizimi aşina olacak.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

Yukarıdaki kod kaynak olarak verilen üç dosyayı alır ve hedef olarak verilen dosyaya birleştirir.

Bu zaten oldukça güçlü ama yeni bir dosya eklenirse ne olacak? Her zaman buraya geri dönmemize gerek var mı? Tabii ki değil, birleştirmek için bir dosya klasörü belirleyebiliriz.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Şimdi, dev / js klasörü içindeki herhangi bir javascript dosyası tek bir büyük dosyada birleştirilecek: js / scripts.js, çok daha iyi!

Şimdi bir görev yaratma zamanı geldi, böylece bazı dosyaları birleştirelim..

 grunt.registerTask ('mergejs', ['concat']); 

Bu artık varsayılan görev değil, bu yüzden sorunu çıkarırken terminalde adını yazmamız gerekecek. homurtu komuta.

 hırıltı mergejs 

Otomasyonumuzu Otomatikleştirme

Çok fazla ilerleme kaydettik ama daha fazlası var! Şimdilik, birleştirmek veya küçültmek istediğinizde terminale gitmeniz ve uygun komutu yazmanız gerekir. Şuna bir bakmamızın zamanı geldi. izlemek Bunu bizim için yapacak olan emir. Ayrıca, birden çok görevi birden çok seferde nasıl yürüteceğimizi de öğreneceğiz..

Gitmek için grunt-katkıda-watch'i yakalamamız gerekecek. Bunu şimdi yükleyip kendi başınıza Gruntfile'e ekleyebileceğinizden eminim, bu yüzden size test projemde ne kullandığımı göstererek başlayacağım..

 izle: script: files: ['dev / js / *. js'], görevler: ['concat', 'uglify'],, 

İzlenecek dosyaları bir dizi olarak adlandırdım “senaryo”, Sadece ne yaptığını biliyorum. Bu nesnenin içerisinde izlenecek dosyaları ve çalıştırılacak görevleri belirledim. Önceki birleştirme örneğinde, dev / js dizinindeki tüm dosyaları bir araya getirdik.

Minification örneğinde bu dosyayı küçültdük. Herhangi bir değişiklik olduğunda dev / js klasöründeki değişiklikleri izlemek ve bu görevleri çalıştırmak mantıklıdır..

Gördüğünüz gibi, çoklu görevler virgüllerle ayrılarak kolayca çağrılabilir. Sırayla gerçekleştirilirler, ilk önce birleştirme, sonra bu durumda küçültme. Bu aynı zamanda neden var olduklarını gösteren görev gruplarıyla da yapılabilir..

Şimdi varsayılan görevimizi değiştirebiliriz:

 grunt.registerTask ('default', ['concat', 'uglify']); 

Şimdi iki seçeneğimiz var. Komut dosyalarınızı birleştirmek ve küçültmek istediğinizde terminale ve yazıma geçebilirsiniz. homurtu. Dosyalarınızı izlemeyi başlatmak için watch komutunu da kullanabilirsiniz: hırıltı izle.

Orada oturup bu dosyaları değiştirmenizi bekliyor. Bunu yaptıktan sonra, kendisine verilen tüm görevleri yerine getirecek, devam edecek, deneyecek.

Bu çok daha iyi, bizden hiçbir girişe gerek yok. Artık dosyalarınızla çalışabilirsiniz ve her şey sizin için güzel bir şekilde yapılacaktır.

genel bakış

Eklentilerin nasıl kurulabileceği ve kullanılabileceği ve izleme komutunun nasıl çalıştığı hakkındaki temel bilgilerle, hepiniz bir otomasyon bağımlısı olmaya hazırsınız. Grunt'ta tartıştığımızdan çok daha fazlası var ama kendi başınıza halledemeyeceğiniz hiçbir şey yok.

SASS'yi derlemek için komutları kullanmak, görüntüleri optimize etmek, otomatik düzeltme ve daha fazlası, tartıştığımız adımları izlemekten ve eklentinin gerektirdiği sözdizimini okumaktan ibarettir..

Eğer Grunt için özellikle harika kullanımlar biliyorsanız, lütfen yorumlarınızı bize bildirin, Grunt gibi araçları nasıl kullandığınızı duymak isteriz.!