Son zamanlarda Yudum popülerlik kazanıyor ve bunun nedeni anlaşılabilir. Daha hızlı, daha güzel ve daha basit Homurtu... Sık sık onunla çalışmak zorunda kaldım, ancak her zaman hazır çözümler aldım ve hepsini nasıl yaptığını tam olarak anlamadım. Bu hafta sonu bu küçük sorunu sökmeye ve kapatmaya karar verdim. Bugün bunun hakkında konuşacağız.

gulp nedir?

Gulp, önden bir inşa aracıdır. Tekrarlayan görevleri otomatikleştirmenize olanak tanır (CSS ve JS dosyalarını oluşturma ve küçültme, testler çalıştırma, tarayıcıyı yeniden başlatma ve diğerleri). Böylece Gulp, web geliştirme sürecini hızlandırır ve optimize eder.

Gulp Kurulumu

Gulp'u kurmak yeterince kolaydır. Bir şey sizin için işe yaramazsa, yorumlara yazın veya sorununuzu google'a yazın. Yani, yüklemek için 3 adım yapmanız gerekir:

• Gulp'u global olarak yükleyin
• Gulp'u devDependencies olarak kurun (geliştirme bağımlılıkları)
• gulpfile.js dosyası oluşturun

İlk adım, Gulp'u global olarak kurmaktır. Terminali açın ve şunu yazın:

npm install --global yudum

Daha sonra projeniz için Gulp'u devDependencies olarak kurmanız gerekiyor. Bir package.json dosyanız olduğundan emin olun. Orada değilse, konsolda npm init yazarak oluşturun. Artık Gulp'u devDependencies olarak yükleyebilirsiniz:

npm install --save-dev yudum

Son olarak, projenizin kökünde görevlerinizi içerecek bir gulpfile.js oluşturmanız gerekiyor. Ara adım olarak gulp-util eklentisini kuracağız. Eklentilerin nasıl yüklendiğini göstermek için:

npm install --save-dev gulp-util

Şimdi ilk problemimizi yazma zamanı. Yeni oluşturduğumuz gulpfile.js dosyasını açın ve içine şunu yazın:

/ * Dosya: gulpfile.js * / // tüm eklentilerimizi topla var gulp = require ("gulp"), gutil = require ("gulp-util"); // varsayılan olarak çalışacak bir görev oluştur yudum. görev ("varsayılan", işlev () ( gutil. log'u döndür ("Gulp çalışıyor!")));

Ve şimdi terminalde sadece yudum çalıştırmamız gerekiyor ve buna benzer bir şey göreceğiz:

> gulp [12:32:08] gulpfile ~ / Projects / gulp-scotch-io / gulpfile.js kullanımı [12:32:08] "Varsayılan" başlatılıyor ... [12:32:08] Gulp çalışıyor! [12:32:08] 1 ms sonra "varsayılan" tamamlandı

genel bakış

Gulp'un kendisi çok özelliksizdir. Ancak ihtiyacınız olan her şey ayrı eklentilerde alınır. Gulp ile harikalar yaratıyorlar.

Gulp api çok küçüktür ve yalnızca 4 üst düzey işlev içerir:

• yudum.görev
• gulp.src
• gulp.dest
• yudum. izle

gulp.task görevlerimizi tanımlar. Argüman olarak bir isim, bağımlılıklar (dizi) ve fonksiyon (ana eylemler) alır. Bağımlılık olmayabilir:

yudum. görev ("görevim", işlev () (// bir şeyler yap)); yudum. görev ("bağımlıgörev", ["görevim"], işlev () ( // "görevim" tamamlandıktan sonra bir şeyler yap });

gulp.src kullanmak istediğimiz dosyalara işaret eder. Eklentiler aracılığıyla dosyalara erişmek için .pipe kullanır.

gulp.dest, değiştirilen dosyaları kaydetmek istediğimiz klasörü gösterir.

gulp.src ve gulp.dest dosyaların basit bir kopyası için kullanılır:

yudum. görev ("kopyalaHtml", işlev () ( // tüm html dosyalarını kaynaktan / genele kopyala / yudum. src ("kaynak / *.html"). boru (gulp. dest ("genel")); ));

Gulp, yerleşik bir dosya değişikliği yanıt sistemine sahiptir (gulp.watch). Dosyaları değiştirirken ihtiyacınız olan diğer görevleri çalıştırmak için bu görevi kullanabilirsiniz.

Google Page Speed'de daha fazla puan kazanmak ister misiniz? Ön uç montajının ne olduğundan emin değil misiniz? O zaman senin için ilginç olacak.

Node.JS nedir?

Node.JS'ye genellikle "kuzey JavaScript" denir. Bu platform, JavaScript sözdizimini kullanarak programlar yazmanıza olanak tanır.

Windows, Mac OS ve Linux için uygulamalar var.

Paket yöneticisi dahil NPM ile paketleri kurabilirsiniz.

gulp nedir?

Gulp, web yöneticilerinin mizanpaj aşamasında projeler oluşturmasına yardımcı olan Node.JS'de yazılmış bir pakettir.

Gulp'u yüklemek için komut satırını kullanmanız gerekir.

Npm kurulum yudum

Bu makalenin sonunda, tipik bir proje oluşturmanıza yardımcı olacak bir dosya bulunmaktadır.

Bu örnekte Gulp kullanarak aşağıdakileri yapacağız:

• Web için görüntüleri otomatik olarak optimize edin;
• Önişlemcilerden (SASS, SCSS) bir küçültülmüş stil dosyasını bir araya getirmek;
• Bir küçültülmüş komut dosyasını bir araya getirmek.

Gulp ile nasıl ön uç oluşturabilirim?

Her şeyin nasıl çalıştığını anlamak için, her şeye adım adım bakalım.

Yapı ekran görüntüsünde görülebilir.

• Varlıklar klasörü - kaynak resimler, stiller ve komut dosyaları için;
• Ortak klasör - proje oluşturmanın sonucu içinde yer alacaktır;
• gulpfile.js - toplayıcının mantığını açıklayan bir dosya;
• package.json, Gulp'un düzgün çalışmasını sağlamak için kullanılan programlar ve eklentiler hakkında bilgi içeren bir dosyadır.

paket.json

Dosya içeriği:

("name": "gulp_project", "sürüm": "1.0.0", "açıklama": "Örnek", "ana": "gulpfile.js", "scripts": ("test": "echo \" Hata: test belirtilmedi \ "&& çıkış 1"), "yazar": "Dmitriy Ilichev", "lisans": "ISC", "devDependencies": ("gulp": "^ 3.9.0", "gulp-csso" ":" ^ 1.0.0 "," gulp-concat ":" ^ 2.6.0 "," gulp-uglify ":" ^ 1.2.0 "," gulp-imagemin ":" ^ 2.3.0 "," gulp -sass ":" ^ 2.1.1 "))

Bu dosyadan şu anlaşılıyor:

• Gulp_project proje adı, versiyonu ve açıklaması;
• Ana dosya gulpfile.js'dir;
• Projenin yazarı, lisans - tüm bunlar o kadar önemli değil ve sadece bu alanlar boş olabilir;
• İlginç bir nokta devDependencies. Bağımlılıkları açıklar.

Dosya her zamanki gibi düzenlenebilir Metin düzeltici... npm int komutu ile yeni bir proje için de oluşturulabilir.

Buna dayanarak, Node.JS, iş için şunlara ihtiyacımız olduğunu anlar:

• Bina için Gulp sürüm 3.9.0 ve üstü;
• Gulp-csso sürüm 1.0.0 ve üstü - stillerin küçültülmesi için eklenti (css);
• Gulp-concat sürüm 2.6.0 ve üstü - birden fazla dosyayı tek bir dosyada birleştirmek için eklenti;
• Gulp-uglify sürüm 1.2.0 ve üstü - javascript küçültme eklentisi;
• Gulp-imagemin sürüm 2.3.0 ve üzeri - görüntü optimizasyonu için eklenti;
• Gulp-sass sürüm 2.1.1 ve üstü, sass'tan (scss) css almak için bir eklentidir.

İyi! Bundan sonra, tüm bunları yüklemeniz gerekir. Bu komut satırından yapılır. Projenin bulunduğu klasörde olmak için şu komutu çalıştırmanız gerekir:

Npm kurulumu

Gerekli tüm bilgiler package.json'dan alınacaktır.

Tüm bu sihirden sonra ortaya çıkacak servis klasörü düğüm_modülleri.

gulpfile.js

Dosya içeriği:

/ * * * Değişkenleri tanımlayın * * / var gulp = require ("gulp"), // Düzgün Gulp JS uglify = require ("gulp-uglify"), // JS minification concat = require ("gulp-concat"), // Gulp dosyaları imagemin = gerektirir ("gulp-imagemin"), // Görüntüleri küçült csso = gerektirir ("gulp-csso"), // CSS'yi küçült sass = gerektirir ("gulp-sass"); // SASS'ı (SCSS) CSS'ye dönüştürme / * * * Görevler (görevler) oluşturun * * / // "sass" görevi. "gulp sass" gulp.task ("sass", function () (gulp.src ("./ varlıklar / stiller / style.scss") komutuyla çalıştırılır // işlemekte olduğumuz dosya.pipe (sass()). Açık (" error ", sass.logError)) // sass'ı css .pipe'a (csso ()) dönüştürün // önceki adımda elde edilen css'yi küçült .pipe (gulp.dest (" ./ public / css / ") ); // sonucu belirtilen adrese yazıyoruz)); // "js" görevi. "gulp js" gulp.task ("js", function () (gulp.src (["./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap.dll) ile çalışır. min.js "," ./assets/javascripts/script.js "]) // işlediğimiz dosyalar.pipe (concat (" min.js ")) // her şeyi yapıştırın JS .pipe (uglify ()) // ortaya çıkan "footcloth" .pipe (gulp.dest ("./ public / js /")) küçültün // sonucu belirtilen adrese yazın)); // "Görüntüler" görevi. "gulp images" komutuyla çalıştırılır gulp.task ("images", function () (gulp.src (". Assets / images / ** / *") // klasördeki ve alt klasörlerindeki tüm dosyaları alır) ( imagemin () ) // görüntüleri web.pipe için optimize edin (gulp.dest ("./ public / images /")) // sonucu belirtilen adrese yazın)); // "İzle" görevi. "gulp watch" komutu ile çalıştır // Dosya değişikliklerini izler ve diğer görevleri otomatik olarak çalıştırır gulp.task ("watch", function () (// "styles" klasörü ve alt klasörlerindeki * .scss dosyalarını değiştirirken sass'ı çalıştırın görev yudum. izle ("./ varlıklar / stiller / ** / *. scss", ["sass"]); // "javascripts" klasörü ve alt klasörlerindeki * .js dosyalarını değiştirirken js görev yudumunu çalıştırın .watch ("./ varlıklar / javascripts / ** / *. js ", [" js "]); // "images" klasöründeki ve alt klasörlerdeki herhangi bir dosyayı değiştirirken, resimler görevini gulp.watch (" . / varlıklar / resimler / ** / * ", ["görüntüler"]);));

Ana özellik görevde izlemek... Bir kez başlattıktan sonra, kaynaklarla güvenle çalışabilirsiniz ve proje, düzenlenen dosyalar her kaydedildiğinde otomatik olarak oluşturulur.

Sonuç olarak, internette yayınlanmaya hazır bir şablon elde edeceğiz.

Görevler ayrı ayrı çalıştırılabilir. Sonuç olarak yazının sonundaki arşivde şunlar sizleri bekliyor:

! Not bu arşivi açtıktan sonra, her şeyden önce, npm install komutunu çalıştırmanız gerekecek. Bu klasör oldukça içerir çok sayıda dosyaları ve bunları her seferinde kopyalamak / yapıştırmak zaman kaybıdır.

Gözaltında

Orada tonlarca başka yararlı eklenti var. Örneğin, html kodunun yazılmasını önemli ölçüde hızlandıran mükemmel şablon motoru Jade, birinin DAHA AZ, vb.

Sunulan örnek, tüm bu harika özellikleri hızlı bir şekilde ve fazla bilgi sahibi olmadan kullanmaya başlayabileceğiniz bir platform ve şablondur.

Görev yürütücüler ve derleme sistemleri, derleme, test etme ve diğer rutin görevleri otomatikleştirerek işleri çok hızlandırır. Her alanda olduğu gibi bu pazarda da güçlü bir rekabet var. 2014 yılına kadar, görev yürütücü homurdanma onların arasında egemen oldu, ancak daha sonra projeden alternatif bir araç olan gulp yapmaya karar veren küçük bir ekip ortaya çıktı ve projeyi oluşturmaya odaklandı.

Doğru seçimi yapmanıza yardımcı olmak için makalenin bir parçası olarak ana görev yöneticilerini ele alacağız:

• homurtu

ve ayrıca diğer montaj yöntemlerine ve yöntemlerine de değineceğiz.

Biraz ileri koşarak, WaveAccess'te gulp kullandığımızı varsayalım. Aracı uygulamak çok kolay oldu: Uzun yıllardır kullandığımız JetBrains ürün ailesi (IDEA, WebStorm, ReSharper), gulp/grunt ve npm/nodejs ile çalışmak için harika eklentilere sahip.

Görev yöneticisi vs proje inşa sistemi: fark nedir?

Görev Yöneticisi- görevleri otomatikleştirmek için bir araç. Koşucu konfigürasyonunda bu görevlerin isimlerini yazabilirsiniz; bunları gerçekleştiren işlev; standart eylemleri hızlandırmak için eklentiler, ancak görevlerin kendileri keyfi olabilir. Örneğin:

• Dağıtım görevleri (projenin zip dosyası, projeyi şuraya yükleme) uzak sunucu vesaire)
• Proje montaj görevleri (küçültme, optimizasyon, kod doğrulama vb.)
• Veri taşıma görevleri vb.

Bu tür araçlara örnek olarak homurdanma ve yutkunma verilebilir.

yapı sistemi bir java betiğinde proje oluşturmanın yalnızca bir tipik görevini çözen bir araçtır ve şunları içerir:

• birleştirme,
• kodun geçerliliğini kontrol etmek,
• kodun küçültülmesi vb.

Bu tür araçlar arasında Webpack, Brokoli, Brunch, Browserify ve diğerleri bulunur.

Bu tür tüm ön uç görevleri, başka araçlar kullanılarak otomatik olarak gerçekleştirilebilir: örneğin, makalede de bahsedeceğimiz npm run kullanılarak.

Örnek

Bir proje oluşturmak için bir yudum dosyası düşünün:

Const gulp = gerektirir ('gulp'); const kahve = gerektirir ('gülp-kahve'); const concat = gerektirir ('gulp-concat'); const uglify = gerektirir ('gulp-uglify'); const imagemin = gerektirir ('gulp-imagemin'); const sourcemaps = gerektirir ('gulp-sourcemaps'); const del = zorunlu ('del'); )

Ancak montaj, büyük bir tipik görevin özel bir durumudur. Yutkunmak için başka bir yapılandırma yazabilirsiniz - örneğin dağıtım için:

Var gulp = require ("yutkunma"); var zip = gerektirir ("gulp-zip"); var del = gerekli ("del"); var install = require ("gulp-install"); var runSequence = require ("çalıştırma sırası"); var awsLambda = require ("node-aws-lambda"); gulp.task ("temiz", işlev (cb) (del (["./ dist", "./dist.zip"], cb);)); gulp.task ("kopyala", işlev () (dönüş gulp.src ("index.js") .pipe (gulp.dest ("dist /"));)); gulp.task ("node-mods", function () (dönüş gulp.src ("./ package.json") .pipe (gulp.dest ("dist /")) .pipe (kurulum ((üretim: true) ));)); // node_modules içindeki tüm aws-sdk dizinlerini temizle. Lambda örneği zaten global olarak kullanılabilir olduğundan // onları yüklememize gerek yok. Gulp.task (" clean-aws-sdk ", function (callback) (del ([" dist / node_modules / **) / aws-sdk "], geri arama);)); gulp.task (" zip ", işlev () (dönüş gulp.src ([" dist / ** / * ","! dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"));)); gulp.task ("yükleme", işlev (geri arama) (awsLambda.deploy ("./ dist") .zip ", require (" ./ lambda-config.js "), geri arama);)); gulp.task ("dağıtmak", işlev (geri arama) (runSequence ([" temiz "], [" kopyala "] , ["düğüm modları"], ["temiz-aws-sdk"], ["zip"], ["yükleme"], geri arama);));

Yeni görevler, mevcut olanların kombinasyonları olarak tanımlanabilir:

Gulp.task ("deploy", gulp.series ("temiz", "kopyala", "düğüm modları", "clean-aws-sdk", "zip", "yükleme"));

Fark bu. Şimdi temel araçlara bir göz atalım.

yudum vs homurtu

Yani, iki görev koşucumuz var: yutma ve homurdanma. Her ikisi de node.js ve npm kullanır ve javascript kullanılarak görevlendirilir.

İlk bakışta benzerler, ancak gulp'un montaj için daha uygun hale getiren bir özelliği var: görevleri paralel olarak işleme yeteneği ve kompakt bir yapılandırma, özlü bir API. Nasıl çalıştıklarına daha yakından bakalım.

Veri akışı

Önümüzde CSS'yi bir araya getiren ve işleyen bir hibe dosyası var.

Ondan, her işlemi başlatırken o homurtuyu görebilirsiniz:

bir dosya açar;

bir süreci başlatır;

değişiklikleri kaydeder;

sonraki işlemin kendisine müdahale etmesini önlemek için işlenen dosyayı kapatır;

dosyayı ortaya çıkan klasöre yazar.

Yani zincir, birkaç geçici klasör oluşturmayı ve ara dosyaları depolamayı içerir:

Eklentiler farklı yazarlar tarafından yazılmıştır. Her eklentinin dosyalarla çalışabilmesi için kaydetmeyi atlayarak dosyaların nesneler olarak temsil edilmesi gerekir. Gulp'ta, bu görev sanal bir sistem tarafından gerçekleştirilir. dosya sistemi Vinil-FS. Ve gulp, dosyayı geçici dosyalar oluşturmadan ve diske kaydetmeden hemen sonraki işleme geçirir.

Gulp için aynı konfigürasyon daha kompakttır:

Genel çalışma mekanizması, diske yazmadan dosya akışıdır:

Görev sırası

Başka bir fark daha var: gulp, görevleri varsayılan olarak eşzamansız olarak yürütür. Bunun hem artıları hem de eksileri vardır. Aynı konfigürasyon dosyasında dev / * scss dizininden dosyaları okuyup SASS'a göndermemizi söylüyoruz.

Akışlar sonucu .pipe'a gönderir. .pipe yöntemi, sonucu parçalar halinde bir arabellekte toplamanıza ve dolduğunda, dizinin içeriğini almayı bitirmeden önce okuma için hemen bir akışa bilgi göndermenize olanak tanır.

Görevlerin sıralı yürütülmesi, yutkunmayı hızlı ve güçlü kılar, ancak bazen, grunt'ta olduğu gibi görevleri eşzamanlı olarak yürütmek gerekli hale gelir. Sorun, bir geri arama, bir akışın dönüşü veya bir Söz yoluyla çözülebilir. Görev, Habre'de daha ayrıntılı olarak analiz edilir. npm.js sitesinin kendisinde de alternatif bir seçenek var.

Grunt kullanıyorsanız, ancak veri akışından etkileniyorsanız, aynı Vynyl-FS modülü onu grunt'ta uygulamak için kullanılabilir.

Özlü yudum API'sinin yalnızca 5 yöntemi vardır:

Görev (isim, fn). Bir işlevi bir adla kaydeder. Önce gerçekleştirmeniz gerekiyorsa, diğer görevlere bağımlılık belirtebilirsiniz.

Çalıştır (görevler ...). Görevleri gerçekleştirir.

İzle (glob, fn). Kürenin yerine dosya değişirse bir işlevi yürütür.

Src (küre). Parametre olarak bir dosya maskesi alır ve bu dosyaları temsil eden bir akış döndürür. Akış daha sonra girdi olarak eklentilere iletilebilir.

Hedef (klasör). Dosyaları belirtilen klasöre kaydeder.

Projenin "yerel" API'sinde .watch() öğesinin varlığına özellikle dikkat etmek isterim, çünkü sabit dosya değişikliklerini izlemek derlemenin en önemli bileşenidir. API'nin kısalığı, bu görev yöneticisinin ana görevine - bina projelerine odaklanmasını sağlar.

Gulp ve grunt alternatifleri

Gulp (günde 130'dan fazla indirme) ve grunt (npmjs.com'a göre günde 86'dan fazla indirme) popülaritesine rağmen, geliştiriciler bu sistemlerde dezavantajlarını görüyorlar: örneğin, eklentilere bağımlılık, eksik belgeler, uygunsuz hata ayıklama. Alternatif olarak, proje oluşturma sistemlerini (Brokoli ve Webpack gibi) veya npm komut dosyalarını düşünün.

Proje inşa sistemleri

Node.js platformunda birkaç alternatif çözüm düşünelim. Bir proje inşa etmek için yutkunma ve homurdanmanın yerini alabilirler.

Bu sistem, yudum gibi, görev koşucusu homurdanmasına bir rakip olarak ortaya çıktı, ancak geliştiriciler başlangıçta onu tüm avantajları ve dezavantajları olan bir yapı asistanı olarak tasarladılar. * .js'nin komut dosyaları içeren bir dosya olduğunu, * .coffee'nin CoffeeScript olduğunu; yapılandırması daha kompakttır. Ancak montaj aşamasında keyfi bir işlem yapamayacak.

İşte Brunch yapılandırma dosyası. CoffeeScript'te yazılmıştır (JS'de de yazabilirsiniz):

Exports.config = dosyalar: javascripts: joinTo: "javascripts / app.js": / ^ app / "javascripts / seller.js": / ^ (bower_components | satıcı) / stil sayfaları: joinTo: "stylesheets / app.css" sipariş : after: ["vendor / style / helpers.css"] şablonlar: joinTo: "javascripts / app.js"

Burada JoinTo ve order operatörlerine dikkat etmek istiyorum. Yapılandırma düzeyinde Brunch, dosyaları doğru sırada toplaması gerektiğini anlar. Sonuç olarak, yapılandırma 20-30 satır alır.

Brokoli

Geliştirme aşamasında olan bir bağımsız araç. Geliştiricileri, yudum için rekabet yaratmak istedi.

Brokoli'nin aracı, yudum yudumla karşılaştırıldığında farklı ilkeler kullanır:

Montajı hızlandırmak. Her eklenti, yalnızca ihtiyacınız olan dosyaların kısmi olarak yeniden oluşturulması yerine derleme sonuçlarının ara önbelleğe alınmasını uygular.

Dosyalar yerine ağaçlar. Gulp, bir dosyayı son bir dosyaya dönüştürmekte en iyisidir. Brokoli, varsayılan olarak dosyaları değil, yalnızca ağaçları kullanır ve bunları başka ağaçlara dönüştürür (bir tepe noktasından dejenere olur).

Şu anda araç aktif olarak gelişiyor, yeni eklentiler ortaya çıkıyor, ancak ciddi projeler için kullanmak için henüz çok erken: henüz yeterli eklenti yok.

Webpack esnek bir modüler yapı sistemidir. Alışılmadık bir sözdizimine sahiptir, ancak kendisi herhangi bir modül sözdizimini kabul eder.

Gulp gibi devlerle rekabet etmek zorunda kalacaklarını anlayan yaratıcılar, büyük projeler geliştirirken hayatımızı kolaylaştırmaya karar verdiler. Ve yardımcı programa eklendi:

Otomatik olarak bir bağımlılık ve kaynak ağacı oluşturma yeteneği.

Dinamik yüklemeyi uygulamak için uygun araçlar.

Hemen hemen tüm modüllerle uyumludur (AMD, UMD, ES 2015, Common JS, bunlara dayalı üçüncü taraf modüller).

Ön işlemcilerle uyumludur (SASS, Babel, Coffee Script, Type Script, vb.).

Canlı Yeniden Yükleme (tarayıcının tüm sayfaları değil, tek tek uygulamaları yenilediği eşzamansız yükleme teknolojisi).

Ağır bir paket.js oluşturmaktan kaçınarak kodu bölme ve birden çok paket dosyası oluşturma yeteneği.

Kodu optimize etme yeteneği.

Ayrı olarak, bağımlılıklara esnek bir yaklaşım not edilebilir. Bir modül JS, CSS ve HTML dosyası ve hatta PNG ile JPEG olabilir. Require (“myJSfile.js”) ve require (“myCSSfile.css”) kullanabilir, eserin parçalarını paylaşabilir ve yeniden kullanabilirsiniz.

Özellikler, araç konfigürasyonları, eklentiler hakkında daha fazla ayrıntı Github'da Fronttalks: Webpack Deep Dive ile bir sunumda bulunabilir.

npm komut dosyaları

Derleme görevleri, npm betikleri kullanılarak da çözülebilir. Birçoğu bu fikirden korkuyor: birkaç özellik, komut dosyaları yudum veya Webpack ile karşılaştırıldığında yeterince hızlı değil. Ancak, bu dezavantajlar abartılı.

npm betiklerinin olanakları

Npm betikleri birçok şey yapar. Örneğin, kanca komut dosyalarını uygulayabilirsiniz:

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("prebuild": "echo Derleme komut dosyasından önce çalıştırıyorum "," build ":" cross-env NODE_ENV = üretim web paketi "" postbuild ":" echo Derleme komut dosyasından sonra çalıştırıyorum "))

Komut dosyaları öneklere göre sırayla yüklenecektir: örneğin prebuild, pre ile ön eki olduğu için derlemeden önce başlar. Buna göre, postbuild en son yüklenecektir. npm run build komutu bunları doğru sırada çalıştıracaktır.

Ayrıştırmak için bir komut dosyasını diğerinden arayabilirsiniz zorlu görevler... Örneğin, burada önceden oluşturulmuş görev, temiz görevi çağırır.

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("clean": "rimraf ./dist && mkdir dist "," prebuild ":" npm run clean "," build ":" çapraz env NODE_ENV = üretim web paketi "))

Görev çok karmaşık hale gelirse, her zaman ayrı bir dosya çağırabilirsiniz:

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("build": "node build.js"))

Akış, derleme görevleri için yutmayı homurdanmaktan çok daha uygun hale getirir. Ancak npm aracılığıyla da uygulanabilir. Windows ve Unix'te akış, ara dosyalar kaydedilmeden varsayılan olarak yapılır.

Örneğin, Unix'te bir dosyanın içeriğini grep yapabilir ve onu yeni bir dosyaya aktarabilirsiniz:

Grep 'Benim Adım' bigFile.txt> lineThatHaveMyName.txt

Yönlendirme (>), istenen satırları son dosyaya yönlendirir. Görev, ara dosyalar kaydedilmeden yürütülür.

Ancak bazı sakıncalar var: package.json'da yorum bırakamazsınız. Çözüm, küçük bir görevi hedefleyen, net adlara sahip kısa komut dosyaları oluşturmak olabilir. Daha ayrıntılı olarak, görev yürütücülerini npm komut dosyalarıyla değiştirme konusu, npm Komut Dosyaları için Neden Gulp ve Grunt'u Bıraktığım İngilizce makalesinde iyi bir şekilde ele alınmıştır.

Sonuç

Piyasada rutin görevleri otomatikleştirme araçları (örneğin, yutma ve homurdanma) ve proje oluşturma işlemlerini otomatikleştirme araçları (Webpack, Brokoli, Medusa, Browserify, vb.) için çok fazla rekabet vardır.

Görev yürütücülere bakarsanız, yutkunma daha basit, anlaşılması daha kolay ve homurdanmaktan daha verimlidir: disk işlemlerinde tasarruftan yararlanır. Ancak grunt'un daha fazla eklentisi var (örneğin, test için bir eklenti var). Bu sebeple de çok seveni var.

Sadece montaj hakkında konuşursak, yudum, homurdanmaya göre tüm avantajlara sahiptir:

Vynyl-FS modülü tarafından sağlanan zincir dosya aktarımları için bir akış mimarisi.

Varsayılan, görevleri eşzamansız olarak yürütmektir.

Yalnızca 5 işlevli özlü API.

Aynı zamanda, Webpack oluşturmak için eşit derecede ilginç bir araçtır. Tarayıcı yenilemeyi hızlandırmak için Live Reload teknolojisine sahiptir. Bu çok büyük bir artı: teknoloji, geliştiricilerin sürekli basması gereken yenileme düğmesine basarak zamandan tasarruf sağlıyor. Gulp ayrıca Live Reload'a sahiptir, ancak Webpack'i yutma veya homurdanma ile karşılaştırmak zordur, çünkü yalnızca derleme için "keskinleştirilmiştir" ve keyfi görevleri "çözemez".

Tüm bu çözümler JetBrains'in ürün ailesiyle mükemmel bir şekilde bütünleşir, ancak biz WaveAccess olarak hem yerleşim tasarımcıları hem de ön uç uzmanları için geniş fırsatlar için homurtuyu tercih ettik.

Herhangi bir sorunuz varsa ve bir web projesi geliştirmeniz gerekiyorsa, bize yazın. [e-posta korumalı]

• Başlangıç ​​aşaması
• Homurtu
• Yudum
• Görev koşucuları

Bu yazıda, günlük işlerime kök salmış ve rutini büyük ölçüde kolaylaştıran bir ön uç projesi oluşturma sürecini ayrıntılı olarak analiz edeceğiz.
Makale nihai gerçek olduğunu iddia etmiyor, çünkü bugün çok sayıda farklı montajcı ve montaj yaklaşımı var ve herkes tadına bakıyor. Sadece bu konudaki düşüncelerimi paylaşacağım ve iş akışımı göstereceğim.

Gulp toplayıcısını kullanacağız. Buna göre sisteminizde Node js kurulu olmalıdır. Belirli bir platform için bir düğümün kurulumunu düşünmeyeceğiz, çünkü birkaç dakika içinde google'da aranır.
Ve önce, soruyu cevaplayacağım - neden Gulp?
Az çok katlanılabilir alternatiflerden Grunt ve Brunch'ımız var.
Derleyicilerle ilk ilgilenmeye başladığımda hem Grunt hem de Gulp zaten piyasadaydı. İlki daha önce ortaya çıktı ve bu nedenle daha büyük bir topluluğa ve çeşitli eklentilere sahip. npm'ye göre:
Grunt - 11171 paket
Gulp - paket 4371

Ama Grunt bana fazla ayrıntılı geldi. Birkaç karşılaştırma makalesi okuduktan sonra sadeliği ve anlaşılırlığı nedeniyle Gulp'u tercih ettim.
Brunch, bundan kaynaklanan tüm avantaj ve dezavantajlarla nispeten genç bir projedir. İlgiyle izliyorum ama henüz işimde kullanmadım.

Başlayalım:

Projemiz için bir klasör oluşturalım, örneğin "habr". Konsolda açıp komutu çalıştıralım

Npm başlangıcı

Yükleyicinin tüm sorularında Enter'a basabilirsiniz. şimdi önemli değil.
Sonuç olarak, projenin bulunduğu klasörde, yaklaşık olarak aşağıdaki içeriğe sahip bir package.json dosyası oluşturulacaktır.

("name": "habr", "version": "1.0.0", "description": "", "main": "index.js", "scripts": ("test": "echo" Hata: test belirtilmedi "&& çıkış 1"), "yazar": "", "lisans": "ISC")

İhtiyaçlarımıza uyacak şekilde biraz değiştirelim:

("ad": "habr", "sürüm": "1.0.0", "açıklama": "", "yazar": "", "lisans": "ISC", "devDependencies": ("gulp": "^ 3.8.1"))

devDependencies bloğunda yutmaya ihtiyacımız olduğunu ve tüm eklentilerimizi hemen kaydedeceğimizi belirttik.

Eklentiler:

Stillerle js ile aynı şeyi yapıyorum, ancak "a" donatıcısı yerine - yerleşik SCSS içe aktarmayı kullanıyorum.
main.scss dosyamız şöyle görünecek:

/ * * Üçüncü Taraf * / @import "CSS: ../../ bower_components / normalize.css / normalize.css"; / * * Özel * / @import "kısmiler / uygulama";

Bu sayede stillerin eklendiği sırayı kolayca yönetebilirsiniz.
Çalıştırarak görevimizi kontrol edelim

Gulp stili: inşa

resim toplama

Görüntü görevi şöyle görünecek:

Gulp.task ("image: build", function () (gulp.src (path.src.img) // images.pipe'ımızı seçin (imagemin (// sıkıştırın progresif: true, svgoPlugins: [(removeViewBox: false) )], kullanın:, geçmeli: doğru))) .pipe (gulp.dest (path.build.img)) // Ve onu build .pipe (connect.reload ());));

Interlaced dışında varsayılan imagemin ayarlarını kullanıyorum. Bu eklentinin API'si hakkında daha fazla bilgi edinebilirsiniz.
Şimdi, src / img içine bir resim koyup komutu çalıştırırsak

Gulp image: inşa

daha sonra optimize edilmiş imajımızı derlemede göreceğiz. Ayrıca gulp, sitemizin kullanıcıları için ne kadar alan kazandırdığını konsola nazikçe yazacaktır :)

Yazı Tipleri

Yazı tipleriyle, genellikle herhangi bir manipülasyon gerçekleştirmem gerekmez, ancak "src / ve build in build /" paradigmasını kırmamak için - sadece dosyaları src / fontlardan kopyalarım ve bunları build / içine yapıştırırım. yazı tipleri. İşte görev

Gulp.task ("fontlar: build", function () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts))));

Şimdi burada yaptığımız her şeyi çalıştıracak "build" adında bir görev tanımlayalım.

Gulp.task ("build", ["html: build", "js: build", "style: build", "fontlar: build", "image: build"]);

Dosya değişiklikleri

Sürekli konsola tırmanmamak için her dosya değiştiğinde gulp'ten gerekli görevi çalıştırmasını isteyelim. Bunu yapmak için aşağıdaki görevi yazın:

Gulp.task ("izle", işlev () (izle (, işlev (olay, cb) (gulp.start ("html: yapı"));)); izle (, işlev (olay, cb) (gulp.start ( "style: build");)); watch (, function (event, cb) (gulp.start ("js: build");)); watch (, function (event, cb) (gulp.start ("image" : yapı ");)); izle (, işlev (olay, cb) (gulp.start (" yazı tipleri: yapı ");));));

Sorun olmaması gerektiğini anlıyoruz. Biz sadece path değişkeninde tanımlanan yollarımızı takip ediyoruz ve dosya değiştiğinde çağrılan fonksiyonda ihtiyacımız olan görevi çalıştırmamızı istiyoruz.
Konsolda çalıştırmayı deneyin

Gulp izle

ve farklı dosyaları değiştirin.
Peki, harika değil mi?)

Web sunucusu

Livereload mucizesinin tadını çıkarmak için - kendimize yerel bir web sunucusu oluşturmamız gerekiyor. Bunu yapmak için aşağıdaki görevi yazacağız:

Gulp.task ("web sunucusu", işlev () (connect.server ((host: server.host, port: server.port, livereload: true));));

Hatta yorum yapacak bir şey yok. Server nesnesinde tanımladığımız host ve port üzerinde livereload ile sunucuyu başlatacağız.

Temizlik

Herhangi bir görüntü eklerseniz, görüntüyü çalıştırın: görev oluştur ve ardından görüntüyü silin - yapı klasöründe kalacaktır. Bu yüzden periyodik olarak temizlemek uygun olacaktır. Bunun için basit bir görev oluşturalım.

Gulp.task ("temiz", fonksiyon (cb) (rimraf (path.clean, cb);));

Şimdi komutu çalıştırdığınızda

temiz yudum

sadece derleme klasörünü siler.

Ve son olarak, biraz lütuf

Bu görev kritik işlevsellik taşımıyor, ama gerçekten hoşuma gidiyor :)

Gulp.task ("openbrowser", function () (opn ("http://" + server.host + ":" + server.port + "/ build");));

İhtiyacımız olduğunda başlatacağız - ve projemizi içeren bir sekme tarayıcımızda otomatik olarak açılacaktır.
Güzel :)

son akor

Yapmamız gereken son şey, tüm yapımızı çalıştıracak varsayılan bir görev tanımlamak.

Gulp.task ("varsayılan", ["yapı", "web sunucusu", "izle", "açık tarayıcı"]);

Son gulpfile.js'niz şöyle görünecek.
Şimdi konsolda yürütelim

Ve işte :) Projeniz için boşluk hazır ve sizi bekliyor.

Sonuç olarak birkaç kelime

Bu makale, ön uç projeleri oluşturmanın inceliklerini bir kez daha tazelemenin ve bu deneyimi yeni geliştiricilere kolayca aktarmanın bir yolu olarak tasarlandı. Projelerinizde bu derleme seçeneğini kullanmak zorunda değilsiniz. Hemen hemen her ihtiyaç için jeneratör bulabileceğiniz yeoman.io var.
Bu koleksiyoncuyu iki nedenden dolayı yazdım.
- Ben rigger kullanmayı seviyorum HTML Kodu
- Karşılaştığım hemen hemen tüm derlemelerde, kayıt için geçici bir klasör (genellikle .tmp /) kullanılır ara sonuçlar toplantı. Bu yaklaşımı sevmiyorum ve geçici klasörlerden kurtulmak istedim.
- Ve hepsini kutudan çıkarmak istiyorum :)

Koleksiyoncunun çalışma sürümünü github'umdan indirebilirsiniz.

Umarım yazı işinize yaramıştır :)

not tüm hatalar, eksiklikler ve söveler hakkında - lütfen kişisel olarak yazın

Gentleman's Front-end Developer's Kit

Modern bir ön uç geliştiricinin silahında proje montaj araçlarından birine sahip olması gerektiği bir sır değil, örneğin: Yudum veya Homurtu... Bir süreye kadar, Grunt bu konuda tekel sahibiydi, ancak Grunt'tan ayrılan bir grup geliştirici, kendi hafif ve hızlı Gulp görev yöneticisini oluşturmaya karar verdi.

Bu yazımızda ilerideki projelerde kullanmak üzere sıfırdan bir başlangıç ​​paketi hazırlayacağız.

Hangi teknolojileri kullanıyoruz

• Yazılım platformu: Node.js
• CSS ön işlemcisi: kalem
• Görev Yöneticisi: Yudum

Bir ön uç neden bir görev yöneticisine ihtiyaç duyar?

Yakın zamana kadar, CSS ön işlemcilerini kullanmaya başlayana kadar, mizanpajla zaten iyi bir iş çıkardıysam, neden görev yöneticisi yapılandırmasını ayarlamak için zaman harcamam gerektiğini merak ettim.

CSS ön işlemcileri gerçekten kullanışlıdır ve stillerin yazılmasını hızlandırır, ancak ön işlemcide yazılan kodu normal CSS'ye derlemek, tek bir düğmeyle çözülebilecek tamamen önemsiz bir iş değildir. Görev yöneticisinin yardımımıza geldiği yer burasıdır. Kodun dönüştürülmesi bir düğmeye basılarak gerçekleşmez, her şey katılımınız olmadan çevrimiçi olur (tabii ki, her şey doğru yapılandırılmışsa).

Elbette, görev yöneticisinin görevleri, ön işlemci kodunu saf CSS'ye dönüştürmekle ilgili süreçlerin çok ötesine geçer. Proje oluşturucu ayrıca küçültme, birleştirme, kod hatalarını kontrol etme, görüntüleri hareketli grafiklere birleştirme, görüntüleri web için optimize etme vb. ile ilgilenir. Projenizde, daha sonra uygun bir şekilde tek bir dizinde toplanan, önceden işlenmiş ve tarayıcıda çalışmaya hazır bir dizi mantıksal olarak ayrılmış dosya oluşturmanız yeterlidir. Ama daha sonra bunun hakkında daha fazla bilgi ve şimdi hazırlıkla başlayalım.

Node.js'yi yükleme

Node.js'yi sisteminize nasıl kuracağınızı ve kullanacağınızı biliyorsanız, bir sonraki başlığa geçmekten çekinmeyin.

Açıklanan tüm eylemlerin aşağıdakilerle ilgili olduğu konusunda sizi hemen uyarmak isterim. Mac OS X ama genellikle diğerleri için geçerli Unix sistemler. Görev yöneticisi ve komut satırı aracılığıyla geliştirme pencereler biraz daha zordur ve burada açıklanmayacaktır. Ancak, hala Windows kullanıyorsanız ve onu bırakmaya hazır değilseniz, size bir kullanım örneği önerebilirim. sanal makine yerleşik Ubuntu, bu seçeneği genel olarak oldukça uygun olan ev sistemimde kullanıyorum.

Bu yüzden öncelikle node ile konsol üzerinden çalışabilmemiz için node.js paketini indirip sistemimize kurmamız gerekiyor. Resmi node.js sitesine gidin ve sisteminiz için en son kararlı sürümü indirin. Kurulduktan sonra, düğüm komutu komut satırınızda mevcut olmalıdır. Düğümünüzün çalışıp çalışmadığını kontrol etmek için komut satırına komutu girin

yanıt olarak, kurulu node.js'nin sürümü görünmelidir. Her şey yolundaysa, devam edin.

Proje dizini yapısı

Projelerimizde yapının birleşik bir versiyonunu kullanacağız:

Geliştirmek - geliştirme kök dizini└─başlat - proje dizini├─ inşa - görev yöneticisi tarafından bir araya getirilmiş yapı├─kaynak - geliştirme için tüm kaynak dosyalar (.psd, vb.)├─src - geliştirme dizini│├─css - stil geliştirme dizini││├─ görüntüler - tüm statik görüntüler││├─ periler - bir hareketli grafikte toplanan görüntü││├─kısmi - özel dosyalar stiller│││├─mixins.stil - özel karışımlar│││└─styles.stil - özel stiller││├─ satıcı - diğerleri harici dosyalar stiller││└─styles.stil - ana stil dosyası│├─ yazı tipleri - yazı tipi dizini│├─img - katalog dinamik görüntüler │├─js - JavaScript geliştirme dizini││├─ _ *.Js - js yan dosyaları││├─_main.js - temel özel js││└─main.js - ana js dosyası│├─.htaccess - sunucu için yapılandırma│├─ * .html - sayfa işaretleme dosyaları│├─pages.html - şablonun tüm sayfalarına bağlantı içeren bir dosya│├─index.html - dizin sayfası biçimlendirme dosyası│└─ dahil - dahil edilen biçimlendirme dosyalarının dizini│ └─ * .html - biçimlendirme dosyalarını dahil et (header.html, vb.)├─package.json - npm paket yöneticisi yapılandırması├─gulpfile.js - Gulp yapılandırması├─stylus.template.bıyık - sprite okumak için maske├─TODO - yapılacaklar sayfası└─.gitignore - Git için yapılandırma

Kurulum

Konsolda cd komutunu kullanarak geliştirme kök dizinine gidin, mkdir start projemiz için bir dizin oluşturun ve ona gidin.

Konsol üzerinden proje için yapımızı kuralım:

mkdir kaynak kaynağı kaynağı / css / resimler kaynağı / css / sprite kaynağı / css / kısmi kaynak / css / satıcı kaynağı / js kaynağı / şablon kaynağı / şablon / dahil kaynak kaynağı / img kaynağı / yazı tipleri

Proje yapısında başlangıç ​​dosyalarını oluşturalım:

gulpfile.js stylus.template.mustache .gitignore kaynağı / .htaccess kaynağı / TODO kaynağı / css / style.styl kaynağı / css / kısmi / style.styl kaynağı / css / kısmi / mixins.styl kaynağı / js / main.js'ye dokunun kaynak / js / _main.js kaynak / şablon / sayfalar.html kaynak / şablon / indeks.html kaynak / şablon / dahil / başlık.html kaynak / şablon / dahil / altbilgi.html

package.json'u oluşturalım

tüm pop-up soruları Enter ile tıklanabilir, düğüm varsayılan değerlerini ayarlar veya önerilen alanları doldurur.

.gitignore

Gita'ya hangi dizinleri yok sayacağını ve depoya yüklemeyeceğini söyleriz:

/ düğüm_modülleri / / inşa / / kaynak /

node_modules dizini, eklentileri kurduktan sonra görünecek ve projenin tüm düğüm eklentilerini içerecektir.

kaynak / .htaccess

Sunucu için ek gzip sıkıştırması ve önbelleğe alma yükleyin:

AddOutputFilterByType DEFLATE metin / html metin / düz metin / xml metin / css metin / javascript uygulaması / javascript # Varsa gzip sıkıştırılmış CSS dosyalarını sunun # ve istemci gzip'i kabul eder. RewriteCond "% (HTTP: Kabul kodlaması)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Css" "$ 1 \ .css \ .gz" # Serve gzip sıkıştırılmış JS dosyaları varsa # ve istemci gzip'i kabul eder. RewriteCond "% (HTTP: Kabul kodlaması)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Js" "$ 1 \ .js \ .gz" # Doğru sun içerik türleri ve mod_deflate çift gzip'i önleyin. RewriteRule "\ .css \ .gz $" "-" RewriteRule "\ .js \ .gz $" "-" # Doğru kodlama türünü sunun. Başlık ekleme İçerik Kodlama gzip # Proxy'leri gzip'li ve # gzip'li olmayan css / js dosyalarını ayrı ayrı önbelleğe almaya zorlar. Başlık ekleme Vary Kabul-Kodlama ExpiresByType uygulamasında ExpiresActive / javascript "erişim artı 1 ay" ExpiresByType resmi / jpg "erişim artı 1 ay" ExpiresByType resmi / jpeg "erişim artı 1 ay" ExpiresByType resmi / gif "erişim artı 1 ay" ExpiresByType resmi / png "erişim artı 1 ay "ExpiresByType metin / css" erişimi artı 1 ay "

src / css / stiller.stil

Özel stil dosyalarını ana stil dosyasına ekleyelim:

@import "kısmi / stiller"

.styl dosyaları için, Stylus ön işlemci kodunun semantiğine göre uzantının belirtilmediğini unutmayın. Stilleri başka bir uzantıya dahil etmek için, örneğin css, ikincisi gereklidir.

YAPMAK

Bu sayfa bir yapılacaklar geliştirme sayfası içerir. Bu dosyayla çalışma hakkında daha fazla bilgiyi Sublime Text için PlainTasks eklentisi sayfasından okuyabilirsiniz.

Bu, yapının kurulumunu tamamlar.

Eklentileri npm paket yöneticisi aracılığıyla yükleme

Node.js, depolarında birlikte çalışmamız gereken birçok eklentiye sahip olan npm paket yöneticisini varsayılan olarak içerir.

Gulp eklentisini yükleme

Öncelikle sistemimize global olarak (-g tuşu ile) Gulp kurmamız gerekiyor.

npm gulp -g'yi kurun

Bunu bir kez yapmanız gerekir., daha fazla global kurulum gerekli değildir.

Şimdi proje dizininize yerel olarak Gulp'u kurmanız gerekiyor.

npm kurulum gulp --save-dev

--save-dev anahtarı, eklenti hakkındaki bilgilerin (depodaki ad ve sürümü) package.json yapılandırmasına ekleneceğini ve bu proje için hatırlayacağını söylüyor. node_modules eklentileri olan ağır klasörü gita'da saklamadığımız için, config içinde kaydedilen kurulu eklentiler hakkındaki bilgiler, projedeki tüm gerekli eklentileri dağıtmak için yalnızca bir npm i komutunun kullanılmasına izin verecektir.

Her komut için kısaltmalar vardır, bu yüzden yukarıdaki komutu daha kısa bir formatta yazabiliriz.

Gelecekte, kısaltılmış komut biçimini de kullanacağız.

Gulp için Stylus eklentisi

Projelerimizde, harika çalışan ve düğüm üzerinde derleyen Stylus ön işlemcisini kullanıyoruz.

Düzenlemek:

npm ben kalem kalemi -D

CSS eklentileri

Otomatik önek- gerekli özelliklerde -ms- -o- -moz- -webkit- öneklerini otomatik olarak değiştirir:

npm ben gulp-autoprefixer -D

CSS küçültme- eklenti, çıktı CSS dosyasını küçültür, gereksiz boşlukları ve sekmeleri ortadan kaldırır:

npm ben gulp-minify-css -D

Görüntü işleme eklentileri

Resimleri sprite olarak birleştirmek- artık tüm görüntüleri sprite'larda birleştirmek ve ardından koordinatlarını hesaplamak için saatlerce değerli zaman harcamanıza gerek yok, bu eklenti tüm bunları sizin için otomatik olarak yapacak:

npm ben gulp.spritesmith -D

Daha önce oluşturulan stylus.template.mustache dosyasına hareketli grafiklerdeki konumları hesaplamak için bir maske ekleyin:

((#items)) $ ((isim)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/ öğeler))

Mixins.styl'e özel karışımlar ekleyelim:

SpriteWidth ($ sprite) genişlik $ sprite spriteHeight ($ sprite) yükseklik $ sprite spritePosition ($ sprite) arka plan konumu $ sprite $ sprite spriteImage ($ sprite) arka plan görüntüsü url'si ($ sprite) sprite ($ sprite) eğer! "hover", seçici ()) &&! eşleşmesi ("etkin", seçici ()) spriteImage ($ sprite) spritePosition ($ sprite) spriteWidth ($ sprite) spriteHeight ($ sprite)

Karışımları ve oluşturulan dosyayı koordinatlarla ana stil sayfası src / css / style.styl'e bağlayalım:

@import "kısmi / hareketli" @import "kısmi / karışımlar"

Lütfen hareketli grafik dosyalarının özel stillerden önce eklenmesi gerektiğini unutmayın @import "kısmi / stiller"

Web için görüntüleri optimize etme- eklenti, resimlerinizdeki tüm gereksiz bilgileri otomatik olarak kesecek ve bunları en uygun boyuta sıkıştıracak, bu da bazı durumlarda resimlerin hacmini %90'a kadar azaltacaktır:

npm ben yudum-imagemin -D

JavaScript işleme eklentileri

JS küçültme- eklenti, JS kodunuzu olabildiğince küçülterek yükleme süresini azaltır:

npm yutkundum-çirkinleştirdim -D

JS Hatalarını İzleme- eklenti, tüm tutarsızlıkları belirlemek ve bunları konsolda görüntülemek için JS kodunuzu iyice kontrol edecektir:

npm ve jshint gulp-jshint -D

HTML işleme eklentileri

Dosyaları dahil et- eklenti, sitenin üstbilgi, altbilgi, kenar vb. statik kısımlarını ayrı dosyalarda saklamanıza ve bunları başka bir dosyanın herhangi bir bölümüne eklemenize olanak tanır. Başlıkta küçük değişiklikler olması durumunda, şablonun düzinelerce hatta yüzlerce html sayfasını değiştirmeye artık gerek yoktur:

npm yutkundum -D

Eklenti ayrıca JS uyumludur.

Özel JS'yi ana JS dosyasına src / js / main.js yapısına dahil edelim:

// = _main.js

index.html'ye header.html ve footer.html dosyalarını dahil edin

// = dahil et / başlık.html// = dahil et / altbilgi.html

Diğer eklentiler

Canlı Yeniden Yükle- eklenti, değişiklikleri görmek için her seferinde sayfayı tarayıcıda yeniden yüklemek zorunda kalmadan kurtarır, şimdi bu, değiştirilen dosyayı kaydettiğinizde otomatik olarak gerçekleşir:

npm ben gulp-connect -D

Gulp'un çökmesini önleme- bazen kritik hatalar durumunda (esas olarak JS nedeniyle) Gulp izleme modundan çıkabilir. Bu eklenti, mümkün olduğunda Gulp işlemlerini çalışır durumda tutmaya çalışır:

npm ben tesisatçı -D

Dosyaları yeniden adlandırma- dosya adlarıyla en yaygın çalışma. Eklenti, dosyaları tamamen yeniden adlandırmanıza, uzantıyı değiştirmenize, ön ekler ve son ekler eklemenize, örneğin style.styl gibi bir dosyayı style.min.css'ye getirmenize izin verir:

npm -D olarak yeniden adlandırıyorum

temizleyici- bazen derleme dizinini tamamen temizlemeye ihtiyaç duyulur, burada eklenti kurtarmaya gelir:

Kaynak haritası- Dosyalarınızın küçültmeden sonra tarayıcı tarafından hata ayıklama yoluyla okunabilir kalması için, küçültülmüş dosyalara kaynak harita eklemeniz gerekir:

npm ben yudum-sourcemaps -D

Gelişmiş saat özellikleri- eklenti saati akıllı hale getirir, artık yalnızca bir dosya değiştirildiğinde derlemedeki tüm dosyaların üzerine yazmaz, belirli bir değiştirilmiş dosyanın üzerine yazılır, bu da zaman ve kaynak tasarrufu sağlar:

npm yutkundum -D

package.json'u kontrol edin

Nihayet yüklü eklentiler, paketimizi kontrol edelim.json. Bunun gibi bir şeye benzemeli:

("ad": "başlangıç", "sürüm": "1.0.0", "açıklama": "Ön uç geliştirme için başlangıç ​​paketi", "yazar": "Ivan Ivanov", "lisans": "MIT", "bağımlılıklar": (), "devDependencies": ("gulp": "son", "gulp-autoprefixer": "son", "gulp-connect": "en son", "gulp-imagemin": "son", "jshint": "en yeni", "jshint-şık": "en yeni", "gulp-jshint": "en yeni", "gulp-minify-css": "en son", "gulp-tesisatçı": "en son", "gulp-rename": "son", "gulp-rigger": "son", "gulp-sourcemaps": "en son", "gulp-stylus": "en son", "gulp-uglify": "en son", "gulp-watch": "son", "gulp.spritesmith": "son", "rimraf": "en yeni"))

En son sürüm yerine, sizin durumunuzda yüklü eklentilerin belirli sürümleri kaydedilecektir. Çünkü Birçok projede kullanılacak başlangıç ​​paketimizi oluşturuyoruz, ayrıca projede her zaman eklentilerin en son sürümlerini yüklemek için sürüm değerlerinin en son ile değiştirilmesi önerilir.

node_modules dizini, tüm düğüm eklenti dosyalarını içeren proje klasöründe de görünmelidir. Gerekli tüm eklentiler kuruludur, Gulp yapılandırma ayarlarına gidebilirsiniz.

gulpfile.js kurulumu

gulpfile.js- bu, görev yöneticimizin ana yapılandırma dosyasıdır, içinde tüm ayarları ve komutları saklayacağız.

Tüm Gulp çalışmaları göreve indirgenir ( İngilizce görev). Görev, adlı ayrı, bağımsız bir işlevdir. Her görev ayrı ayrı çağrılabilir.

Modern standartlara uygunluk modu

İlk olarak, dosyanın başında uyumluluk modunu yalnızca modern standartlara göre bağlayın:

"katı kullan";

Bu yönerge hakkında daha fazla bilgi edinebilirsiniz.

Eklentiyi başlatma

Eklentiler aşağıdaki yapı ile başlatılır:

var initPlugin = require ("eklenti adı");

Bu yapıya uygun olarak tüm eklentilerimizi başlatıyoruz:

Var gulp = require ("gulp"), // ana eklenti gulp stylus = gerekli ("gulp-stylus"), // stylus önişlemci ön eki = gerekli ("gulp-autoprefixer"), // otomatik öneklerin eklenmesi cssmin = gerektirir (" gulp-minify-css "), // css uglify'ı küçült = zorunlu (" gulp-uglify "), // js'yi küçült jshint = zorunlu (" gulp-jshint "), // js rigger'daki hataları izle = zorunlu ( " gulp -rigger "), // html ve js'deki kapanımlarla çalışma imagemin = gerekli (" gulp-imagemin "), // görüntüleri en aza indirme spritesmith = zorunlu (" gulp.spritesmith "), // görüntüleri sprite'larda birleştirmek rimraf = gerektirir ("rimraf"), // temizleme kaynak haritaları = gerektirir ("gülp-kaynak haritaları"), // kaynak haritaları yeniden adlandırın = gerektir ("gülp-yeniden adlandırın"), // dosyaları yeniden adlandır tesisatçı = gerektirir ("gülp-tesisatçı"), // galp'i durdurmak için koruma izle = zorunlu ("gülp-izle"), // yeteneklerin genişletilmesi watch connect = zorunlu ("gulp-connect"); // yeniden yükle

Yol sabitleri

Kolaylık sağlamak için tüm yolları ve maskeleri hemen tanımlayacağız:

Var path = (build: (// Montajdan sonra dosyaların nereye hazır hale getirileceğini belirtiyoruz html: "build /", js: "build / js /", css: "build / css /", img: "build / css / resimler / ", yazı tipleri:" yapı / yazı tipleri / ", htaccess:" yapı / ", contentImg:" yapı / img / ", sprites:" src / css / görüntüler / ", spritesCss:" src / css / kısmi / " ), src: (// html kaynaklarının nereden alınacağı: "src / şablon / *. html", // src / şablon / *. html sözdizimi gulp'e . html uzantısı js: "src / js / [^ _] *. js ", // Stillerde ve betiklerde yalnızca ana dosyalara ihtiyacımız var jshint:" src / js / *. js ", css:" src / css / style.styl ", cssVendor:" src /css/vendor/*.* ", // Kitaplık dosyalarını ayrı olarak saklamak istiyorsak, img:" src / css / images /**/*.* " satırını kaldırın , // Sözdizimi img /**/*.* şu anlama gelir - klasörden ve alt dizinlerdeki tüm uzantıların tüm dosyalarını alın: "src / fonts /**/*.*", contentImg: "src / img /* */*.*", sprites: "src / css / sprites / *. png ", htaccess:" src / .htaccess "), izle: (// Burada değişiklikten sonra belirteceğiz hangi dosyaları gözlemlemek istiyoruz html: "src / şablon / ** / *. html", js: "src / js / ** / *. js", css: "src / css /**/*.* ", img: "kaynak / css / resimler /**/*.*", contentImg: "src / img /**/*.*", yazı tipleri: "src / yazı tipleri /**/*.*", htaccess : " src / .htaccess ", sprites:" src / css / sprites / *. png "), clean:" ./build ", // temizlenebilen dizinler outputDir:" ./build "// ilk kök dizini mini sunucuyu başlatmak için );

Ad maskelerini kullanabileceğimizi unutmayın:

• * .js- js uzantılı tüm dosyalar
• [^ _] *.js- alt çizgi ile başlayanlar hariç, js uzantılı tüm dosyalar
• *.* - geçerli dizindeki herhangi bir uzantıya sahip herhangi bir dosya
• /**/*.html- geçerli dizindeki ve tüm alt dizinlerdeki .html uzantılı tüm dosyalar

Görev

Artık tüm sabitler yazıldığından, görevleri yazmaya başlayabilirsiniz. Tüm görevler aşağıdaki yapıya sahiptir:

Gulp.task ("görevAdı", işlev () (// bazı işlevler));

Mini Sunucu ve LiveReload

Her şeyden önce, yerel sunucunun ve LiveReload'ın çalışmasını yapılandıracağız:

// Yerel sunucu geliştirme için gulp.task ("connect", function () (connect.server (// sunucu yapılandırmaları root:, // sunucunun kök dizini başlangıç ​​bağlantı noktası: 9999, // hangi bağlantı noktasını kullanacağız livereload: true / / LiveReload işini başlat));));

Büyük olasılıkla, aynı anda birkaç proje üzerinde aynı anda çalışmak zorunda kalacaksınız. Sunucu aynı anda birçok sunucuyu çalıştırmanıza izin verir, farklı projeler için portunuzu kaydetmeniz yeterlidir.

HTML yapısı

// html oluşturmak için görev gulp.task ("html: build", function () (gulp.src (path.src.html) // İstenen yoldaki dosyaları seçin. pipe (rigger ()) // Rigger üzerinden çalıştırın .pipe (gulp.dest (path.build.html)) // bunları derleme klasörüne yükleyin .pipe (connect.reload ()) // Ve güncellemeler için sunucumuzu yeniden yükleyin));

JS yapısı

// js'de hata olup olmadığını kontrol edin ve bunların çıktısını konsola gulp.task ("jshint: build", function () (gulp.src'yi (path.src.jshint) döndürün) // istediğiniz path.pipe'daki (jshint () dosyaları seçin )) // jshint .pipe üzerinden çalıştırın (jshint.reporter ("jshint-stylish")); // hata çıktısını konsola biçimlendirin)); // javascript gulp.task ("js: build", function () (gulp.src (path.src.js) oluşturma) // Ana dosyamızı bulun.pipe (rigger ()) // Rigger .pipe ( ile çalıştırın) sourcemaps .init ()) // Sourcemap .pipe'ı başlat (uglify ()) // js .pipe'ımızı sıkıştırın (sourcemaps.write ()) // maps.pipe ekleyin (yeniden adlandırın ((sonek: ".min"))) // çıktı dosyasına .min son ekini ekleyin .pipe (gulp.dest (path.build.js)) // boşaltma hazır dosya build .pipe'da (connect.reload ()) // Ve sunucuyu yeniden başlatın));

Sprite derlemesi

Sprite olarak birleştirilecek tüm resimler src / css / sprites / dizinine eklenir ve Gulp'tan geçtikten sonra tek bir hareketli resim haline gelirler. Net boyutlar olmadan logoları ve arka planları sprite'lara koymamalısınız.

// build sprites gulp.task ("sprites: build", function () (var spriteData = gulp.src (path.src.sprites) // görüntülerin bir hareketli grafikte birleştirileceği yeri seçin. boru ((imgName) : " sprite.png ", // hareketli resmin adı cssName:" sprite.stil ", // resimlerin hareketli grafiğindeki konumlarını sakladığımız stilin adı imgPath:" images / sprite.png ", / / hareketli grafiğin bulunduğu yol cssFormat:" stylus ", // konumları işlediğimiz format cssTemplate: "stylus.template.mustache", // maske dosyası cssVarMap: function (sprite) (sprite.name = "s-" + sprite.name // her hareketli grafiğin adı, dosya adından ve adın başındaki "s-" yapısından oluşur))); spriteData.img.pipe (gulp.dest (path.build.sprites)) ; // resmi kaydettiğimiz yol spriteData.css.pipe (gulp.dest (yol .build.spritesCss)); // stilleri kaydettiğimiz yol);

Bir hareketli grafiği görüntülemek için sadece bir mixin kullanın. Örneğin, lorem.png dosyası için, hareketli grafikten alınan örnek şöyle görünecektir:

Lorem hareketli grafiği ($ s-lorem)

Şimdi .lorem sınıfına sahip bir nesne görüntünün boyutlarını ve görüntünün kendisini arka plan olarak alacaktır.

Statik görüntüler oluşturun

Statik resimler, yerleşim şablonunda kullanılan resimlerdir.

// statik görüntüler inşa gulp.task ("image: build", function () (gulp.src (path.src.img) // Images.pipe'ımızı seçin (imagemin ((// Onları sıkıştırın progresif: true, //) sıkıştırma.jpg svgoPlugins: [(removeViewBox: yanlış)], // sıkıştırma.svg geçmeli: doğru, // sıkıştırma.gif optimizasyonSeviye: 3 // 0'dan 7'ye sıkıştırma oranı)) .pipe (gulp.dest (yol. build.img)) // .pipe oluşturmak için yükle (connect.reload ()) // sunucuyu yeniden başlat));

Dinamik görüntülerin oluşturulması

Dinamik görseller, sitede değişecek olan içerik görselleridir ve yalnızca tanıtım amaçlı olarak şablon düzeyinde bağlanır. Örneğin, haberler vb. için resimler olabilir.

// dinamik görüntüler oluştur gulp.task ("imagescontent: build", function () (gulp.src (path.src.contentImg) .pipe (imagemin ((// Bunları sıkıştırın aşamalı: true, // comp.jpg svgoPlugins: [(removeViewBox: false)], // sıkıştırma.svg geçmeli: doğru, // sıkıştırma.gif optimizasyonSeviye: 3 // 0'dan 7'ye sıkıştırma oranı)) .pipe (gulp.dest (path.build.contentImg)) // .pipe oluşturmak için yükle (connect.reload ()) // sunucuyu yeniden başlat));

CSS oluşturun

// özel css gulp.task oluşturma ("cssOwn: build", function () (gulp.src (path.src.css) // Ana stil sayfamızı seçin (sourcemaps.init ()) // soucemap. borusunu başlat (stylus ((sıkıştır: true, "css dahil": true))) // stylus .pipe'ı derleyin (ön ek ((tarayıcı: ["son 3 sürüm", "> %1", "yani 8", "ör. 7 "]))) // Satıcı öneklerini ekleyin .pipe (cssmin ()) // Compress.pipe (sourcemaps.write ()) // sourcemap yazın .pipe (yeniden adlandırın ((sonek:" .min "))) / / .min son ekini çıktı dosyasına ekleyin name.pipe (gulp.dest (path.build.css)) // build .pipe'a yükleyin (connect.reload ()) // sunucuyu yeniden başlatın));

Harici stiller için ayrı bir görev:

// satıcı css gulp.task ("cssVendor: build", function () (gulp.src (path.src.cssVendor) oluşturma) // Satıcı klasörünü .pipe (sourcemaps.init ()) // başlat soucemap .pipe ( cssmin ()) // Compress.pipe (sourcemaps.write ()) // sourcemap .pipe yaz (gulp.dest (path.build.css)) // .pipe oluşturmak için yükle (connect.reload ()) / / sunucuyu yeniden başlatın));

Ayrıca ortak bir CSS oluşturma görevi ekleyelim:

// tüm css'yi oluştur gulp.task ("css: build", ["cssOwn: build", // "cssVendor: build"]);

Harici stilleri ev stillerinden ayrı olarak işlemeniz ve bunları boşaltmanız gerekiyorsa ayrı dosyalar"cssVendor: build" satırını kaldırmanız gerekiyor

Yazı tipi oluşturma

// fontları derleme gulp.task ("fontlar: derleme", işlev () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // derlemeye yükle));

Htaccess derlemesi

// build htaccess gulp.task ("htaccess: build", function () (gulp.src (path.src.htaccess) .pipe (gulp.dest (path.build.htaccess)) // derlemeye yükle));

Genel yapı

Her parçayı ayrı ayrı oluşturmak zorunda kalmamak için genel yapı için bir görev yazacağız:

// her şeyi inşa et gulp.task ("build", ["html: build", "jshint: build", "js: build", "sprites: build", "css: build", "fonts: build", " htaccess: inşa "," resim: inşa "," resimleriçerik: inşa "]);

Yapının temizlenmesi

Bazen derleme dizinini tamamen boşaltmak gerekir. Burada aşağıdaki görev yardımımıza gelecek:

// derleme klasörünü temizle gulp.task ("clean", function (cb) (rimraf (path.clean, cb);));

Değişiklikleri gerçek zamanlı olarak izleyin veya izleyin

En önemlilerinden biri ve faydalı fonksiyonlar Gulp, üretilen dosyalardaki tüm değişiklikleri gerçek zamanlı olarak izlemenizi ve buna bağlı olarak belirli eylemleri gerçekleştirmenizi sağlayan bir izleme işlevidir:

// gulp.task izle ("izle", işlev () (// değişiklik durumunda html oluştur izle (, işlev (event, cb) (gulp.start ("html: build"));) // build değişiklik durumunda sprite izle (, function (event, cb) (gulp.start ("sprites: build");)); // değişiklik durumunda bağlam görüntüleri oluştur watch (, function (event, cb) (gulp. start ("imagescontent: build ");)); // değişiklik olması durumunda css oluştur izle (, function (event, cb) (gulp.start (" css: build ");)); // durumda js'yi kontrol et değişiklik izle (, ["jshint"]); // değişiklik durumunda js oluştur izle (, function (event, cb) (gulp.start ("js: build");)); // statik görüntüler oluştur değişiklik durumunda watch (, function (event, cb) (gulp.start ("image: build");)); // değişiklik durumunda yazı tipleri oluştur izle (, function (event, cb) (gulp.start (" yazı tipleri: build");)) ; // değişiklik olması durumunda htaccess oluştur watch (, function (event, cb) (gulp.start ("htaccess: build");));));

Varsayılan eylemler

Varsayılan eylemler, konsola gulp komutunu girdiğinizde görev yöneticisinin gerçekleştireceği görevlerdir:

// varsayılan eylemler gulp.task ("varsayılan", ["build", "izle", "bağlan"]);

Bizim durumumuzda projemizi sonlandıracağız, izleme modunu etkinleştireceğiz ve sunucuyu başlatacağız.

Komut satırı komutları

Komut satırı için galp'in tüm komutları iki bölümden oluşur, bu kendisi yutma komutu ve görev adıyla ayrılmış bir boşluk. Yapılandırmamız için geçerli olan komutların listesi:

• gulp - ana komut, varsayılan görevi çalıştırır
• gulp build - her şeyi inşa et
• yudum izle - izlemeye başla
• gulp clean - derleme dizinini temizle
• gulp connect - sunucuyu çalıştırın
• gulp html: derleme - HTML oluşturma
• gulp jshint: build - JS'yi hatalar için kontrol edin
• yudum js: inşa - JS inşa
• yudum sprite: build - sprite'ı inşa et
• yudum görüntü: inşa - statik görüntüler oluşturun
• yudum imagecontent: build - dinamik görüntüler oluşturun
• gulp cssOwn: inşa - özel CSS oluşturun
• gulp cssVendor: inşa - harici CSS oluşturun
• yudum css: yapı - genel CSS yapısı
• yudum yazı tipleri: oluştur - yazı tipleri oluştur
• yudum htaccess: inşa - htaccess inşa

Bu noktada gulpfile.js kurulumu tamamlanmıştır.

Başlangıç ​​paketini projeye kopyalama

İlk olarak, geliştirmekte olduğumuz klasördeki konsoldan geçin, örneğin cd geliştirme / örnek ve başlangıç ​​paketi dizinindeki her şeyi cp -a ~ / geliştirme / başlatma / projemize kopyalayın. ~ / geliştir / örnek /

Bu kopyalama yöntemi en uygunudur çünkü gizli .gitignore dosyaları vb. dahil her şeyi tam olarak kopyalayacaktır.

Çözüm

kullanma bu kılavuz Front-end geliştirme projelerimizde Gulp'u kullanmak için bir başlangıç ​​paketi hazırladık.

Bu paket GitHub'da da mevcuttur.

Post Scriptum

Bu makale nihai değildir ve değişiklik ve iyileştirmelere göre güncellenecektir.