Npm Komut Dosyalarını Derleme Aracı Olarak Kullanma

Tipik olarak iki tür JavaScript oluşturma aracı vardır: görev yürütücüler ve modül paketleyiciler. Bu makalede, Gulp ve Grunt gibi görev çalıştırıcılara veya Webpack gibi modül paketleyicilere güvenmek yerine, projeye özel npm derleme komut dosyalarının bir derleme aracı ve görev çalıştırıcısı olarak nasıl kullanılacağına bakacağız.

Grunt ve Gulp görev yürütücülerdir, bir geliştirme sürecinde yinelenen manuel görevleri otomatikleştirirler. Webpack ise, her biri kendi bağımlılıklarına sahip ayrı uygulama kodu parçalarını alan ve bunları statik varlıklar halinde paketleyen bir modül paketleyicisidir.

Grunt ve Gulp makalemizde, gerçekten girmediğimiz başka bir derleme aracı alternatifinden bahsettik: npm komut dosyaları. Birkaçınız yorumlarda npm komut dosyalarını bir yapı aracı/görev çalıştırıcısı olarak nasıl kullanabileceğiniz hakkında daha fazla bilgi edinmek istediğinizi sordu, bu yüzden tam olarak buna bakacağız.

Neden Npm Komut Dosyaları?

Grunt, Gulp ve Webpack gibi oluşturma araçlarını yeterince uzun süre kullanırsanız, uygulamanız için kod yazmaya odaklanmak yerine araçla savaşmaya başladığınızı görmeye başlayacaksınız. Her aracın kendi işleri yapma şekli vardır ve bu, her aracın öğrenilmesi gereken kendi tuhaflıkları ve kazanımlarıyla birlikte geldiği anlamına gelir.

Hem Grunt hem de Gulp, işlevsellik eklemek için eklentilerin kullanımına büyük ölçüde güvenir ve bu eklentilerin çoğu, mevcut npm paketlerinin etrafındaki sarmalayıcılardır. Bu, aşağıdaki gibi sorunlara yol açabilir:

1. Kullanmak istediğiniz paket için bir eklenti yok.
2. Eklenti güncel değil ve temel alınan paketi doğru şekilde desteklemiyor.
3. Eklenti, temel paket için kullanmak istediğiniz bir özelliği desteklemiyor.
4. Eklenti belgeleri eksik veya net değil.
5. Eklenti hataları iyi işlemez.

Çoğu paket genellikle bir CLI'ye sahip olduğundan, bu sorunlara basit bir çözüm, derleme araçlarının (bazen karmaşık) soyutlamasını tamamen kaldırmak ve temeldeki paketleri komut satırında manuel olarak çalıştırmak olacaktır. Bu harika bir çözüm, ancak tüm bu CLI komutlarını ve seçeneklerini nasıl hatırlayacaksınız? Ve onları nasıl birbirine zincirleyeceksin? Tek bir CLI komutu çalıştırıp hepsini doğru sırayla ve aynı anda çalıştırmanız güzel olmaz mıydı?

Npm Komut Dosyaları

Npm'nin en az 6. sürümünden beri var olan npm komut dosyalarını girin. package.json dosyanızdaki scripts özelliğini kullanarak, çeşitli CLI komutlarını çalıştırmak için özel komut dosyaları tanımlamak mümkündür. Bu, masaüstü uygulama geliştiricileri tarafından Unix benzeri sistemler için uygulamalarını oluşturmak ve yönetmek için kullanılan GNU Make aracına çok benzer.

scripts package.json dosyanızda tanımladığınızda, npm'nin bu betikleri çalıştırabilen bir run komutu vardır. Sizden npm start veya npm run test gibi bir komut çalıştırmanızı isteyen bir paket kullandıysanız, npm komut dosyalarını kullanmışsınızdır.

Bir komut dosyası, tek bir terminal komutu kadar basit veya belirli bir sırada çalıştırılması gereken daha karmaşık bir dizi komut olabilir.

Npm komut dosyalarını bir derleme aracı olarak kullanmak için, diğer derleme araçlarında bir yapılandırma dosyasında çalıştırmak istediğimiz görevleri tanımlamaya benzer şekilde, bir package.json dosyasında bir dizi komut dosyası tanımlayacağız. npm betikleriyle olan fark, CLI paketini herhangi bir eklenti olmadan çalıştıracağız, ardından betikleri birbirine zincirleyeceğiz, böylece tek bir komutla bir yapıyı tetikleyebiliriz. Gösteri amacıyla Gulp vs Grunt makalesinde kullandığımız aynı oluşturma sürecini yeniden oluşturacağız:

1. Sass'ı CSS'ye derleyin.
2. CSS ve JavaScript'i birleştirin ve küçültün.
3. Görüntüleri optimize edin.

Örnek Proje

Burada test ettiğimiz şeyin bir demosu olarak bir GitHub deposu oluşturduk. Kullandığımız tüm npm paketleri dahil olmak üzere önceden yapılandırılmış bir package.json dosyasına sahiptir.

1. sass: Sass'ı CSS'ye dönüştürmek için kullanılır.
2. concat: birden çok dosyayı birleştirmek (birleştirmek) için kullanılır.
3. clean-css-cli: clean-css için cli, hızlı ve verimli bir CSS optimize edici.
4. uglify-js: JavaScript ayrıştırıcı, küçültücü, sıkıştırıcı ve güzelleştirici.
5. onchange: dosya kümelerini izleyin ve herhangi bir şey eklendiğinde, değiştirildiğinde veya silindiğinde bir komut çalıştırın.
6. npm-run-all: birden çok npm-komut dosyasını paralel veya sıralı olarak çalıştırın.
7. @squoosh/cli: Bir görüntü iyileştirici olan Squoosh için bir cli.

@squoosh/cli paketi, imagemin paketinin artık bakımı yapılmadığından Grunt vs Gulp makalesinde kullandığımız imagemin-cli paketinin yerini almıştır.

Depo ayrıca gerekli tüm dosyaları ve demo içeriğini içerir, böylece kuracağımız npm komut dosyalarını denemek için kullanabilirsiniz.

İlk Komut Dosyanızı Oluşturma

İlk npm script için, sass paketini kullanarak Sass dosyamızı CSS'ye derleyerek başlayalım. İlk önce onu yüklememiz gerekiyor:

 npm install sass --save-dev

Bu, paketi node_modules dizininize kurar. --save-dev bayrağının bu paketi package.json dosyasının devDependencies bölümüne kaydettiğini unutmayın. Bu, diğer geliştiricilerin gelecekte sadece npm install çalıştırarak gerekli paketleri kurmasını kolaylaştırır.

Sass komut satırı aracını kullanma talimatlarına göre, aşağıdaki komutu kullanarak assets/scss/style.scss dosyamızı dist/css/style.css dosyasında derleyebiliriz:

 sass assets/scss/style.scss dist/css/style.csss

O halde bu komutu scripts bölümündeki package.json dosyamıza scss isimli bir npm scripti olarak ekleyelim:

 "scripts": { "scss": "sass assets/scss/style.scss dist/css/style.css" }

Şimdi komut satırından npm run scss komutunu çalıştırın. Sass dosyanızın CSS'ye başarıyla derlendiğini görmelisiniz ve komut çıktısı, sass manuel olarak çalıştırmakla aynı olmalıdır.

[email protected]ş istasyonu:~/development/projects/npm-scripts$ npm scss çalıştır

> [email protected] scss
> sass varlıklar/scss/style.scss dist/css/style.css

Bu süreç daha sonra proje gereksinimlerimizin geri kalanı için tekrarlanabilir.

Test Komutları

Komut dosyasının beklediğiniz şeyi yapmadığını fark ederseniz, npx komutunu kullanarak ilişkili komutu terminalinizden manuel olarak test edebilirsiniz. Bu komut, yerel olarak kurulmuş bir paketten başka herhangi bir isteğe bağlı komutu çalıştırmanıza izin verir.

scss betiğinin komutunu npx ile test etmek için, şu şekilde çalıştırabilirsiniz:

 npx sass assets/scss/style.scss dist/css/style.css

Daha Fazla Komut Dosyası Ekleme

Eklemek istediğimiz herhangi bir ek script için aynı prosedürü takip edebiliriz.

1. Paketi npm kullanarak kurun.
2. İlgili terminal komutunu çalıştırmak için package.json dosyasının komut dosyaları bölümünde scripts dosyasını yapılandırın.

Zincirleme Komut Dosyaları

Komut dosyalarını birlikte zincirlemek de mümkündür. Bunun nedeni, npm run komutunun kendisinin bir CLI komutu olması ve diğer komut dosyalarından çalıştırılabilmesidir. Örneğin:

 "scripts": { ... "concat:css": "concat -o dist/css/styles.css dist/css/style.css assets/css/test.css", "concat:js": "mkdir -p dist/js && concat -o dist/js/scripts.js assets/js/test1.js assets/js/test2.js", "concat": "npm run concat:css && npm run concat:js", ... }

Burada, concat komutunu kullanarak CSS ve JS dosyalarımızı birleştiren concat:css ve concat:js olmak üzere iki ayrı komut dosyası oluşturduk. Bunları ayrı ayrı çalıştırabiliriz, ancak normalde bunları tek bir komut olarak çalıştırabilmek yararlıdır. Bunu, her iki komut dosyasını da npm run kullanarak çalıştıran yeni bir concat komut dosyası oluşturarak yapabiliriz.

Komut Dosyalarını Gruplama

Gerekli tüm paketlerimizi kurduktan sonra, package.json devDependencies bölümü şöyle görünmelidir:

 "devDependencies": { "@squoosh/cli": "^0.7.2", "clean-css-cli": "^5.5.0", "concat": "^1.0.3", "npm": "^8.3.0", "npm-run-all": "^4.1.5", "onchange": "^7.1.0", "sass": "^1.48.0", "uglify-js": "^3.14.5" }

Örnek projede yapılandırdığımız tüm komut dosyalarının ayrıntılarına girmeyeceğim, ancak artık npm komut dosyalarının nasıl çalıştığını bildiğinize göre, muhtemelen aşağıdaki scripts her birinin ne yaptığını anlayabilirsiniz:

 "scripts": { "scss": "node-sass -o dist/css assets/scss/style.scss", "concat:css": "concat -o dist/css/styles.css dist/css/style.css assets/css/test.css", "concat:js": "mkdir -p dist/js && concat -o dist/js/scripts.js assets/js/test1.js assets/js/test2.js", "concat": "npm run concat:css && npm run concat:js", "cssmin": "cleancss -o dist/css/styles.min.css dist/css/styles.css", "uglify": "uglifyjs -o dist/js/scripts.min.js dist/js/scripts.js", "squoosh": "squoosh-cli --mozjpeg '{quality:70}' assets/img -d dist/img", "build:css": "npm run scss && npm run concat:css && npm run cssmin", "build:js": "npm run concat:js && npm run uglify", "build:img": "npm run squoosh", "build": "npm run build:css && npm run build:js && npm run build:img" },

Vurgulamak istediğim önemli kısım, alt kısımda, bireysel komut dosyası grupları ( css , js , img ) için build komut dosyaları oluşturduğumuz ve ardından bunları build adında tek bir komut dosyasında zincirlediğimiz yer. Nesneleri mantıksal gruplara bölmek yalnızca komut dosyalarını birbirine zincirlemeyi kolaylaştırmakla kalmaz, aynı zamanda varlıklarınızın yalnızca belirli bir grubunu derlemek isteyebileceğiniz durumlarda da yardımcı olur. Örneğin, değişiklikleri izlemek.

Değişiklikleri İzlemek

Tek bir npm run build komutu kullanarak tüm ön uç varlıklarınızı derleyebilmek faydalıdır, ancak kodunuzun bir bölümünü her değiştirdiğinizde onu çalıştırmanız gerekirse, hızla can sıkıcı hale gelir. Bu durumlarda, bir komut dosyasının kodunuzdaki değişiklikleri "izlemesine" ve ardından derleme komut dosyalarını otomatik olarak çalıştırmasına izin vermek daha iyidir.

Bunu onchange package komutunu kullanarak başarabiliriz. onchange komutu, bir glob deseni kullanarak belirttiğiniz dosyaları izleyerek ve ardından belirttiğiniz bir komutu çalıştırarak ( -- 'den sonra) çalışır. Örneğin, Sass dosyalarımız değiştiğinde CSS dosyalarımızı oluşturmak için:

 onchange 'assets/scss/*.scss' -- npm run build:css

Böylece bazı yeni watch komut dosyaları oluşturabilir ve bunları package.json dosyasına ekleyebiliriz:

 "scripts": { ... "watch:css": "onchange 'assets/scss/*.scss' -- npm run build:css", "watch:js": "onchange 'assets/js/*.js' -- npm run build:js" … }

Şimdi npm run watch:css , Sass dosyalarımızdaki değişiklikleri izleyecek ve herhangi bir değişiklik (ve JS için aynı) algılarsa npm run build:css .

Komut Dosyalarını Paralel Çalıştırma

Diyelim ki CSS ve JS dosyalarınız üzerinde çalışırken her iki watch komut dosyasını da aynı anda çalıştırmak istiyorsunuz. npm run watch:css && npm run watch:js , bu komutlar sırayla çalıştırıldığı için çalışmayacaktır (yani, watch:js , watch:css bitene kadar çalışmayacaktır). Bu komut dosyalarını paralel olarak nasıl çalıştırırız? Burası npm-run-all paket komutunun devreye girdiği yerdir.

npm-run-all , aynı anda görev gruplarını çalıştırmamıza izin veren bir --parallel bayrağına sahiptir. Öyleyse yeni bir watch komut dosyası oluşturalım:

 "scripts": { ... "watch": "npm-run-all --parallel watch:*" … }

Bu komut, paralel olarak tanımladığımız tüm watch:* komut dosyalarını çalıştırır, böylece hem CSS hem de JS dosyalarımız üzerinde çalışabilir ve aynı anda yeniden oluşturulmasını sağlayabiliriz. Başarı! Son npm betiklerimiz artık:

 "scripts": { "scss": "sass assets/scss/style.scss dist/css/style.css", "concat:css": "concat -o dist/css/styles.css dist/css/style.css assets/css/test.css", "concat:js": "mkdir -p dist/js && concat -o dist/js/scripts.js assets/js/test1.js assets/js/test2.js", "concat": "npm run concat:css && npm run concat:js", "cssmin": "cleancss -o dist/css/styles.min.css dist/css/styles.css", "uglify": "uglifyjs -o dist/js/scripts.min.js dist/js/scripts.js", "squoosh": "squoosh-cli --mozjpeg '{quality:70}' assets/img -d dist/img", "build:css": "npm run scss && npm run concat:css && npm run cssmin", "build:js": "npm run concat:js && npm run uglify", "build:img": "npm run squoosh", "build": "npm run build:css && npm run build:js && npm run build:img", "watch:css": "onchange 'assets/scss/*.scss' -- npm run build:css", "watch:js": "onchange 'assets/js/*.js' -- npm run build:js", "watch": "npm-run-all --parallel watch:*" },

Dağıtımlar için Komut Dosyalarınızı Kullanma

npm komut dosyalarını bu şekilde kullanmanın diğer avantajı, varlıklarınızı bir sunucuya dağıtmak için build komut dosyalarını yeniden kullanmanın mümkün olmasıdır.

Örneğin, GitHub aracılığıyla yönettiğiniz ve SpinupWP ile barındırdığınız bir web sitesi veya uygulama için ön uç varlıklarınızı oluşturmak için npm komut dosyalarını kullandığınızı varsayalım. SpinupWP'nin Git desteğini kullanarak siteyi, kodu GitHub deposundan otomatik olarak alacak şekilde yapılandırmış olacaksınız. Ancak, siz sunucuya SSH'yi yükleyene ve npm install ve npm run build .

Neyse ki, SpinupWP'de Git deposunu yapılandırırken Dağıtım Komut Dosyasına şu komutları ekleyebilirsiniz:

Yukarıdaki örnekte, Git deposundan dağıtılan küçük bir örnek site oluşturdum. Depo, örnek projemizle aynı varlık dosyalarına ve npm komut dosyalarına sahiptir. Tek ekleme, CSS, JavaScript ve npm komut dosyalarımız tarafından oluşturulan resmi kullanarak bazı demo verilerini görüntüleyen bir index.html dosyasıdır.

SpinupWP'deki Komut Dosyasını Dağıt kutusuna aşağıdaki iki komutu ekledim:

 npm install npm run build

Şimdi, her yeni kodu bastığımda, SpinupWP, Git değişikliklerini getirdikten sonra konuşlandırma komut dosyası komutlarını çalıştıracak, eklemiş olabileceğim yeni npm paketlerini yükleyecek ve tüm ön uç varlıklarımı yeniden oluşturacak. 🙂

Karar

Artık yalnızca npm komut dosyalarını ve CLI paketlerini kullanarak bir derleme aracı oluşturmanın nasıl göründüğüne dair iyi bir fikriniz olmalı. Öyleyse, Grunt veya Gulp gibi bir derleme aracı yerine npm betikleri mi kullanmalısınız?

Özellikle küçük projeler için npm betiklerinin Grunt ve Gulp gibi derleme araçlarının soyutlamalarını kurmak ve öğrenmek zorunda kalmaktan daha temiz bir çözüm gibi göründüğünü düşünmeye meyilliyim. Ancak, çok sayıda komut dosyası içeren daha büyük projeler için package.json dosyanızın oldukça dağınık ve karmaşık hale geldiğini hayal edebiliyorum. Bu noktada, yapınız için ayrı, özel bir yapılandırma dosyasına sahip olmak muhtemelen daha mantıklı.

Ayrıca performans hem Grunt hem de Gulp'tan çok daha kötü görünüyor. Npm komut dosyaları, düğüm akışlarını Gulp'un yaptığı gibi kullanabilme avantajına sahip değildir, ancak Grunt bile npm komut dosyalarından önemli ölçüde daha hızlı çalıştı. imagemin-cli @squoosh/cli ile değiştirdiğimiz için kıyaslamaları doğrudan Grunt/Gulp performansıyla karşılaştırmak zordur, ancak görüntü işlemeyi dışarıda bıraksak bile npm komut dosyaları yavaştır:

• Hırıltı: 1,6 saniye
• Yutkunma: 0.84 saniye
• Npm komut dosyaları (görüntü işleme olmadan): 2,0 saniye
• Npm komut dosyaları (görüntü işlemeli): 6,0 saniye

Bu, başka bir noktayı gündeme getiriyor: eklenti kullanılabilirliği. Karşılaştırmaları doğru yapmak için, @squoosh/cli için Grunt ve Gulp eklentilerini bulmaya çalıştım. Gulp için bir tane varken, Grunt için bir tane yok. Wikimedia yakın zamanda bunu keşfetti ve npm komut dosyalarını kullanmaya başladı.

Bununla birlikte, hatırlanması gereken bir şey, npm komut dosyalarını veya Grunt/Gulp kullanmanın birbirini dışlamadığıdır. Grunt/Gulp'u derleme işleminizin bir parçası olarak her zaman bir npm betiği içinde çalıştırabilirsiniz. Bu, performans sorunlarına yardımcı olabilir, ancak ekibinizi Grunt/Gulp'tan npm komut dosyalarına geçirmeye çalışıyorsanız ve Grunt/Gulp'u tamamen değiştirmeden önce daha kademeli bir yaklaşım benimsemek istiyorsanız da yararlı olacaktır. Geliştirme ekibimiz, WP Offload Media'nın bir sonraki planlanan ana sürümü için Gulp görevlerini çağırmak için npm komut dosyalarını kullanıyor. Bunun nedeni, Gulp görevlerinin nispeten karmaşık olması ve aynı işlevi normal npm betikleri kullanarak uygulamak zor olmasıdır.

Npm komut dosyalarını kullanmanın Grunt veya Gulp gibi diğer oluşturma araçlarına daha iyi bir alternatif olduğunu düşünüyor musunuz? Daha önce npm betikleri kullandınız mı ve paylaşmak için iyi ipuçlarınız var mı? Bu yazıyı okuduğuna göre şimdi npm betiklerini deneyecek misin? Yorumlarda bize bildirin.