Makinelerden Nasıl Yararlanılır: Task Runner'larla Üretken Olmak

Görev koşucuları, çoğu web ve mobil uygulamanın arkasında sessizce çalışan kahramanlardır (veya bakış açınıza bağlı olarak kötü adamlardır). Görev yürütücüler, dosyaları birleştirme, geliştirme sunucularını çalıştırma ve kod derleme gibi çok sayıda geliştirme görevinin otomasyonu yoluyla değer sağlar. Bu yazıda Grunt, Gulp, Webpack ve npm scriptlerini ele alacağız. Ayrıca, başlamanız için her biri için bazı örnekler vereceğiz. Sonlara doğru, bu gönderideki fikirleri uygulamanıza entegre etmek için bazı kolay kazançlar ve ipuçları vereceğim.

Görev yürütücülerin ve genel olarak JavaScript ilerlemelerinin ön uç ortamını aşırı karmaşık hale getirdiğine dair bir görüş var. Tüm günü derleme komut dosyalarında ince ayar yapmakla geçirmenin her zaman zamanınızı en iyi şekilde kullanmadığına katılıyorum, ancak görev yürütücülerin doğru ve ölçülü kullanıldığında bazı faydaları vardır. Bu makaledeki amacımız, en popüler görev yürütücülerin temellerini hızlıca ele almak ve bu araçların iş akışınıza nasıl uyabileceğine ilişkin hayal gücünüzü harekete geçirmek için sağlam örnekler sunmaktır.

SmashingMag'de Daha Fazla Okuma :

• Oh-My-ZSH ve Z ile Komut Satırında Yetkili Kullanıcı Olun
• PostCSS'ye Giriş
• Kalk ve Grunt ile Koş
• Gulp ile Bina

Komut Satırına İlişkin Bir Not

Görev yürütücüler ve derleme araçları, öncelikle komut satırı araçlarıdır. Bu makale boyunca, komut satırıyla çalışma konusunda iyi bir deneyim ve yeterlilik düzeyine sahip olduğumu kabul edeceğim. cd , ls , cp ve mv gibi genel komutların nasıl kullanılacağını anlıyorsanız, çeşitli örnekleri incelerken iyi durumda olmalısınız. Bu komutları kullanmakta kendinizi rahat hissetmiyorsanız, Smashing Magazine'de harika bir tanıtım yazısı mevcut. Hepsinin büyükbabasıyla başlayalım: Grunt.

Homurtu

Grunt, JavaScript tabanlı ilk popüler görev çalıştırıcıydı. 2012'den beri Grunt'u bir şekilde kullanıyorum. Grunt'un arkasındaki temel fikir, görevleri gerçekleştirmek için çeşitli eklentileri yapılandırmak için özel bir JavaScript dosyası olan Gruntfile.js kullanmanızdır. Geniş bir eklenti ekosistemine sahiptir ve çok olgun ve kararlı bir araçtır. Grunt, eklentilerin çoğunu dizine ekleyen harika bir web dizinine sahiptir (şu anda yaklaşık 5.500). Grunt'un basit dehası, JavaScript ile ortak bir yapılandırma dosyası (makefile gibi) fikrinin birleşimidir; bu, daha fazla geliştiricinin Grunt'a katkıda bulunmasına ve projelerinde kullanmasına izin vermiştir. Ayrıca Grunt'un projenin geri kalanıyla aynı sürüm kontrol sistemi altına yerleştirilebileceği anlamına gelir.

Grunt, savaşta test edilmiş ve kararlıdır. Yazma sırasında, Grunt ekibi için büyük bir başarı olan 1.0.0 sürümü yayınlandı. Grunt, çeşitli eklentileri birlikte çalışacak şekilde büyük ölçüde yapılandırdığından, oldukça hızlı bir şekilde karışabilir (yani, dağınık ve kafa karıştırıcı olabilir). Ancak, biraz özen ve organizasyonla (görevleri mantıksal dosyalara bölmek!), herhangi bir proje için harikalar yaratmasını sağlayabilirsiniz.

İhtiyacınız olan görevi gerçekleştirmek için bir eklentinin mevcut olmadığı nadir durumlarda, Grunt kendi eklentinizi nasıl yazacağınıza dair belgeler sağlar. Kendi eklentinizi oluşturmak için bilmeniz gereken tek şey JavaScript ve Grunt API'sidir. Neredeyse hiçbir zaman kendi eklentinizi oluşturmanız gerekmeyecek, bu yüzden Grunt'u oldukça popüler ve kullanışlı bir eklentiyle nasıl kullanacağınıza bakalım!

Bir örnek

Grunt'un gerçekte nasıl çalıştığına bakalım. Grunt'u komut satırında çalıştırmak, dizinin kökünde Gruntfile.js arayan grunt komut satırı programını tetikler. Gruntfile.js , Grunt'un ne yapacağını kontrol eden yapılandırmayı içerir. Bu anlamda Gruntfile.js , aşçının (yani Grunt, programın) takip ettiği bir tür yemek kitabı olarak görülebilir; ve herhangi bir iyi yemek kitabı gibi, Gruntfile.js de birçok tarif (yani görevler) içerecektir.

Varsayımsal bir web uygulaması için simgeler oluşturmak üzere Grunticon eklentisini kullanarak Grunt'u adım adım ilerleteceğiz. Grunticon, bir SVG dizinini alır ve birkaç varlık çıkarır:

• arka plan görüntüleri olarak SVG taban-64 kodlu bir CSS dosyası;
• arka plan görüntüleri olarak base-64 olarak kodlanmış SVG'lerin PNG sürümlerine sahip bir CSS dosyası;
• her simge için ayrı bir PNG dosyasına başvuran bir CSS dosyası.

Üç farklı dosya, tarayıcıların ve mobil cihazların çeşitli özelliklerini temsil eder. Modern cihazlar, yüksek çözünürlüklü SVG'leri tek bir istek (yani tek bir CSS dosyası) olarak alacaktır. SVG'leri işlemeyen ancak temel 64 kodlu varlıkları işleyen tarayıcılar, temel 64 PNG stil sayfasını alır. Son olarak, bu iki senaryoyu idare edemeyen tarayıcılar, PNG'lere atıfta bulunan "geleneksel" stil sayfasını alacaktır. Bütün bunlar tek bir SVG dizininden!

Bu görevin yapılandırması şöyle görünür:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

Buradaki çeşitli adımları inceleyelim:

1. Grunt'u global olarak yüklemiş olmanız gerekir.
2. Projenin kökünde Gruntfile.js dosyasını oluşturun. Grunt'u npm bağımlılığı olarak package.json dosyanıza Grunticon ile birlikte npm i grunt grunt-grunticon --save-dev aracılığıyla yüklemek de en iyisidir.
3. Bir SVG dizini ve bir hedef dizin oluşturun (yerleşik varlıkların gideceği yer).
4. HTML'nizin head hangi simgelerin yükleneceğini belirleyen küçük bir komut dosyası yerleştirin.

Grunticon görevini çalıştırmadan önce dizininiz şöyle görünmelidir:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

Bu şeyler yüklenip oluşturulduktan sonra, yukarıdaki kod parçasını Gruntfile.js içine kopyalayabilirsiniz. Daha sonra komut satırından grunt grunticon çalıştırabilmeli ve görevinizin yürütüldüğünü görebilmelisiniz.

Yukarıdaki snippet birkaç şey yapar:

• Grunt'a 32. satırda grunticon adlı yeni bir config nesnesi ekler;
• icons nesnesinde Grunticon için çeşitli seçenekleri ve parametreleri doldurur;
• son olarak, Grunticon eklentisini loadNPMTasks aracılığıyla çeker.

Grunticon sonrası dizininiz şöyle görünmelidir:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

İşte gidiyor - bitti! Birkaç yapılandırma satırında ve birkaç paket kurulumunda, simge varlıklarımızın oluşturulmasını otomatik hale getirdik! Umarım bu, görev yürütücülerin gücünü göstermeye başlar: güvenilirlik, verimlilik ve taşınabilirlik.

Gulp: Yapı Sisteminiz İçin LEGO Blokları

Gulp, Grunt'tan bir süre sonra ortaya çıktı ve tamamen konfigürasyon değil, gerçek kod olan bir inşa aracı olmayı arzuladı. Kodun konfigürasyon yerine arkasındaki fikir, kodun sonsuz konfigürasyon dosyalarının değiştirilmesinden çok daha anlamlı ve esnek olmasıdır. Gulp'un önündeki engel, Grunt'tan daha fazla teknik bilgi gerektirmesidir. Node.js akış API'sine aşina olmanız ve temel JavaScript'i yazma konusunda rahat olmanız gerekir.

Gulp'un Node.js akışlarını kullanması, Grunt'tan daha hızlı olmasının ana nedenidir. Akışları kullanmak, dosya dönüşümleri için "veritabanı" olarak dosya sistemini kullanmak yerine, Gulp'un bellek içi dönüşümleri kullanması anlamına gelir. Akışlar hakkında daha fazla bilgi için akış el kitabıyla birlikte Node.js akışları API belgelerine bakın.

Bir örnek

Grunt bölümünde olduğu gibi, basit bir örnekle Gulp'u adım adım ilerleteceğiz: JavaScript modüllerimizi tek bir uygulama dosyasında birleştirmek.

Gulp'u çalıştırmak Grunt'u çalıştırmakla aynıdır. gulp komut satırı programı, çalıştırıldığı dizinde yemek tarifleri yemek kitabını (yani Gulpfile.js ) arayacaktır.

Her sayfanın yaptığı istek sayısını sınırlamak, en iyi web performansı uygulaması olarak kabul edilir (özellikle mobil cihazlarda). Yine de, işlevsellik birden çok dosyaya bölünürse, diğer geliştiricilerle işbirliği yapmak çok daha kolaydır. Görev koşucularını girin. Gulp'u uygulamamız için birden çok JavaScript dosyasını birleştirmek için kullanabiliriz, böylece mobil istemciler birçok dosya yerine tek bir dosya yüklemek zorunda kalır.

Gulp, Grunt ile aynı devasa eklenti ekosistemine sahiptir. Bu görevi kolaylaştırmak için gulp-concat eklentisine güveneceğiz. Diyelim ki projemizin yapısı şöyle görünüyor:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

src dizinimizde iki JavaScript dosyası var ve bunları dist/ app.js tek bir dosyada birleştirmek istiyoruz. Bunu başarmak için aşağıdaki Gulp görevini kullanabiliriz.

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

Önemli bitler gulp.task geri çağrısındadır. Orada, src dizinimizde .js ile biten tüm dosyaları almak için gulp.src API'sini kullanıyoruz. gulp.src API'si, daha sonra ( pipe API'si aracılığıyla) gulp-concat eklentisine iletebileceğimiz bu dosyaların bir akışını döndürür. Eklenti daha sonra akıştaki tüm dosyaları birleştirir ve onu gulp.dest işlevine iletir. gulp-dest işlevi, aldığı girdiyi diske yazar.

Gulp'un görevlerimiz için bize "yapı taşları" veya "zincirler" vermek için akışları nasıl kullandığını görebilirsiniz. Tipik bir Gulp iş akışı şöyle görünür:

1. Belirli bir türdeki tüm dosyaları alın.
2. Bu dosyaları bir eklentiye (concat!) iletin veya biraz dönüşüm yapın.
3. Dönüştürülen dosyaları başka bir bloğa geçirin (bizim durumumuzda, zincirimizi sonlandıran dest bloğu).

Grunt örneğinde olduğu gibi, proje dizinimizin kökünden sadece gulp çalıştırmak, Gulpfile.js dosyasında tanımlanan default görevi tetikleyecektir. Bu görev, dosyalarımızı birleştirir ve şimdi uygulamamızı veya web sitemizi geliştirmeye başlayalım.

Web paketi

JavaScript görev koşucu kulübüne en yeni eklenen Webpack. Webpack, kendisini bir "modül paketleyici" olarak faturalandırır; bu, CommonJS kalıbı gibi modül kalıplarını kullanarak birden çok ayrı dosyadan dinamik olarak bir JavaScript kodu paketi oluşturabileceği anlamına gelir. Webpack ayrıca yükleyici olarak adlandırdığı eklentilere sahiptir.

Webpack hala oldukça genç ve oldukça yoğun ve kafa karıştırıcı belgelere sahip. Bu nedenle, resmi belgelere dalmadan önce Pete Hunt'ın Web Paketi deposunu harika bir başlangıç ​​noktası olarak tavsiye ederim. Ayrıca, görev koşucularında yeniyseniz veya JavaScript'te yeterli hissetmiyorsanız Webpack'i tavsiye etmem. Bu sorunlar bir yana, hala Grunt ve Gulp'un genel genişliğinden daha spesifik bir araçtır. Pek çok kişi Webpack'i Grunt veya Gulp ile birlikte bu nedenle kullanır, Webpack'in modülleri paketlemede başarılı olmasına ve Grunt veya Gulp'un daha genel görevleri yerine getirmesine izin verir.

Webpack, nihayetinde tarayıcı için Node.js tarzı kod yazmamıza, üretkenlik için büyük bir kazanç ve modüller aracılığıyla kodumuzdaki endişeleri temiz bir şekilde ayırmamıza izin veriyor. Birden çok JavaScript dosyasını tek bir uygulama dosyasında birleştirerek Gulp örneğinde elde ettiğimiz sonucu elde etmek için Webpack'i kullanalım.

Bir örnek

Web paketi, ES6 kodunu ES5'e aktarmak için genellikle Babel ile birlikte kullanılır. Kodu ES6'dan ES5'e aktarmak, geliştiricilerin henüz ES6'yı tam olarak desteklemeyen tarayıcılara veya ortamlara ES5'i sunarken gelişmekte olan ES6 standardını kullanmalarına olanak tanır. Ancak bu örnekte, Gulp örneğindeki iki dosyamızın basit bir demetini oluşturmaya odaklanacağız. Başlamak için Webpack'i kurmamız ve bir yapılandırma dosyası oluşturmamız gerekiyor, webpack.config.js . İşte dosyamız şöyle görünüyor:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

Bu örnekte, bağımlılık grafiğimizi yürütme çalışmasına başlamak için src/foo.js dosyamıza yönlendiriyoruz. Ayrıca foo.js dosyamızı da şöyle görünecek şekilde güncelledik:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

Ve bar.js dosyamızı şöyle görünecek şekilde güncelledik:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

Bu çok temel bir CommonJS örneğidir. Bu dosyaların artık bir işlevi "dışa aktardığını" fark edeceksiniz. Esasen, CommonJS ve Webpack, kodumuzu uygulamamız boyunca içe ve dışa aktarılabilen bağımsız modüller halinde düzenlemeye başlamamıza olanak tanır. Web paketi, içe ve dışa aktarma anahtar sözcüklerini takip edecek ve her şeyi tek bir dosyada, dist/app.js . Artık bir birleştirme görevini sürdürmemize gerek yok ve bunun yerine kodumuz için bir yapıya bağlı kalmamız yeterli. Çok daha iyi!

Genişleyen

Webpack, “Bu sadece JavaScript” olmasıyla Gulp'a benzer. Yükleyici sistemi aracılığıyla diğer görev çalıştırma görevlerini yapmak için genişletilebilir. Örneğin, Sass'ı CSS'de derlemek için css-loader ve sass-loader'ı kullanabilir ve hatta require CommonJS modelini aşırı yükleyerek JavaScript'inizde Sass'ı kullanabilirsiniz! Ancak, genellikle Webpack'i yalnızca JavaScript modülleri oluşturmak için kullanmayı ve görev çalıştırma için daha genel amaçlı başka bir yaklaşım kullanmayı savunuyorum (örneğin, Webpack ve npm komut dosyaları veya Webpack ve Gulp, diğer her şeyi halletmek için).

npm Komut Dosyaları

npm betikleri en son yenilikçi çılgınlıktır ve bunun iyi bir nedeni vardır. Tüm bu araçlarda gördüğümüz gibi, bir projeye getirebilecekleri bağımlılıkların sayısı sonunda kontrolden çıkabilir. Bir inşa sürecinin giriş noktası olarak npm betiklerini savunurken gördüğüm ilk gönderi James Halliday'e aitti. Gönderisi, npm komut dosyalarının göz ardı edilen gücünü mükemmel bir şekilde özetliyor (benimki vurgusu):

JavaScript projelerinde derleme otomasyonu yapmak için çekiciliğini hiç hissetmediğim bazı süslü araçlar var çünkü daha az bilinen npm run komutu, çok küçük bir yapılandırma ayak izini korurken yapmam gereken her şey için mükemmel bir şekilde yeterliydi.

Sondaki parçayı yakaladın mı? Npm komut dosyalarının birincil çekiciliği, "çok küçük bir yapılandırma ayak izine" sahip olmalarıdır. Bu, npm betiklerinin yakalanmaya başlamasının ana nedenlerinden biridir (ne yazık ki neredeyse dört yıl sonra). Grunt, Gulp ve hatta Webpack ile, sonunda ikili dosyaları saran ve bir projedeki bağımlılık sayısını ikiye katlayan eklentilerde boğulmaya başlar.

Keith Cirkel, Grunt veya Gulp'u değiştirmek için npm'yi kullanma konusunda bir rehbere sahiptir. Npm komut dosyalarının gücünden tam olarak nasıl yararlanılacağına ilişkin planı sağlıyor ve temel bir eklenti olan Parallel Shell'i (ve buna benzer bir dizi başka eklentiyi) tanıttı.

Bir örnek

Grunt hakkındaki bölümümüzde, popüler Grunticon modülünü aldık ve bir Grunt görevinde SVG simgeleri (PNG yedekleriyle) oluşturduk. Bu, benim için npm komut dosyalarıyla ilgili tek acı noktasıydı. Bir süre, Grunticon'u kullanmak için projeler için Grunt'u kurdum. Kelimenin tam anlamıyla Grunt'a, npm görevimde, görev çalıştırıcı başlangıcını (veya iş yerinde adlandırmaya başladığımız gibi, bir yapı aracı turducken) elde etmek için "kabuğun dışına çıkarım". Neyse ki, Grunticon'un arkasındaki fantastik grup olan The Filament Group, araçları Grunticon-Lib'in bağımsız (yani Grunt içermeyen) bir sürümünü yayınladı. Öyleyse, npm komut dosyalarıyla bazı simgeler oluşturmak için kullanalım!

Bu örnek, tipik bir npm komut dosyası görevinden biraz daha gelişmiştir. Tipik bir npm komut dosyası görevi, uygun bayraklar veya yapılandırma dosyasıyla bir komut satırı aracına yapılan çağrıdır. İşte Sass to CSS'imizi derleyen daha tipik bir görev:

 "sass": "node-sass src/scss/ -o dist/css",

Çeşitli seçeneklerle nasıl tek bir satır olduğunu gördün mü? Görev dosyasına gerek yok, hızlandıracak derleme aracı yok - sadece npm run sass ve artık Sass'sınız ve CSS oldunuz. Npm komut dosyalarının gerçekten güzel bir özelliği, komut dosyası görevlerini birlikte nasıl zincirleyebileceğinizdir. Örneğin, Sass görevimiz başlamadan önce bir görevi çalıştırmak istediğimizi varsayalım. Bunun gibi yeni bir komut dosyası girişi oluştururuz:

 "presass": "echo 'before sass',

Bu doğru: npm pre- eki anlar. Ayrıca post- ön eki de anlar. Başka bir komut dosyası girişiyle aynı ada sahip bir pre- veya post- öneki olan herhangi bir komut dosyası girişi, bu girdiden önce veya sonra çalışacaktır.

Simgelerimizi dönüştürmek için gerçek bir Node.js dosyası gerekir. Yine de çok ciddi değil. Sadece bir tasks dizini oluşturun ve grunticon.js veya icons.js adında yeni bir dosya oluşturun veya projede çalışanlar için ne anlam ifade ediyorsa onu oluşturun. Dosya oluşturulduktan sonra, Grunticon işlemimizi başlatmak için biraz JavaScript yazabiliriz.

Not: Bu örneklerin tümü ES6 kullanıyor, bu yüzden görevimizi yürütmek için babel-node kullanacağız. Daha rahatsa, ES5 ve Node.js'yi kolayca kullanabilirsiniz.

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

Kodun içine girelim ve neler olduğunu anlayalım.

1. grunticon-lib ve globby olmak üzere iki kitaplığı import aktarıyoruz (yani gerektiriyor). Globby en sevdiğim araçlardan biri ve dosyalar ve globlarla çalışmayı çok kolaylaştırıyor. Globby, Node.js Glob'u (tüm JavaScript dosyalarını ./*.js aracılığıyla seçin) Promise desteğiyle geliştirir. Bu durumda, onu src/icons dizinindeki tüm dosyaları almak için kullanıyoruz.
2. Bunu yaptıktan sonra, bir options nesnesine birkaç seçenek koyarız ve ardından üç argümanla Grunticon-Lib'i çağırırız:
   • simge dosyaları,
   • hedef,
   • Seçenekler. Kitaplık bu simgeleri devralır ve çiğner ve sonunda istediğimiz dizinde SVG'leri ve PNG sürümlerini oluşturur.
3. Neredeyse tamamız. Bunun ayrı bir dosyada olduğunu ve bu dosyayı npm betiğimizden çağırmak için şöyle bir "kanca" eklememiz gerektiğini unutmayın: "icons": "babel-node tasks/icons.js" .
4. Artık npm run icons ve simgelerimiz her seferinde oluşturulacaktır.

npm komut dosyaları, eklenti borcu olmadan diğer görev yürütücülerle benzer düzeyde güç ve esneklik sunar.

Burada Kapsanan Görev Koşucularının Dağılımı

Bazı Kolay Galibiyetler

Tüm bu örnekler ve görev koşucuları bunaltıcı görünebilir, o yüzden parçalayalım. İlk olarak, şu anda kullanmakta olduğunuz görev yürütücüsü veya derleme sistemi ne olursa olsun, burada belirtilen bir sistemle anında değiştirilmesi gerektiğini bu makaleden çıkarmadığınızı umuyorum. Bunun gibi önemli sistemlerin değiştirilmesi çok fazla düşünülmeden yapılmamalıdır. İşte mevcut bir sistemi yükseltmek için tavsiyem: Kademeli olarak yapın.

Sarıcı Komut Dosyaları!

Artımlı bir yaklaşım, kullanılan gerçek görev çalıştırıcısının dışında olan derleme adımları için ortak bir kelime hazinesi sağlamak için mevcut görev çalıştırıcılarınızın etrafına birkaç "sarmalayıcı" npm komut dosyası yazmaya bakmaktır. Bir sarmalayıcı komut dosyası bu kadar basit olabilir:

 { "scripts": { "start": "gulp" } }

Birçok proje, yeni geliştiricilerin hızla ortama alışmalarına yardımcı olmak için start ve test npm komut dosyası bloklarını kullanır. Bir sarmalayıcı komut dosyası, görev çalıştırıcı oluşturma zincirinize başka bir soyutlama katmanı getirir, ancak bunun, npm temel öğeleri (örneğin, test ) etrafında standartlaştırmaya değer olduğunu düşünüyorum. Npm komutları, tek bir araçtan daha uzun ömürlüdür.

Küçük Bir Web Paketine Serpin

Siz veya ekibiniz JavaScript'iniz için kırılgan bir "paket siparişi" sürdürmenin acısını hissediyorsanız veya ES6'ya yükseltmek istiyorsanız, bunu Webpack'i mevcut görev çalıştıran sisteminize tanıtmak için bir fırsat olarak değerlendirin. Web paketi, istediğiniz kadar çok veya az kullanabilmeniz ve yine de ondan değer elde edebilmeniz açısından harikadır. Uygulama kodunuzu bir araya getirerek başlayın ve ardından karışıma babel-loader ekleyin. Webpack o kadar derin özelliklere sahiptir ki, uzun bir süre hemen hemen her türlü eklemeyi veya yeni özelliği barındırabilecektir.

PostCSS'yi npm Komut Dosyalarıyla Kolayca Kullanın

PostCSS, CSS'yi yazıldıktan ve ön işleme tabi tutulduktan sonra dönüştüren ve geliştiren harika bir eklenti koleksiyonudur. Başka bir deyişle, bir post-işlemcidir. Npm komut dosyalarını kullanarak PostCSS'den yararlanmak yeterince kolaydır. Önceki örneğimizde olduğu gibi bir Sass komut dosyamız olduğunu varsayalım:

 "sass": "node-sass src/scss/ -o dist/css",

Sass görevinden sonra otomatik olarak çalışacak bir komut dosyası eklemek için npm komut dosyasının lifecycle anahtar sözcüklerini kullanabiliriz:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

Bu komut dosyası, Sass komut dosyası her çalıştırıldığında çalışacaktır. Postcss-cli paketi harika çünkü konfigürasyonu ayrı bir dosyada belirtebilirsiniz. Bu örnekte, yeni bir görevi gerçekleştirmek için başka bir komut dosyası girişi eklediğimize dikkat edin; bu, npm komut dosyalarını kullanırken yaygın bir kalıptır. Uygulamanızın ihtiyaç duyduğu çeşitli görevlerin tümünü gerçekleştiren bir iş akışı oluşturabilirsiniz.

Çözüm

Görev koşucuları gerçek sorunları çözebilir. Hedefin üretim mi yoksa yerel geliştirme mi olduğuna bağlı olarak, bir JavaScript uygulamasının farklı yapılarını derlemek için görev yürütücüler kullandım. Ayrıca, Gidon şablonlarını derlemek, bir web sitesini üretime dağıtmak ve Sass'ımda eksik olan satıcı öneklerini otomatik olarak eklemek için görev yürütücüler kullandım. Bunlar önemsiz görevler değil, ancak bir görev koşucusuna sarıldığında zahmetsiz hale geldiler.

Görev koşucuları sürekli gelişiyor ve değişiyor. Güncel zamanın ruhunda en çok kullanılanları ele almaya çalıştım. Ancak Brokoli, Brunch ve Harp gibi daha bahsetmediğim başkaları da var. Bunların yalnızca araçlar olduğunu unutmayın: Bunları yalnızca belirli bir sorunu çözdüklerinde kullanın, başkaları kullandığı için değil. Mutlu görev koşuyor!