NPM komut dosyasını bir bina aracı olarak kullanmak
Genellikle iki tür JavaScript üretim aracı vardır: görev koşucuları ve modül üreticileri. Bu makalede, yudum ve homurdanma gibi görev koşucularına veya webpack’ler gibi Bundler modüllerine güvenmek yerine, NPM oluşturma komut dosyalarının özellikle yapı ve görev koşucuları olarak projeler için nasıl kullanılacağını göreceğiz. Grunt ve Gulp görev koşucularıdır, geliştirme sürecinde tekrarlanan manuel görevleri otomatikleştiriyorlar. Webpack ise, her biri kendi bağımlılığı olan ve onu statik varlıklarla birleştiren uygulama kodunun ayrı bir bölümünü alan bir Bundler modülüdür. Grunt ve Gulp makalemizde, gerçekten tartışmadığımız diğer alternatif yapı araçlarından bahsediyoruz: NPM komut dosyaları. Bazılarınız yorumlarda, NPM komut dosyasını bir görev oluşturucu/koşucu olarak nasıl kullanabileceğiniz hakkında daha fazla bilgi edinmek istediğinizi soruyor, bu yüzden tam olarak göreceğiz.
Neden NPM komut dosyası? Uzun süre homurdanma, yudum ve webpack gibi bir üretim aracı kullanıyorsanız, uygulamanız için kod yazmaya odaklanmak yerine araçla savaşmaya başladığınızı bulmaya başlayacaksınız. Her aracın kendi bir şey yapma yolu vardır ve bu da her aracın öğrenilmesi gereken kendi alışkanlıkları ve gotchans ile donatılmış olduğu anlamına gelir. Hem Grun hem de Gulp, işlevsellik eklemek için eklentilerin kullanımına çok bağlıdır ve eklentilerin çoğu mevcut NPM paketini sarar. Bu, aşağıdakiler gibi sorunlara neden olabilir:
Kullanmak istediğiniz paket için eklenti yok.
Süresi dolmuş eklenti ve temel paketi doğru desteklemez.
Eklenti, temel paket için kullanmak istediğiniz özellikleri desteklemez.
Eklenti belgeleri eksik veya belirsizdir. Eklenti hataları düzgün bir şekilde ele almaz.
Çoğu paket genellikle CLI olduğundan, bu soruna basit bir çözüm, bir inşaat aracından soyutlamayı (bazen karmaşık) kaldırmak ve komut satırında manuel olarak altta yatan bir paket çalıştırmaktır. Bu iyi bir çözümdür, ancak tüm CLI komutlarını ve seçeneklerini nasıl hatırlayacaksınız? Ve onları nasıl birbirine bağlayacaksınız? Bir CLI komutunu çalıştırabilir ve her şeyi doğru sırayla çalıştırabilirseniz ve aynı zamanda daha iyi değil mi?
NPM komut dosyaları en azından 6 NPM sürümünden beri orada olan NPM komut dosyasını girer. Pack.json dosyanızdaki Scripts özelliğini kullanarak, çeşitli CLI komutlarını çalıştırmak için özel bir komut dosyası belirlemek mümkündür. Bu, masaüstü uygulama geliştiricileri tarafından uygulamalarını oluşturmak ve yönetmek için UNIX benzeri sistemler için kullanılan GNU Make Tool’a çok benzer. Komut dosyalarınızı paketinizde tanımladıktan sonra. NPM Start veya NPM Run Testi gibi siparişleri çalıştırmanızı isteyen bir paket kullandıysanız, NPM komut dosyasını kullandınız.
Komut dosyası, tek bir terminal komutu kadar basit veya belirli bir sırayla gerçekleştirilmesi gereken bir dizi daha karmaşık komut olabilir. NPM komut dosyasını bir oluşturma aracı olarak kullanmak için, diğer derleme araçlarında yapılandırma dosyasında çalıştırmak istediğimiz görevleri tanımlamaya benzer şekilde paket.json dosyasındaki bir komut dosyası koleksiyonunu tanımlayacağız. NPM komut dosyası ile ilgili fark, herhangi bir eklenti olmadan bir CLI paketi çalıştıracağımız, ardından komut dosyasını bir komutla tetikleyebilmemiz için birleştirmemizdir. Gösteri amacıyla, Gulp vs Grunt: CSS’ye SASS derlemesi makalesinde kullandığımız aynı üretim sürecini yeniden yaratacağız.
CSS ve JavaScript’in birleştirilmesi ve daralması.
Görüntüleri optimize edin.
Projemizin örnekleri Repo Github’ı burada test ettiğimizin bir gösterimi olarak yaptı. Kullandığımız tüm NPM paketleri dahil olmak üzere daha önce yapılandırılmış bir paket.
SASS: SASS’ı CSS’ye dönüştürmek için kullanılır.
CAT: Birkaç dosyayı birleştirmek (katılmak) için kullanılır.
Clean-CSS-CLI: Clean-CSS için CLI, hızlı ve verimli optimal CSS.
Uglify-js: JavaScript ayrıştırıcısı, madenci, kompresör ve güzel.
ONCHANGE: Eklendiğinde, değiştirildiğinde veya silindiğinde dosyaları ayarlayın ve komutları çalıştırma.
NPM-Run-ALL: Birkaç NPM komut dosyasını paralel veya sırayla çalıştırın.
@squoosh/cli: Squoosh için CLI, görüntü optimal.
Paket @Squoosh/CLI, Imagemin paketi artık korunmadığından, Grunt vs Grunt makalesinde kullandığımız Imagemin-Chli paketinin yerine.
Depo ayrıca gerekli tüm demo dosyalarını ve içeriğini de içerir, böylece hazırlayacağımız NPM komut dosyasını denemek için kullanabilirsiniz. İlk NPM betiğimiz için ilk betiğinizi yapın, SASS dosyamızı SASS paketini kullanarak CSS’ye derleyerek başlayalım. İlk olarak yüklemeliyiz: NPM yükleme Sass-SAVE-DEV Paketi Node_Modules Dizorınıza yükleme. Flag-Save-Devil’in bu paketi Package.json dosyasından deveDependents’de sakladığını unutmayın. Bu, diğer geliştiricilerin sadece NPM yüklemesini çalıştırarak gelecekte gereken paketi yüklemelerini kolaylaştırır. SASS komut satırını kullanma talimatlarına göre, varlıkları/scss/style.scss dosyasını dist/css/scsss dosyasını derleyebiliriz. Style.css Aşağıdaki komutu kullanarak: SASS Varlıkları/SCSS/Style.scss Dist/CSS/Style.csss Bu komutu Packs.json dosyamıza SCSS adlı bir NPM komut dosyası olarak ekleyelim: “Komut dosyaları”: { “SCSS”: “SASS Varlıkları/SCSS/Style .scss dist/css/style.css”} Şimdi komut satırından npm run scss çalıştırın. SASS dosyanızın CSS’ye başarıyla derlendiğini göreceksiniz ve komut çıkışı SASS’ı manuel olarak çalıştırmakla aynı olmalıdır.
[E-posta korumalı] : ~/geliştirme/projeler/npm-scripts $ npm run scss
> [E -posta Korumalı] SCSS
> SASS Varlıkları/SCSS/Style.scss dist/css/style.css
Bu süreç daha sonra proje gereksinimlerimizin geri kalanı için tekrarlanabilir. Komutu test etme Komut dosyasının beklediğiniz şeyi yapmadığını fark ederseniz, ilgili komutu NPX komutunu kullanarak terminalinizden manuel olarak test edebilirsiniz. Bu komut, yerel olarak yüklenen paketten diğer hakem komutlarını çalıştırmanıza olanak tanır. SCSS komut dosyası komutlarını NPX ile test etmek için şöyle çalıştırabilirsiniz: NPX SASS Varlıkları/SCSS/Style.scsss dist/css/style.css Daha fazla komut dosyası Eklemek Eklemek istediğimiz ek komut dosyaları için aynı prosedürü izleyebiliriz.
Paketi NPM kullanarak yükleyin.
Scripts Dosya Pack.json’daki komut dosyasını, ilgili terminal komutlarını çalıştırmak için yapılandırın.
Komut dosyasını birleştirmek için zincir komut dosyaları da mümkündür. Bunun nedeni, NPM Run’ın kendisinin bir CLI komutu olması ve başka bir komut dosyasından çalıştırılabilir olmasıdır. Örneğin: “Scripts”: {… “Cog: CSS”: “Cog -o dist/css/styles.css dist/css/style.css varlıkları/css/test.css”, “cog: js” ” Mkdir -p dist/js && tumat -o dist/js/scripts.js varlıkları/js/test1.js varlıkları/js/test2.js “,” cum “:” npm run cum: css && npm run cum: js ” , …} Burada iki ayrı komut dosyası yaptık, CAT: CSS ve CUM: JS, CSS ve JS dosyalarını birleştiren CAT komutunu kullanıyoruz. Ayrı olarak çalıştırabiliriz, ancak genellikle tek bir komut olarak çalıştırmak için kullanışlıdır. Bunu, NPM RUN’u kullanarak her iki komut dosyasını da çalıştıran yeni bir komut dosyası oluşturarak yapabiliriz.
Komut dosyasını Gruplama Gerekli tüm paketleri yükledikten sonra, paketimizin DeveDeMenss bölümü. : “^5.5.0”, “cum”: “^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ını tartışmayacağım, ancak Şimdi NPM komut dosyası nasıl çalıştığını öğrendikten sonra, aşağıdaki komut dosyalarının her birinin ne olduğunu bulabilirsiniz: “Scripts”: {“SCSS”: “Düğüm -geçit -o dist/css varlıkları/scss/style.scss” , “COG: CSS”: “cum -o dist/css/styles.css distal/css/style.css varlıkları/css/test.css”, “cog: js”: “mkdir -p dist/js && cum – o dist/js/js/scripts.js.js varlıklar/js/test1.js varlıkları/js/test2.js “,” tuju “:” NPM Run cum: css && npm run cum: js “,” cssmin ” “Cleancss -o dist/css/styles.min. Css dist/css/styles.css”, “Uglify”: “Uglifyjs -o dist/js/scr İPts.min.js distal/js/scripss.js “,” squoosh “:” squoosh -chli –mozjpeg ‘{kalite: 70}’ varlıklar/img -d dist/img “,” yapı: css “:” npm Run scss && npm run cum: css && npm run cssmin “,” Build: js “:” npm run cum: js && npm run glify “,” Build: img “:” npm run squoosh “,” Build “:” npm “:” NPM: “NPM Run Build: CSS &&
NPM Run Build: JS && npm Run Build: IMG “}, vurgulamak istediğim önemli bir kısım en altta, burada bireysel komut dosyası grupları (CSS, JS, IMG) için bir senaryo oluşturma yaptığımız ve sonra birlikte taşındığımız Bir komut dosyası sözde yapı. Mantıksal gruplara ayırmak sadece komut dosyalarını bir araya getirmeyi kolaylaştırmakla kalmaz, aynı zamanda belirli grupları sadece varlıklarınızdan derlemek isteyebileceğiniz zaman da yardımcı olur. Örneğin, bkz.
Yararlı bir NPM Run oluşturma komutu kullanarak tüm ön uç varlıklarınızı derlemek için değişiklikleri görün, ancak kodunuzun parçasını her değiştirdiğinizde çalıştırmanız gerekiyorsa hızla müdahale edecektir. Bu durumda, komut dosyasının kodunuzdaki değişiklikleri “denetlemesine” ve ardından oluşturma komut dosyasını otomatik olarak çalıştırmasına izin vermek daha iyidir. Bunu Onchange Paket komutunu kullanarak başarabiliriz. OnChange komutu, Global deseni kullanarak belirttiğiniz dosyaya bakarak çalışır, ardından belirttiğiniz komutu (sonra -) çalıştırır. Örneğin, SASS dosyamız değiştiğinde CSS dosyalarımızı oluşturmak için: Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build: CSS, bazı yeni saat komut dosyalarına ekleyebilir ve bunları Pack.json’a ekleyebiliriz: “Scripts”:: {{{… “İzle: CSS”: “Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build:” İzle: JS “:” Onchange ‘Varlıklar/JS/*. JS’ – NPM Run Build: JS “…} Şimdi NPM Run Watch: CSS çalıştırırsak SASS dosyamızda değişiklikler görecek ve NPM Run Build: CSS (ve JS için aynı şey) tespit ederseniz. Komut dosyasını paralel olarak çalıştırmak, CSS ve JS dosyaları üzerinde çalışırken her iki el izleme komut dosyasını aynı anda çalıştırmak istediğinizi söyleyin. Run NPM Run Watch: CSS &&
NPM Run Watch: JS çalışmaz, çünkü bu komut sırayla gerçekleştirilir (yani, saat: JS saat: CSS tamamlanana kadar çalışmaz). Bu senaryoyu nasıl paralel olarak çalıştırırız? NPM-Run-All-All Paket komutunun bir rol oynadığı yer burasıdır. NPM-Run-All-All, aynı anda bir grup görev gerçekleştirmemizi sağlayan bir bayrak paraleline sahiptir. Öyleyse yeni bir saat komut dosyası oluşturalım: “Scripts”: {… “İzle”: “NPM-Run-Alll-Paralel Watch:*” …} Bu komut tüm saat komut dosyalarını çalıştıracak:* Paralel olarak, böylece CSS ve JS dosyalarımız üzerinde çalışabilir ve aynı anda yeniden yapılabilir. Başarı! Son NPM komut dosyamız şimdi: “betiği”: {“scss”: “sass varlıkları/scss/style.scssss dist/css/style.css”, “cog: css”: “cog -o dist/css/styles.css .CSS DIST/CSS/Style.css Varlıklar/CSS/Test.css “,” Cog: JS “:” MKDIR -P Dist/Js -o Dist/JS/Scripts.js Varlıklar/JS/Test1.js Varlıklar /Js /test2.js “,” cum “:” npm run cum: css && npm run cum: 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 -chli -mozjpeg ‘{kalite: 70}’ ‘varlıklar/img – D dist /img “,” Build: css “:” npm run scss && npm run cum: css && npm run cssmin “,” Build: js “:” npm run cum: js && npm run glify “,” Build: img “:” NPM Run Squoosh “,” Build “:” NPM Run Build: CSS && NPM Run Build: JS &&
NPM Run Build: IMG “,” İzle: CSS “:” Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build: CSS “,” İzle: JS “:” Onchange ‘Varlıklar/JS/*. JS’. -Npm run build: js “,” izle “:” npm-run-nallalel watch:*”}, komut dosyasını bu şekilde kullanmak için başka avantajları uygulamak için kullanma, derleme komut dosyasını yaymak için geri kullanmak mümkündür Varlıklarınız sunucuya. Örneğin, GitHub aracılığıyla yönettiğiniz ve spinupwp ile gönderildiğiniz web siteleri veya uygulamalar için ön uç varlıklarınızı oluşturmak için NPM komut dosyasını kullandığınızı söyleyin. SpinupWP Git desteği kullanarak, siteyi otomatik olarak çizecek şekilde yapılandıracaksınız. GitHub’ın deposundan kod. Ancak, varlıklar sunucuya SSH yapana kadar ve npm yükleme ve NPM run yapısını manuel olarak çalıştırana kadar oluşturulmayacaktır. Neyse ki, bu komutu spinupwp’de Dağıtım komut dosyasına ekleyebilirsiniz. :
Yukarıdaki örnekte, GIT’in deposundan dağıtılan küçük bir örnek sitesi oluşturdum.Depo, örnek projemizle aynı NPM varlık dosyasına ve komut dosyasına sahiptir.Tek ekleme, CSS, JavaScript ve NPM komut dosyası tarafından oluşturulan görüntüleri kullanarak bazı demo verileri görüntüleyen index.html dosyasıdır.SPINUPWP’deki dağıtım betiğinde, aşağıdaki iki komutu ekliyorum: NPM yükleme NPM Run Build şimdi yeni bir kod ittiğimde, spinupwp, GIT’de değişiklikler yaptıktan sonra yaymak için komut dosyası komutunu çalıştıracak, yeni bir NPM paketi yükleyecek Ön ucumun tüm varlıklarını ekleyebilir ve geri almış olabilirim.🙂.İddianamenin artık NPM komut dosyalarını ve CLI paketlerini kullanarak bir oluşturma aracı nasıl yapılacağı hakkında iyi bir fikre sahip olmalıdır.Peki, Grunt veya Gulp gibi araçlar oluşturmak yerine NPM komut dosyasını kullanmalı mısınız?
Neden NPM komut dosyası? Uzun süre homurdanma, yudum ve webpack gibi bir üretim aracı kullanıyorsanız, uygulamanız için kod yazmaya odaklanmak yerine araçla savaşmaya başladığınızı bulmaya başlayacaksınız. Her aracın kendi bir şey yapma yolu vardır ve bu da her aracın öğrenilmesi gereken kendi alışkanlıkları ve gotchans ile donatılmış olduğu anlamına gelir. Hem Grun hem de Gulp, işlevsellik eklemek için eklentilerin kullanımına çok bağlıdır ve eklentilerin çoğu mevcut NPM paketini sarar. Bu, aşağıdakiler gibi sorunlara neden olabilir:
Kullanmak istediğiniz paket için eklenti yok.
Süresi dolmuş eklenti ve temel paketi doğru desteklemez.
Eklenti, temel paket için kullanmak istediğiniz özellikleri desteklemez.
Eklenti belgeleri eksik veya belirsizdir. Eklenti hataları düzgün bir şekilde ele almaz.
Çoğu paket genellikle CLI olduğundan, bu soruna basit bir çözüm, bir inşaat aracından soyutlamayı (bazen karmaşık) kaldırmak ve komut satırında manuel olarak altta yatan bir paket çalıştırmaktır. Bu iyi bir çözümdür, ancak tüm CLI komutlarını ve seçeneklerini nasıl hatırlayacaksınız? Ve onları nasıl birbirine bağlayacaksınız? Bir CLI komutunu çalıştırabilir ve her şeyi doğru sırayla çalıştırabilirseniz ve aynı zamanda daha iyi değil mi?
NPM komut dosyaları en azından 6 NPM sürümünden beri orada olan NPM komut dosyasını girer. Pack.json dosyanızdaki Scripts özelliğini kullanarak, çeşitli CLI komutlarını çalıştırmak için özel bir komut dosyası belirlemek mümkündür. Bu, masaüstü uygulama geliştiricileri tarafından uygulamalarını oluşturmak ve yönetmek için UNIX benzeri sistemler için kullanılan GNU Make Tool’a çok benzer. Komut dosyalarınızı paketinizde tanımladıktan sonra. NPM Start veya NPM Run Testi gibi siparişleri çalıştırmanızı isteyen bir paket kullandıysanız, NPM komut dosyasını kullandınız.
Komut dosyası, tek bir terminal komutu kadar basit veya belirli bir sırayla gerçekleştirilmesi gereken bir dizi daha karmaşık komut olabilir. NPM komut dosyasını bir oluşturma aracı olarak kullanmak için, diğer derleme araçlarında yapılandırma dosyasında çalıştırmak istediğimiz görevleri tanımlamaya benzer şekilde paket.json dosyasındaki bir komut dosyası koleksiyonunu tanımlayacağız. NPM komut dosyası ile ilgili fark, herhangi bir eklenti olmadan bir CLI paketi çalıştıracağımız, ardından komut dosyasını bir komutla tetikleyebilmemiz için birleştirmemizdir. Gösteri amacıyla, Gulp vs Grunt: CSS’ye SASS derlemesi makalesinde kullandığımız aynı üretim sürecini yeniden yaratacağız.
CSS ve JavaScript’in birleştirilmesi ve daralması.
Görüntüleri optimize edin.
Projemizin örnekleri Repo Github’ı burada test ettiğimizin bir gösterimi olarak yaptı. Kullandığımız tüm NPM paketleri dahil olmak üzere daha önce yapılandırılmış bir paket.
SASS: SASS’ı CSS’ye dönüştürmek için kullanılır.
CAT: Birkaç dosyayı birleştirmek (katılmak) için kullanılır.
Clean-CSS-CLI: Clean-CSS için CLI, hızlı ve verimli optimal CSS.
Uglify-js: JavaScript ayrıştırıcısı, madenci, kompresör ve güzel.
ONCHANGE: Eklendiğinde, değiştirildiğinde veya silindiğinde dosyaları ayarlayın ve komutları çalıştırma.
NPM-Run-ALL: Birkaç NPM komut dosyasını paralel veya sırayla çalıştırın.
@squoosh/cli: Squoosh için CLI, görüntü optimal.
Paket @Squoosh/CLI, Imagemin paketi artık korunmadığından, Grunt vs Grunt makalesinde kullandığımız Imagemin-Chli paketinin yerine.
Depo ayrıca gerekli tüm demo dosyalarını ve içeriğini de içerir, böylece hazırlayacağımız NPM komut dosyasını denemek için kullanabilirsiniz. İlk NPM betiğimiz için ilk betiğinizi yapın, SASS dosyamızı SASS paketini kullanarak CSS’ye derleyerek başlayalım. İlk olarak yüklemeliyiz: NPM yükleme Sass-SAVE-DEV Paketi Node_Modules Dizorınıza yükleme. Flag-Save-Devil’in bu paketi Package.json dosyasından deveDependents’de sakladığını unutmayın. Bu, diğer geliştiricilerin sadece NPM yüklemesini çalıştırarak gelecekte gereken paketi yüklemelerini kolaylaştırır. SASS komut satırını kullanma talimatlarına göre, varlıkları/scss/style.scss dosyasını dist/css/scsss dosyasını derleyebiliriz. Style.css Aşağıdaki komutu kullanarak: SASS Varlıkları/SCSS/Style.scss Dist/CSS/Style.csss Bu komutu Packs.json dosyamıza SCSS adlı bir NPM komut dosyası olarak ekleyelim: “Komut dosyaları”: { “SCSS”: “SASS Varlıkları/SCSS/Style .scss dist/css/style.css”} Şimdi komut satırından npm run scss çalıştırın. SASS dosyanızın CSS’ye başarıyla derlendiğini göreceksiniz ve komut çıkışı SASS’ı manuel olarak çalıştırmakla aynı olmalıdır.
[E-posta korumalı] : ~/geliştirme/projeler/npm-scripts $ npm run scss
> [E -posta Korumalı] SCSS
> SASS Varlıkları/SCSS/Style.scss dist/css/style.css
Bu süreç daha sonra proje gereksinimlerimizin geri kalanı için tekrarlanabilir. Komutu test etme Komut dosyasının beklediğiniz şeyi yapmadığını fark ederseniz, ilgili komutu NPX komutunu kullanarak terminalinizden manuel olarak test edebilirsiniz. Bu komut, yerel olarak yüklenen paketten diğer hakem komutlarını çalıştırmanıza olanak tanır. SCSS komut dosyası komutlarını NPX ile test etmek için şöyle çalıştırabilirsiniz: NPX SASS Varlıkları/SCSS/Style.scsss dist/css/style.css Daha fazla komut dosyası Eklemek Eklemek istediğimiz ek komut dosyaları için aynı prosedürü izleyebiliriz.
Paketi NPM kullanarak yükleyin.
Scripts Dosya Pack.json’daki komut dosyasını, ilgili terminal komutlarını çalıştırmak için yapılandırın.
Komut dosyasını birleştirmek için zincir komut dosyaları da mümkündür. Bunun nedeni, NPM Run’ın kendisinin bir CLI komutu olması ve başka bir komut dosyasından çalıştırılabilir olmasıdır. Örneğin: “Scripts”: {… “Cog: CSS”: “Cog -o dist/css/styles.css dist/css/style.css varlıkları/css/test.css”, “cog: js” ” Mkdir -p dist/js && tumat -o dist/js/scripts.js varlıkları/js/test1.js varlıkları/js/test2.js “,” cum “:” npm run cum: css && npm run cum: js ” , …} Burada iki ayrı komut dosyası yaptık, CAT: CSS ve CUM: JS, CSS ve JS dosyalarını birleştiren CAT komutunu kullanıyoruz. Ayrı olarak çalıştırabiliriz, ancak genellikle tek bir komut olarak çalıştırmak için kullanışlıdır. Bunu, NPM RUN’u kullanarak her iki komut dosyasını da çalıştıran yeni bir komut dosyası oluşturarak yapabiliriz.
Komut dosyasını Gruplama Gerekli tüm paketleri yükledikten sonra, paketimizin DeveDeMenss bölümü. : “^5.5.0”, “cum”: “^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ını tartışmayacağım, ancak Şimdi NPM komut dosyası nasıl çalıştığını öğrendikten sonra, aşağıdaki komut dosyalarının her birinin ne olduğunu bulabilirsiniz: “Scripts”: {“SCSS”: “Düğüm -geçit -o dist/css varlıkları/scss/style.scss” , “COG: CSS”: “cum -o dist/css/styles.css distal/css/style.css varlıkları/css/test.css”, “cog: js”: “mkdir -p dist/js && cum – o dist/js/js/scripts.js.js varlıklar/js/test1.js varlıkları/js/test2.js “,” tuju “:” NPM Run cum: css && npm run cum: js “,” cssmin ” “Cleancss -o dist/css/styles.min. Css dist/css/styles.css”, “Uglify”: “Uglifyjs -o dist/js/scr İPts.min.js distal/js/scripss.js “,” squoosh “:” squoosh -chli –mozjpeg ‘{kalite: 70}’ varlıklar/img -d dist/img “,” yapı: css “:” npm Run scss && npm run cum: css && npm run cssmin “,” Build: js “:” npm run cum: js && npm run glify “,” Build: img “:” npm run squoosh “,” Build “:” npm “:” NPM: “NPM Run Build: CSS &&
NPM Run Build: JS && npm Run Build: IMG “}, vurgulamak istediğim önemli bir kısım en altta, burada bireysel komut dosyası grupları (CSS, JS, IMG) için bir senaryo oluşturma yaptığımız ve sonra birlikte taşındığımız Bir komut dosyası sözde yapı. Mantıksal gruplara ayırmak sadece komut dosyalarını bir araya getirmeyi kolaylaştırmakla kalmaz, aynı zamanda belirli grupları sadece varlıklarınızdan derlemek isteyebileceğiniz zaman da yardımcı olur. Örneğin, bkz.
Yararlı bir NPM Run oluşturma komutu kullanarak tüm ön uç varlıklarınızı derlemek için değişiklikleri görün, ancak kodunuzun parçasını her değiştirdiğinizde çalıştırmanız gerekiyorsa hızla müdahale edecektir. Bu durumda, komut dosyasının kodunuzdaki değişiklikleri “denetlemesine” ve ardından oluşturma komut dosyasını otomatik olarak çalıştırmasına izin vermek daha iyidir. Bunu Onchange Paket komutunu kullanarak başarabiliriz. OnChange komutu, Global deseni kullanarak belirttiğiniz dosyaya bakarak çalışır, ardından belirttiğiniz komutu (sonra -) çalıştırır. Örneğin, SASS dosyamız değiştiğinde CSS dosyalarımızı oluşturmak için: Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build: CSS, bazı yeni saat komut dosyalarına ekleyebilir ve bunları Pack.json’a ekleyebiliriz: “Scripts”:: {{{… “İzle: CSS”: “Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build:” İzle: JS “:” Onchange ‘Varlıklar/JS/*. JS’ – NPM Run Build: JS “…} Şimdi NPM Run Watch: CSS çalıştırırsak SASS dosyamızda değişiklikler görecek ve NPM Run Build: CSS (ve JS için aynı şey) tespit ederseniz. Komut dosyasını paralel olarak çalıştırmak, CSS ve JS dosyaları üzerinde çalışırken her iki el izleme komut dosyasını aynı anda çalıştırmak istediğinizi söyleyin. Run NPM Run Watch: CSS &&
NPM Run Watch: JS çalışmaz, çünkü bu komut sırayla gerçekleştirilir (yani, saat: JS saat: CSS tamamlanana kadar çalışmaz). Bu senaryoyu nasıl paralel olarak çalıştırırız? NPM-Run-All-All Paket komutunun bir rol oynadığı yer burasıdır. NPM-Run-All-All, aynı anda bir grup görev gerçekleştirmemizi sağlayan bir bayrak paraleline sahiptir. Öyleyse yeni bir saat komut dosyası oluşturalım: “Scripts”: {… “İzle”: “NPM-Run-Alll-Paralel Watch:*” …} Bu komut tüm saat komut dosyalarını çalıştıracak:* Paralel olarak, böylece CSS ve JS dosyalarımız üzerinde çalışabilir ve aynı anda yeniden yapılabilir. Başarı! Son NPM komut dosyamız şimdi: “betiği”: {“scss”: “sass varlıkları/scss/style.scssss dist/css/style.css”, “cog: css”: “cog -o dist/css/styles.css .CSS DIST/CSS/Style.css Varlıklar/CSS/Test.css “,” Cog: JS “:” MKDIR -P Dist/Js -o Dist/JS/Scripts.js Varlıklar/JS/Test1.js Varlıklar /Js /test2.js “,” cum “:” npm run cum: css && npm run cum: 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 -chli -mozjpeg ‘{kalite: 70}’ ‘varlıklar/img – D dist /img “,” Build: css “:” npm run scss && npm run cum: css && npm run cssmin “,” Build: js “:” npm run cum: js && npm run glify “,” Build: img “:” NPM Run Squoosh “,” Build “:” NPM Run Build: CSS && NPM Run Build: JS &&
NPM Run Build: IMG “,” İzle: CSS “:” Onchange ‘Varlıklar/SCSS/*. SCSS’ – NPM Run Build: CSS “,” İzle: JS “:” Onchange ‘Varlıklar/JS/*. JS’. -Npm run build: js “,” izle “:” npm-run-nallalel watch:*”}, komut dosyasını bu şekilde kullanmak için başka avantajları uygulamak için kullanma, derleme komut dosyasını yaymak için geri kullanmak mümkündür Varlıklarınız sunucuya. Örneğin, GitHub aracılığıyla yönettiğiniz ve spinupwp ile gönderildiğiniz web siteleri veya uygulamalar için ön uç varlıklarınızı oluşturmak için NPM komut dosyasını kullandığınızı söyleyin. SpinupWP Git desteği kullanarak, siteyi otomatik olarak çizecek şekilde yapılandıracaksınız. GitHub’ın deposundan kod. Ancak, varlıklar sunucuya SSH yapana kadar ve npm yükleme ve NPM run yapısını manuel olarak çalıştırana kadar oluşturulmayacaktır. Neyse ki, bu komutu spinupwp’de Dağıtım komut dosyasına ekleyebilirsiniz. :
Yukarıdaki örnekte, GIT’in deposundan dağıtılan küçük bir örnek sitesi oluşturdum.Depo, örnek projemizle aynı NPM varlık dosyasına ve komut dosyasına sahiptir.Tek ekleme, CSS, JavaScript ve NPM komut dosyası tarafından oluşturulan görüntüleri kullanarak bazı demo verileri görüntüleyen index.html dosyasıdır.SPINUPWP’deki dağıtım betiğinde, aşağıdaki iki komutu ekliyorum: NPM yükleme NPM Run Build şimdi yeni bir kod ittiğimde, spinupwp, GIT’de değişiklikler yaptıktan sonra yaymak için komut dosyası komutunu çalıştıracak, yeni bir NPM paketi yükleyecek Ön ucumun tüm varlıklarını ekleyebilir ve geri almış olabilirim.🙂.İddianamenin artık NPM komut dosyalarını ve CLI paketlerini kullanarak bir oluşturma aracı nasıl yapılacağı hakkında iyi bir fikre sahip olmalıdır.Peki, Grunt veya Gulp gibi araçlar oluşturmak yerine NPM komut dosyasını kullanmalı mısınız?
NPM komut dosyasının, özellikle daha küçük projeler için homurdanma ve yudum gibi araçlar inşa etmek ve incelemek zorunda kalmaktan daha temiz bir çözüm gibi göründüğünü düşünüyorum. Ancak, paketinizi hayal edebiliyorum.json dosyası birçok komut dosyası olan daha büyük projeler için çok dağınık ve karmaşık hale geliyor. O zaman yapılarınız için ayrı olan özel bir yapılandırma dosyası daha mantıklı olabilir. Ayrıca, performans homurdanan ve yudumdan çok daha kötü görünüyor. NPM komut dosyaları, Gulp gibi düğümlerin akışını kullanabilme avantajına sahip değildir, ancak homurdanma bile NPM komut dosyasından önemli ölçüde daha hızlı çalışır. Imagmemin-chi’yi @squoosh/cli ile değiştirdiğinden, kriterleri doğrudan homurdanma/gulp performansı ile karşılaştırmak zordur, ancak görüntü işlemeyi göz ardı etsek bile, yavaş NPM komut dosyaları: homurdanma: 1.6 saniye
Stres: 0.84 saniye
NPM komut dosyası (görüntü işleme olmadan): 2.0 saniye
