Nedir Bu Npm, Bower, Grunt, Gulp, Yeoman
Selamlar;
Bu makalemizde adı geçen terimleri örnekler vererek mümkün olduğunca tanıtmaya çalışacağım. Günümüzde hız ve optimizasyon herşeydir. Özellikle web teknolojilerinde bu durum kaçınılmazdır. Web uygulamalarımızda çeşitli tasklar hazırlıyıp bunları belirlediğimiz durumlarda çalıştırıp web application’ımız için optimizasyonlar sağlıyabiliriz. Örneğin javascript dosyalarını minify etmek, css dosyalarını birleştirmek veya belli folderları cachelemek gibi daha birçok işte kullanılabilir.
Npm:
Npm aynı Nuget’de olduğu gibi Node.js için çeşitli scriptleri otomatik olarak sisteme yüklemek, listelemek, silmek, update etmek gibi işlere yarıyan, command prompt’tan çalışan bir uygulamadır. Eğer Npm makinada yok ise Node.js‘in yüklenmesi ile Npm de otomatik olarak gelmiş olur.
Npm yani Node Package Modules ile örneğin gulp veya grunt kurmak istenir ise command prompt’a aşağıdaki örnekte olduğu gibi kodlar yazılır:
|
1 2 |
npm install gulp npm install grunt |
Yukarıda da gördüğünüz gibi diğer packageları kurabilmek için en önce Npm gerekmektedir. Bower için dahi önce Npm kurulu olması gerekir. Bower hakkında birazdan konuşacağız.
Birkaç önemli Npm komutundan bahsetmek istiyorum:
Esas belirlenen default yere ilgili paket’i aşağıdaki gibi yükler.
|
1 |
npm install <package name> -g |
Belirlenen bir versiyon veya belli bir versiyondan yukarısı aşağıdaki gibi yüklenir.
|
1 2 |
npm install express@2.4.0 npm install express@">=2.4.7" |
package.json ile önceden yüklenecek paketlerin tanımlandığı file içindekiler yüklenir.
|
1 |
npm install |
Örnek package.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "TestProject", "description": "Test git project.", "version": "0.0.1", "author": { "name" : "Bora Kaşmer", "email" : "bora@borakasmer.com" }, "repository": { "type": "git", "url": "http://github.com/borakasmer/test.git" }, "engines": [ "node >= 0.6.2" ], "license" : "CODEX", "dependencies": { "express": ">= 2.5.6", "mustache": "0.4.0", "commander": "0.5.2" }, "bin" : { "test" : "./cli.js" } } |
Var olan bir paketin güncellenmesi aşağıdaki gibidir.
|
1 |
npm update <package name> |
Var olan bir paketin silinmesi aşağıdaki gibidir.
|
1 |
npm uninstall express -g |
Yüklü paketlerin Listesi aşağıdaki komut ile görülebilir.
|
1 |
npm list |
Örnek çıktı:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
express@3.0.0alpha1-pre /Users/airportyh/Home/Code/express ├── commander@0.5.1 ├─┬ connect@2.0.0alpha1 │ ├── formidable@1.0.8 │ └── qs@0.4.2 ├─┬ connect-redis@1.2.0 │ └── redis@0.7.1 ├── debug@0.5.0 ├── ejs@0.6.1 ├── jade@0.20.1 ├── mime@1.2.4 ├── mkdirp@0.3.0 ├─┬ mocha@0.12.0 │ └── growl@1.4.1 ├── should@0.5.1 └─┬ stylus@0.23.0 ├── cssom@0.2.1 ├── growl@1.1.0 └── mkdirp@0.0.7 |
Bower:
Şimdi biraz da Bower hakkında konuşalım.
Bower aynı NPM gibi twitter tarafından geliştirilen bir paket yöneticisidir.
Öncelikle Bower’ı kurmak için alttaki komut yazılır. Görüldüğü üzere Bower’ı kurmak için NPM gerekmektedir.
|
1 |
npm install -g bower |
Bower uygulaması Git versiyon sistemini kullandığı için pc’de Git yüklü olmalıdır..
Örnek kodlar:
|
1 |
bower install bootstrap |
Bower ile yüklenen paket ile ilintili başka dosyalar var ise default olarak o anda bulunulan dizinde bower_components adında bir folder oluşturur. Yüklenen tüm dosyalar bu dizin içerisinde alt dizinler olarak tutulur. Bu durumda versiyon belirtilmediği için istenilen dosyanın en son versiyonu yüklenmiş olur.
Belirli bir versiyona göre paket yüklemek için aşağıdaki kod yazılır:
|
1 |
bower install jquery#2.0.0 |
Belirtilen paket aşağıdaki komut ile silinir.
|
1 |
bower uninstall <package> |
Paket aşağıdaki komut ile aranır.
|
1 |
bower search [<ifade>] |
Her bir web projesinde kullanılan dosyalar farklılık gösterebilir. Herbirini farklı yerlerde saklanması için bir paket tanımlayıcısı gerekmektedir. Bir bower paketinin kimliğini bower.json adındaki dosya oluşturu. Alttaki komut ile bu dosya oluşturulur. Bu dosya içerisinde, projenin developer bilgisi, versiyon bilgisi, versiyonun tutulduğu url bilgisi, buna bağlı dosya bilgileri veya lisans bilgileri daha birçok bilgi saklanmaktadır.
|
1 |
bower init |
Örnek bower.json aşağıdaki gibidir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "authors": [ "Bora KAŞMER " ], "description": "Style Package", "license": "Xproject", "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" } } |
Uygulamada geçen bağımlı dosyaları bower.json dosyaya dizi olarak yazdırmak için alttaki komut kullanılır.
|
1 |
bower install <package> --save |
Geliştirici bağımlı dosyaları yani devDependencies dosyaları yazdırmak için alttaki komut kullanılır.
|
1 |
bower install <package> --save |
Bower’a yüklü dosya listesini aşağıdaki komut ile alınır.
|
1 |
bower list |
Bower, web projemizde kullanılan birden çok paket var ise çok faydalı olabilir. Versiyonlama ve her pakete göre farklı özellikleri tanımlamak için birebirdir. Bower hakkında daha detaylı bilgi için Bower’s Github sayfasına gidebilirsiniz..
Grunt:
Grunt belirlenen taskları çalıştıran bir yapıdır. Web geliştirme sırasında yapılacak operasyonları otomatikleştiren bir araçtır. Her seferinde yapılan değişiklik ile, css lerin cssmin gibi ufaltma işlemleri yapmak, imajları sıkıştırmak, javascriptleri temizleyip küçültmek ,birden fazla dosyayı tek bir dosya haline getirmek gibi işleri her defasında manuel olarak tekrarlanması mümkün değildir. İşte bu işlemleri her seferinde yapan ve otomatikleştiren uygulama Grunt’dır. Daha birçok amaca uygun grunt eklentileri vardır.
Grunt’ın çalışması için Node.js ve buna bağlı olarak NPM’in yüklü olması gerekir. Yükleme komutu aşağıda görüldüğü gibidir.
|
1 |
npm install -g grunt-cli |
Yüklendiği ve versiyon bilgisi aşağıdaki gibi kontrol edilebilir.
|
1 |
grunt --version |
Şimdi projenin kök dizininde bir package.json ve gruntfile.js dosyası oluşturalım. Grunt oluşturulan dosyaların blunduğu klasör içerisinde çalışır. Grunt’a erişmeden önce geçerli dizine gidilmesi gerekimektedir. Package ve Gruntfile lara göre gerekli işlem yapılır. Package.json oluşturmada amaç projenin bağımlı olduğu dosyaları yüklemek ve izlemektir. Bu dosya üzerinden istediğimiz node modüllerini tanımlayabilir, yükleyebilir ve izleyebiliriz.
Örneğin ben imageları sıkıştırma işelmini grunt ile yaptım. Öncelikle package.json dosyası folder’da yaratıp içine alttaki config’i yazdım.
|
1 2 3 4 5 6 7 8 |
{ "name": "Image-Optimizer", "title": "Test Image Minify", "description": "At this project we minify all image under Upload folder", "author": "Bora KAŞMER", "version": "2.0.0", "devDependencies": {} } |
Şimdi aşağıdaki yapıyı iyice öğrenin. Çünkü vNext Mvc 6.0’da, Visual studio 2014’de artık project.json dosyası gelicek ve içeriği alttaki gibi olucak. Yani project dosyaları json olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "webroot" : "wwwroot", "exclude": "wwwroot/**/*.*", "dependencies": { "Microsoft.AspNet.Diagnostics": "1.0.0-alpha4", "Microsoft.AspNet.Hosting": "1.0.0-alpha4", "Microsoft.AspNet.Server.WebListener": "1.0.0-alpha4", "Microsoft.AspNet.Server.IIS": "1.0.0-alpha4" }, "commands": { "web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.WebListener --server.urls http://localhost:5001" }, "frameworks": { “aspnet50”: {}, “aspnetcore50”: {} } } |
Alttaki komut bağımlılıkları var olan proje altında node_modules klasörü yaratarak içine yerleştirir.‘grunt-image-optimizer’. Böylece Grunt projeye eklenmiş olur.
|
1 |
npm install grunt --save-dev |
Altta gerekli olan grunt-pngmin ve grunt-smushit packageları yüklenmiştir.
|
1 2 |
npm install grunt-pngmin --save-dev npm install grunt-smushit --save-dev |
grunt-image-optimizer folder içine yukarda bahsettiğimiz gruntfile.js dosyası oluşturulur ve içine alttaki kodlar konur. Aşağıda upload kalasörü içindeki png ve jpg uzantılı resimler üzerinde işlem yapılarak sıkıştırılması sağlanmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), pngmin: { compile: { options: { ext: '.png', force: true }, files: [{ expand: true, // required option src: ['**/*.png'], cwd: 'uploads/', // required option dest: 'uploads/' }] } }, smushit: { mygroup: { src: ['uploads/**/*.jpg', 'uploads/**/*.png'], dest: 'uploads/' } } }); grunt.loadNpmTasks('grunt-pngmin'); grunt.loadNpmTasks('grunt-smushit'); grunt.registerTask('default', ['pngmin', 'smushit']); } |
İlgili grunt script’i yani hazırladığımız grunt,js’i çalıştıran komut aşağıdadır.
|
1 |
grunt |
İşte yukarıda gördüğünüz gibi belli bir folderdaki imageler grunt ile otomotize edilerek sıkıştırılır.
Gulp:
Gulp’da grunt gibi gerekli olan bir takım işleri otomatize eden Node.js tabanlı bir komut satırı uygulamasıdır.
Alttaki komut ile yüklenir.
|
1 |
npm install -g gulp |
Yüklendiğini doğrulamak için alttaki kod yazılır.
|
1 |
gulp -v |
Projeye ait dizinin altında alttaki komut yazılır ise Gulp aynı Grunt’daki gibi projeye dahil edilmiş olur ve proje altında node_mudules altında folder açarak dosyaları bunun içine atar.
|
1 |
npm install gulp --save-dev |
Gulp’ın 400 yakın eklentisi vardır. Buradan tamamına erişebilirsiniz.
Öne çıkanları aşağıda görüldüğü gibidir.
- JSHint (gulp-jshint)
- Resim sıkıştırma (gulp-imagemin)
- Sass (gulp-sass)
- CoffeeScript (gulp-coffee)
- Dosya izleme (gulp-watch)
Şimdi isterseniz tüm javascriptlerimizi tek bir javascript yapıp minify yapan bir örneği gulp ile yapalım.
Öncelikle bir temizleme işlemi yapalım. Yani herşeyi en baştan başlatalım.
gulp-clean: Herşeyi temizlemek için clean paketini indirelim.
|
1 |
npm install --save gulp-clean |
|
1 2 3 4 5 6 7 |
var gulp = require('gulp'); var clean = require('gulp-clean'); gulp.task('clean', function () { return gulp.src('build', {read: false}) .pipe(clean()); }); |
Şimdi uygulamadaki tüm scriptleri birleştirip tek bir project.js haline getirelim.
gulp-concat: Javascriptleri birleştirmek için concat paketini indirelim.
|
1 |
npm install --save gulp-concat |
Aşağıda görüldüğü gibi proje altındaki script klasöründeki tüm js’ler build klasör’ü altına project.js adı altında birleştirilerek konur.
|
1 2 3 4 5 6 7 |
var concat = require('gulp-concat'); gulp.task('manage', function() { return gulp.src('script/*.js') .pipe(concat('project.js')) .pipe(gulp.dest('build/project.js')) }); |
Şimdi script’i minify edelim.
gulp-uglify: Script’i minify etmek için uglify paketini indirelim
|
1 |
npm install --save gulp-uglify |
Aşağıda görüldüğü gibi tüm scriptler build/project.js adı altında birleştirilmiş ve minify edilmiştir. Minify için pipe’a sadece uglify() methodu eklenmiştir.
|
1 2 3 4 5 6 7 8 |
var uglify = require('gulp-uglify'); gulp.task('manage', function() { return gulp.src('script/*.js') .pipe(concat('project.js')) .pipe(uglify()) .pipe(gulp.dest('build/project.js')) }); |
Aşağıda uglify() methodu javascript’de yanlış bir kod varsa minify sırasında hata fırlatır. İşte isterseniz bunu da aşağıdaki gibi projectError.log dosyasına loglayalım.
|
1 2 3 4 5 6 7 8 9 |
var projectError= require('gulp-util'); gulp.task('manage', function() { return gulp.src('project/*.js') .pipe(concat('project.js')) .pipe(uglify()) .pipe(gulp.dest('build/project.js')) .on('error', projectError.log) }); |
Sanırım isiminide project.min.js olarak değiştirme vakti geldi.
gulp-rename: Script’in ismini değiştirmek için rename paketini indirelim. İlgili kod aşağıdadır.
|
1 |
npm install --save gulp-rename |
Project.js’i project.min.js olarak değiştirelim.
|
1 2 3 4 5 6 7 8 9 10 11 |
var rename = require('gulp-rename'); gulp.task('manage', function() { return gulp.src('script/*.js') .pipe(concat('project.js')) .pipe(gulp.dest('build')) .pipe(uglify()) .pipe(rename('project.min.js`)) .pipe(gulp.dest('build')) .on('error', projectError.log) }); |
Son olarak minify ettiğimiz script.js dosyasının boyutuna bakalım. Ben iki durum arasındaki yani minify ile minify olamama durumundaki farklı görmek istedim.
gulp-filesize:İlgili file’in size’ını öğrenmek için filesize paketini indirelim.
|
1 |
npm install --save gulp-filesize |
Aşağıda görüldüğü gibi project.js ve minify olduktan sonraki project.min.js dosya boyutları filesize() methodu ile bakılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var filesize = require('gulp-filesize'); gulp.task('manage', function() { return gulp.src('script/*.js') .pipe(concat('project.js')) .pipe(gulp.dest('build')) .pipe(filesize()) .pipe(uglify()) .pipe(rename('project.min.js`)) .pipe(gulp.dest('build')) .pipe(filesize()) .on('error', gutil.log) }); |
Tüm kod aşağıdaki gibidir: Sonuç olarak tüm scriptleri alınıp build/folder altına project.js adı altında toplanır. Daha sonra ilgili dosya minify edilip adı project.min.js olarak değiştirilir. Minify’dan önceki ve sonraki file sizelara bakılır. Hata durumunda projectError.log dosyasına kaydedilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var path = require('path'); var gulp = require('gulp'); var projectError= require('gulp-util'); var clean = require('gulp-clean'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var filesize = require('gulp-filesize'); gulp.task('clean', function () { return gulp.src('build', {read: false}) .pipe(clean()); }); gulp.task('manage', function() { return gulp.src('script/*.js') .pipe(concat('project.js')) .pipe(gulp.dest('build')) .pipe(filesize()) .pipe(uglify()) .pipe(rename('project.min.js`)) .pipe(gulp.dest('build')) .pipe(filesize()) .on('error', projectError.log) }); |
Yukarıda görüldüğü gibi gulp bence özellikle syntax’ındaki kolaylığı ile çok kullanışlı bir uygulama. Ayrıca bu kadar kısa zamanda 400’e yakın plugin olması harika. Grunt’a göre Gulp bana daha yakın geldi.
Yeoman:
Yeoman command-line arayüzü ile node.js kullanan yo komutu ile pluginleri çağıran google tarafından geliştirilmiş bir uygulamadır. Aşağıdaki komut ile yüklenir.
|
1 |
npm install -g yo |
Belirlenen indirilmiş paketlerin yo komut ile çalıştırılmasında (Grunt ve Gulp) gibi uygulamalar kullanılır. Paket yönetiminde (Bower ve Npm) gibi uygulamalar kullanılmaktadır.
Yeoman ile angularjs kullanımına bir örnek vermek istersek:
Öncelikle angularjs yüklenir.
|
1 |
npm install -g generator-angular |
Daha sonra uygulama içinde bir directory açılır ve uygulama yo komutu ile çalıştırılır.
|
1 |
yo angular |
Yeoman’de kullanılan uygulamamızı çeşitli özelleştirmeler yapabileceğimiz generatorlar vardır. Aşağıda bunla ilgili örnek gözükmektedir.
|
1 |
yo angular --minsafe |
AngularJS frameworkünde ,uygulamamız birçok parçadan oluşabilir. Bunlar controllers, directives and filters gibi parçalardır. Bu parçalar gibi daha birçoğunu aşağıda görüldüğü gibi çeşitli parametrelere atayabiliriz. Sonra da üzerinde istediğimiz işlemleri gerçekleştirebiliriz.
|
1 2 3 4 |
yo angular:controller myController yo angular:directive myDirective yo angular:filter myFilter yo angular:service myService |
Yeoman aslında tüm yukarıda bahsettiğimz paketleri kolayca yönettiğimiz bir uygulamadır. Daha detaylı bilgiyi ve örnekleri burdan edinebilirsiniz.
Yukarıda bahsettiğimiz tooların tamamı modern web uygulamaları geliştirmenin temel bileşenleriden bazılarıdır. Hepsi işimizi hızlandırmak ve manuel yaptığımız birçok işi otomotize etmeye yaramaktadır. İlerde karşımıza bolca çıkacak gibi görünen bu uygulamalara şimdiden aşina olmanızı tavsiye ederim. Okuduğum ve takip ettiğim birçok vNext Mvc 6.0 ve Asp.Net seminer ve kaynaklarda, bu konular üzerinde sıkça durulmaktadır.
Yeni bir makalede görüşmek üzere hoşçakalın.
Source:
Hocam ağzınıza sağlık;
Ben de birçok kere bu terimler ile karşılaşmıştım. Bütün hepsi üzerinden çok güzel örnekler vermişsiniz.
Bunu hap şeklinde yutmak engüzeli:)
Hocam elinize sağlık;
Özellikle javascriptleri birleştirip minify etmek ve imaj dosyalarını sıkıştırmak zaten benim de ençok kullandığım yapılardı. Örnekler çok can alıcı teşekkürler. Bu arada bence de Gulp hocam..
Hocam teşekkürler;
Herkes parça parça yazmış. Şöyle derli toplu gördüğüm bu konulardaki en güzel türkçe kaynak.
İyi varsınız hocam..
Elinize sağlık hocam;
Herşey bilgi ile alkalı cem. En sade şekilde birşeyi öğretebilmek için en karmaşık ve zor şekilde öğrenmek gerekir.Sadelik bilgeliktir. Bora hocam böyle nekadar sade derli toplu anlatıyorsa, bir o kadar da emek ve tecrube kendisinde bulunuyor..
Yazı için teşekkürler. sade ve açıklayacı olmuş.
yalnız bir sorum var; terminal kodları görüyorum, dolayısıyla bu işlemleri windows da yapamıyor muyuz? illa mac mi?
Selam Mehmet;
Anlattığım makalenin tamamı Windows7 işletim sistemi altında yapılmıştır.
İyi çalışmalar.
Ellerinize sağlık.
Anlatımınızda ki sadelik ve verdiğiniz örneklerde ki kullanışlılık olarak mest eden bir yazı olmuş. An itibari ile artık sıkı bir takipçinizim.
Her şey için teşekkürler.
Teşekkürler Hasan.
Böyle bir yazı yorumsuz kalmamalı…
Anlatım için teşekkür ederim. Emeğinize sağlık.
Çok teşekkür ederim Şeref.
Çok yararlı bir yazı olmuş. Emeğinize sağlık.
Teşekkürler Emre..
Sade anlaşılır ve güzel Türkçe. Teşekkürler hocam.
Ben teşekkür ederim.