grunt etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

7 Nisan 2015 Salı

Grunt, Mocha, Assert ve Should ile temel node.js uygulaması adımları

Grunt

Otomasyon için kullanacağız

Grunt temel taşımız
...:\> npm install -save-dev grunt

Hata olmaya müsait kodlarımız için erken uyarı sistemi:
...:\> npm install -save-dev grunt-contrib-jshint

Sürekli sistemi çalıştırmak yerine aktif olarak değişen dosyaları görünce çalıştırsın diye(bir nevi nodemon)
...:\> npm install -save-dev grunt-contrib-watch

Gruntfile.js ile otomasyon ayarlarımızı yapacağız.

module.exports = function(grunt){


    grunt.initConfig({
       // jshint: hangi klasör(/test/), alt klasörlerin hepsi(/**/) ve adı ne olursa olsun hangi dosya türlerinde(/*js) 
       //         olası sorunları inceleyecek
        jshint:{
            files:['test/**/*js']
        },
       // watch: hangi klasör(/test/), alt klasörlerin hepsi(/**/) ve adı ne olursa olsun hangi dosya türlerinin(/*js) 
       //        değişimlerinde otomasyon tekrar başlatarak hangi görevleri çalıştıracak
        watch:{
            files:['test/**/*js'],
            tasks:['jshint']
        }
    });

    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-watch");

}

JSDOC 3.3.0 beta

Eğer javascript dosyalarınızın belgelendirmesini istiyorsanız ve bunu jsdoc3 3.3.0 beta ile yapacaksınız ya kodlarınızın bulunduğu üst klasörlerin isimleri alt çizgi ile başlamayacak ya da node_modules/grunt-jsdoc/conf.json.EXAMPLE dosyasından aynı klasöre conf.json olarak oluşturup içindeki excludePattern'den _ çizgiyi kaldırmak için boşaltacaksınız excludePattern:"".
Sürekli aldığım sonuç aşağıdaki gibiydi:

C:\_Projeler\AdminLTE\trunk\node\batch>grunt jsdoc
Running "jsdoc:dist" (jsdoc) task
Documentation generated to C:\_Projeler\AdminLTE\trunk\doc
Done, without errors.

Ama bir türlü çıktı üretmiyordu. Bunu çözmek için C:\_Projeler\AdminLTE\trunk\node_modules\grunt-jsdoc\node_modules\jsdoc\conf.json.EXAMPLE adresindeki dosyanın bir kopyasını jsdoc_conf.json olarak Gruntfile.js ile aynı dizine kaydettim.

jsdoc_conf.json

{
  "tags": {
    "allowUnknownTags": true
  },
  "source": {
    "includePattern": ".+\\.js(doc)?$"
  },
  "plugins": [],
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": false,
    "default": {
      "outputSourceFiles": true
    }
  }
}

ve gruntfile içinede şu taskı tanımladım:

module.exports = function (grunt) {
    grunt.initConfig({
        jsdoc: {
            dist: {
                src: ['jsdoc_test/*.js'],
                options: {
                    destination: 'doc',
                    configure : "jsdoc_conf.json"
                }
            }
        },.....

ve konsoldan grunt jsdoc dediğimde çalışmıştı. Underscore için tedirgin olmama gerek yok çünkü sunucu dizini içindeki dosylarımın ya da istemcideki kendi kodlarımın(bower'ın değil) js belgelendirmesini yapacağım.

MOCHA

Test için kullanacağımız çatı. İçerisinde SHOULD ve ASSERT kullanacağız.
Kurulmaları için yapmamız gereken:

Birim testleri yazmak için
...:\> npm install -save-dev assert

Davranışsal testler yazmak için
...:\> npm install -save-dev should

Bu testleri çalıştırıp bize rapor üretmesini sağlamak için
...:\> npm install -save-dev mocha

Mocha varsayılan olarak test klasöründeki js dosyalarını çalıştıracağından test klasörü içinde test dosyalarımızı tutacağız

Test edilecek dosyamız sanki DB'de Kullanıcı işmizi yaptığımız Kullanici.js dosyamız olsun.
Önce models/Kullanici.js:

// BDD yazmıyoruz bu kodun içinde. Basit Unit Test ler yazdık.
var assert = require("assert");

var Kullanici = function (args) {

    assert.ok(args.eposta && args.sifre, "EPosta ve Şifre boş bırakılamaz");

    var f_getKullanici = function (_eposta, _sifre) {
        return {
            id:1,
            adiSoyadi: 'Cem Topkaya',
            meslegi: 'Yüksek Uzay Müh.'
        }
    };

    var f_getSonGirisTarihi = function (_kullaniciId) {
        assert.ok(_kullaniciId, "Kullanıcı ID boş olamaz");
        return new Date('2015-04-07 21:51');
    };

    var temelBilgiler = f_getKullanici(args.eposta, args.sifre);

    // Dikkat! Revealing module patternini kullanıyoruz
    return {
        eposta: args.eposta,
        temelBilgiler: temelBilgiler,
        sonGirisTarihi: f_getSonGirisTarihi(temelBilgiler.id)
    }
};

module.exports = Kullanici;

Önce models/DB.js:

var Kullanici = require('./Kullanici');
var DB = {
    Kullanici:Kullanici
};

// Bir namespace gibi hazırlıyoruz.
module.exports = DB;

Test kodumuz nasıl peki:

var assert = require("assert"),
    should = require('should'),
    DB = require('./../models/DB.js');

describe("Sisteme Giriş", function () {

    describe("Kullanıcı Girişi", function () {

        // Aşağıdaki testler erişebilsin diye burada tanımlı
        var girisYapanKullanici = {};

        before(function () {
            // User modelimiz çalışıyorsa nesne yaratacaktır.
            girisYapanKullanici = new DB.Kullanici({eposta:'cem@cem.net', sifre:'test12test'})
        });



        it("kullanıcı temel bilgileri tanımlı", function () {
            girisYapanKullanici.temelBilgiler.should.be.defined;
        });

        it("şifre tanımlı");

        it("şifre 6 karakterden az değil");


    });

    describe("Kullanıcı Kayıdı", function () {

        // Aşağıdaki testler erişebilsin diye burada tanımlı
        var kayitBilgileri = {};

        before(function () {
            // Başlangıçta tanımlanacak bilgiler
            kayitBilgileri = {eposta:'cemEtCem.Net',sifre:'testSifresiRakamYok'};
        });

        it('Eposta tanımlı', function () {
            kayitBilgileri.eposta.should.be.defined;
        });

        it('Eposta doğru girilmiş', function () {
            assert.notEqual(kayitBilgileri.eposta.indexOf('@'),-1,'eposta @ karakteri içermiyor');
        });
        
        it('Şifre en az 6 karakter', function () {
            assert.ok(kayitBilgileri.sifre.length >= 6, 'Şifre en az 6 karakter olmalı!');
        });
    });
});

Konsol üstünden hızlıca çalıştırmak için mocha yı globale yükleyebilirsiniz ya da package.json içinde scripts/test özelliğini aşağıdaki gibi doldurabilirsiniz:

{
    "name": "jsPattern",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "test": "./node_modules/.bin/mocha --reporter spec",
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.12.0",
        "cookie-parser": "~1.3.4",
        "debug": "~2.1.1",
        "express": "~4.12.2",
        "jade": "~1.9.2",
        "morgan": "~1.5.1",
        "serve-favicon": "~2.2.0"
    },
    "devDependencies": {
        "grunt": "^0.6.1",
        "grunt-contrib-jshint": "^0.6.1",
        "grunt-contrib-watch": "^0.6.1",
        "mocha": "^2.2.1",
        "should": "^5.2.0"
    }
}

Artık ...:\>npm test komutunu çalıştırdığımızda sonucumuz şöyle olacaktır:

Sanırım sonucu okumaya gerek yok. Yeşiller geçti kırmızılar kaldı.

Ekran görüntüleri:

11 Ekim 2014 Cumartesi

Yeoman ile proje üretmek

Yeoman için öncelikle node package manager kullanarak yo paketini yüklemelisiniz:

C:\Users\cem.topkaya>npm install -g yo
C:\Users\cem.topkaya\AppData\Roaming\npm\yo -> C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\yo\cli.js

> yo@1.3.2 postinstall C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\yo
> yodoctor

[Yeoman Doctor] Everything looks all right!

yo@1.3.2 C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\yo
├── is-root@1.0.0
├── sudo-block@1.0.0
├── yeoman-doctor@1.0.0
├── fullname@1.0.0
├── opn@1.0.0
├── async@0.9.0
├── shelljs@0.3.0
├── underscore.string@2.3.3
├── lodash@2.4.1
├── string-length@1.0.0 (strip-ansi@2.0.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── yeoman-character@1.0.0 (supports-color@1.1.0)
├── nopt@3.0.1 (abbrev@1.0.5)
├── findup@0.1.5 (commander@2.1.0, colors@0.6.2)
├── multiline@1.0.1 (strip-indent@1.0.0)
├── yosay@1.0.0 (ansi-regex@1.1.0, ansi-styles@1.1.0, strip-ansi@2.0.0, pad-component@0.0.1, minimist@1.1.0, taketalk@0.1.1, word-wrap@0.1.3)
├── update-notifier@0.2.2 (is-npm@1.0.0, semver-diff@2.0.0, latest-version@1.0.0)
├── configstore@0.3.1 (object-assign@0.3.1, osenv@0.1.0, graceful-fs@3.0.3, uuid@1.4.2, mkdirp@0.5.0, js-yaml@3.0.2)
├── insight@0.4.3 (object-assign@1.0.0, tough-cookie@0.12.1, os-name@1.0.1, lodash.debounce@2.4.1, request@2.45.0, inquirer@0.6.0)
├── yeoman-generator@0.17.7 (dargs@2.0.3, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, github-username@1.0.0, text-table@0.2.0, mime@1.2.11, isbinaryfile
p@0.5.0, cross-spawn@0.2.3, grouped-queue@0.3.0, run-async@0.1.0, iconv-lite@0.4.4, findup-sync@0.1.3, file-utils@0.2.1, cheerio@0.17.0, request@2.45.0, g
b@4.0.6, download@1.0.7, inquirer@0.7.3)
└── yeoman-environment@1.0.2 (log-symbols@1.0.1, diff@1.0.8, text-table@0.2.0, untildify@1.0.0, debug@2.0.0, grouped-queue@0.3.0, glob@4.0.6, inquirer@0.8

C:\Users\cem.topkaya>

Bu çıktılara en azından göz gezdirin ki, arkada neler döndüğünden azda olsa haberiniz olsun. Bakalım neler olmuş:

is-root paketi yüklenmiş(Check if the process is running as root user, eg. started with `sudo`)
sudo-block (Block users from running your app with root permissions)
shelljs(Portable Unix shell commands for Node.js)
chalk (Terminal string styling done right. Created because the `colors` module does some really horrible things.)
multiline(Multiline strings in JavaScript) çok iyi oldu bunu öğrendiğim
configstore (Easily load and save config without having to think about where and how)
insight (Understand how your tool is being used by anonymously reporting usage metrics to an analtyics vendor, e.g. Google Analytics.)
ve diğerleri...

Yo global olarak yüklendi:

Çalıştırabilmek için Evironment Variables içinde de tanımlanması gerekli:

İçerisinde HTML5 Boilerplate, jQuery, Modernizr, Bootstrap barındıran web uygulamalarını hızlıca oluşturmak için generator-webapp paketini yüklemeliyiz:

C:\Users\cem.topkaya\WebstormProjects\yodemo>npm install -g generator-webapp
generator-mocha@0.1.6 C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-mocha
└── yeoman-generator@0.17.7 (dargs@2.0.3, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, text-table@0.2.0, mime@1.2.11, async@0.9.0, isbinaryfile@2.0.1, shelljs@0.3.0, github-userna
me@1.0.0, debug@1.0.4, grouped-queue@0.3.0, nopt@3.0.1, cross-spawn@0.2.3, iconv-lite@0.4.4, mkdirp@0.5.0, chalk@0.5.1, run-async@0.1.0, underscore.string@2.3.3, findup-sync@0.1.3,
 glob@4.0.6, lodash@2.4.1, file-utils@0.2.1, request@2.45.0, cheerio@0.17.0, gruntfile-editor@0.2.0, download@1.0.7, inquirer@0.7.3)

generator-webapp@0.5.1 C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-webapp
├── chalk@0.5.1 (escape-string-regexp@1.0.2, supports-color@0.2.0, ansi-styles@1.1.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── yosay@1.0.0 (ansi-regex@1.1.0, string-length@1.0.0, ansi-styles@1.1.0, strip-ansi@2.0.0, pad-component@0.0.1, word-wrap@0.1.3, minimist@1.1.0, taketalk@0.1.1)
├── cheerio@0.17.0 (entities@1.1.1, lodash@2.4.1, dom-serializer@0.0.1, CSSselect@0.4.1, htmlparser2@3.7.3)
└── yeoman-generator@0.17.7 (dargs@2.0.3, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, text-table@0.2.0, github-username@1.0.0, mime@1.2.11, async@0.9.0, isbinaryfile@2.0.1, shell
js@0.3.0, mkdirp@0.5.0, iconv-lite@0.4.4, cross-spawn@0.2.3, underscore.string@2.3.3, lodash@2.4.1, debug@1.0.4, nopt@3.0.1, grouped-queue@0.3.0, run-async@0.1.0, findup-sync@0.1.3
, glob@4.0.6, file-utils@0.2.1, request@2.45.0, gruntfile-editor@0.2.0, download@1.0.7, inquirer@0.7.3)

C:\Users\cem.topkaya\WebstormProjects\yodemo>

Şimdi bir web app yaratalım:

C:\Users\cem.topkaya\WebstormProjects\yodemo>yo webapp
[?] ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
==========================================================================: Yes

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? Bootstrap, Sass, Modernizr
? Would you like to use libsass? Read up more at
https://github.com/andrew/node-sass#node-sass: Yes
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create app\styles\main.scss
   create app\favicon.ico
   create app\robots.txt
   create app\index.html
   create app\scripts\main.js
   invoke   mocha


I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.


'bower' is not recognized as an internal or external command,
operable program or batch file.
   create     test\bower.json
   create     test\.bowerrc
   create     test\spec\test.js
   create     test\index.html
'bower' is not recognized as an internal or external command,
operable program or batch file.
npm WARN package.json yodemo@ No description
npm WARN package.json yodemo@ No repository field.
npm WARN package.json yodemo@ No README data
|


> phantomjs@1.9.10 install C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-mocha\node_modules\grunt-lib-phantomjs\node_modules\phantomjs
> node install.js

Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-windows.zip
Saving to C:\Users\CEM~1.TOP\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip
Receiving...
  [========================================] 99% 0.0s/
Received 6823K total.
Extracting zip contents
Copying extracted folder C:\Users\CEM~1.TOP\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip-extract-1413038201009\phantomjs-1.9.7-windows -> C:\Users\cem.topkaya\WebstormP
rojects\yodemo\node_modules\grunt-mocha\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-mocha\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phanto
mjs.exe
\


> pngquant-bin@1.0.1 postinstall C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-pngquant\node_modules\
pngquant-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/pngquant-bin/v1.0.1/vendor/win/pngquant.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> optipng-bin@1.0.1 postinstall C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-optipng\node_modules\op
tipng-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/optipng-bin/v1.0.1/vendor/win/optipng.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> jpegtran-bin@1.0.2 postinstall C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\
jpegtran-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/jpegtran-bin/v1.0.2/vendor/win/x86/jpegtran.exe
     progress : [==                  ] 10% 0.0s  downloading : https://raw.github.com/imagemin/jpegtran-bin/v1.0.2/vendor/win/x86/libjpeg-62.dll
     progress : [====================] 100% 0.0s
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> gifsicle@1.0.3 postinstall C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-gifsicle\node_modules\gifs
icle
> node lib/install.js

  downloading : https://raw.github.com/imagemin/gifsicle-bin/v1.0.3/vendor/win/x86/gifsicle.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> node-sass@0.9.3 install C:\Users\cem.topkaya\WebstormProjects\yodemo\node_modules\grunt-sass\node_modules\node-sass
> node build.js

`win32-ia32-v8-3.14` exists; testing

  ........................

  24 passing (44ms)

Binary is fine; exiting
grunt-contrib-copy@0.5.0 node_modules\grunt-contrib-copy

apache-server-configs@2.8.0 node_modules\apache-server-configs

grunt-rev@0.1.0 node_modules\grunt-rev

grunt-contrib-clean@0.6.0 node_modules\grunt-contrib-clean
└── rimraf@2.2.8

grunt-newer@0.7.0 node_modules\grunt-newer
├── async@0.2.10
└── rimraf@2.2.6

grunt-usemin@2.4.0 node_modules\grunt-usemin
├── lodash@2.4.1
└── debug@1.0.4 (ms@0.6.2)

jshint-stylish@0.4.0 node_modules\jshint-stylish
├── log-symbols@1.0.1
├── text-table@0.2.0
└── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

grunt-concurrent@0.5.0 node_modules\grunt-concurrent
├── async@0.2.10
└── pad-stdio@0.1.1 (lpad@0.2.1)

load-grunt-tasks@0.4.0 node_modules\load-grunt-tasks
├── multimatch@0.1.0 (lodash@2.4.1, minimatch@0.2.14)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

grunt-contrib-concat@0.5.0 node_modules\grunt-contrib-concat
├── source-map@0.1.40 (amdefine@0.1.0)
└── chalk@0.5.1 (ansi-styles@1.1.0, supports-color@0.2.0, escape-string-regexp@1.0.2, strip-ansi@0.3.0, has-ansi@0.1.0)

time-grunt@0.4.0 node_modules\time-grunt
├── date-time@0.1.1
├── figures@1.3.3
├── text-table@0.2.0
├── hooker@0.2.3
├── pretty-ms@0.2.2 (parse-ms@0.1.2)
└── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)

grunt-contrib-watch@0.6.1 node_modules\grunt-contrib-watch
├── async@0.2.10
├── lodash@2.4.1
├── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, noptify@0.0.3, qs@0.5.6)
└── gaze@0.5.1 (globule@0.1.0)

grunt-contrib-htmlmin@0.3.0 node_modules\grunt-contrib-htmlmin
├── pretty-bytes@0.1.2
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── html-minifier@0.6.8 (relateurl@0.2.5, clean-css@2.2.16, change-case@2.1.5, cli@0.6.4, uglify-js@2.4.15)

grunt-contrib-connect@0.8.0 node_modules\grunt-contrib-connect
├── connect-livereload@0.4.0
├── open@0.0.5
├── async@0.9.0
├── portscanner@0.2.3 (async@0.1.15)
└── connect@2.19.6 (parseurl@1.0.1, escape-html@1.0.1, cookie@0.1.2, response-time@2.0.0, pause@0.0.1, cookie-signature@1.0.3, qs@0.6.6, vhost@1.0.0, bytes@1.0.0, fresh@0.2.2, basi
c-auth-connect@1.0.0, on-headers@0.0.0, serve-favicon@2.0.1, morgan@1.1.1, errorhandler@1.0.2, cookie-parser@1.1.0, debug@1.0.2, connect-timeout@1.1.0, body-parser@1.3.1, express-s
ession@1.2.1, method-override@2.0.2, type-is@1.2.1, compression@1.0.7, multiparty@3.2.8, csurf@1.2.1, serve-static@1.2.3, serve-index@1.1.1)

grunt-modernizr@0.5.2 node_modules\grunt-modernizr
├── colors@0.6.2
├── promised-io@0.3.4
├── uglify-js@1.3.3
└── request@2.27.0 (json-stringify-safe@5.0.0, aws-sign@0.3.0, qs@0.6.6, forever-agent@0.5.2, tunnel-agent@0.3.0, oauth-sign@0.3.0, cookie-jar@0.3.0, node-uuid@1.4.1, mime@1.2.11,
form-data@0.1.4, http-signature@0.10.0, hawk@1.0.0)

grunt-contrib-jshint@0.10.0 node_modules\grunt-contrib-jshint
├── hooker@0.2.3
└── jshint@2.5.6 (strip-json-comments@1.0.1, underscore@1.6.0, exit@0.1.2, minimatch@1.0.0, shelljs@0.3.0, console-browserify@1.1.0, cli@0.6.4, htmlparser2@3.7.3)

grunt-svgmin@0.4.0 node_modules\grunt-svgmin
├── each-async@0.1.3
├── pretty-bytes@0.1.2
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
└── svgo@0.4.5 (colors@0.6.2, whet.extend@0.9.9, coa@0.4.1, sax@0.6.0, js-yaml@2.1.3)

grunt-wiredep@1.9.0 node_modules\grunt-wiredep
└── wiredep@1.8.5 (propprop@0.3.0, minimist@1.1.0, chalk@0.5.1, through2@0.6.3, glob@4.0.6, lodash@2.4.1, bower-config@0.5.2)

grunt-mocha@0.4.11 node_modules\grunt-mocha
├── lodash@2.3.0
├── mocha@1.18.2 (diff@1.0.7, growl@1.7.0, commander@2.0.0, mkdirp@0.3.5, debug@2.0.0, glob@3.2.3, jade@0.26.3)
└── grunt-lib-phantomjs@0.4.0 (eventemitter2@0.4.14, semver@1.0.14, temporary@0.0.8, phantomjs@1.9.10)

grunt-contrib-uglify@0.5.1 node_modules\grunt-contrib-uglify
├── lodash@2.4.1
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
└── maxmin@0.2.2 (figures@1.3.3, pretty-bytes@0.1.2, gzip-size@0.2.0)

grunt-autoprefixer@1.0.1 node_modules\grunt-autoprefixer
├── diff@1.0.8
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
└── autoprefixer-core@3.1.1 (postcss@2.2.5, caniuse-db@1.0.20141008)

grunt-contrib-cssmin@0.10.0 node_modules\grunt-contrib-cssmin
├── chalk@0.4.0 (strip-ansi@0.1.1, has-color@0.1.7, ansi-styles@1.0.0)
├── clean-css@2.2.16 (commander@2.2.0)
└── maxmin@0.2.2 (pretty-bytes@0.1.2, figures@1.3.3, chalk@0.5.1, gzip-size@0.2.0)

grunt@0.4.5 node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── nopt@1.0.10 (abbrev@1.0.5)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
└── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)

grunt-contrib-imagemin@0.8.1 node_modules\grunt-contrib-imagemin
├── async@0.9.0
├── pretty-bytes@1.0.1 (get-stdin@1.0.0)
├── chalk@0.5.1 (ansi-styles@1.1.0, supports-color@0.2.0, escape-string-regexp@1.0.2, strip-ansi@0.3.0, has-ansi@0.1.0)
└── imagemin@1.0.5 (get-stdin@3.0.0, stat-mode@0.2.0, ware@0.3.0, nopt@3.0.1, tempfile@1.1.0, fs-extra@0.11.1, imagemin-svgo@1.0.2, imagemin-pngquant@1.0.2, imagemin-optipng@1.0.0,
 imagemin-jpegtran@1.0.0, imagemin-gifsicle@1.0.0)

grunt-sass@0.14.2 node_modules\grunt-sass
├── object-assign@1.0.0
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── each-async@1.1.0 (onetime@1.0.0, setimmediate@1.0.2)
└── node-sass@0.9.3 (object-assign@0.3.1, node-watch@0.3.4, nan@1.0.0, mkdirp@0.3.5, chalk@0.4.0, shelljs@0.2.6, node-sass-middleware@0.2.0, optimist@0.6.1, mocha@1.18.2, sinon@1.9
.1)

C:\Users\cem.topkaya\WebstormProjects\yodemo>

Klasörde yapısı şöyle değişti:

Şimdi Angular yüklemek için önce yo muzu `npm install -g generator-angular` ile güncelleyelim:

C:\Users\cem.topkaya\WebstormProjects\yodemo>npm install -g generator-angular
generator-karma@0.8.3 C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-karma
├── underscore@1.7.0
└── yeoman-generator@0.17.7 (dargs@2.0.3, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, text-table@0.2.0, mime@1.2.11, async@0.9.0, isbinaryfile@2.0.1, shelljs@0.3.0, github-userna
me@1.0.0, iconv-lite@0.4.4, underscore.string@2.3.3, cross-spawn@0.2.3, lodash@2.4.1, debug@1.0.4, nopt@3.0.1, grouped-queue@0.3.0, mkdirp@0.5.0, run-async@0.1.0, chalk@0.5.1, find
up-sync@0.1.3, glob@4.0.6, file-utils@0.2.1, cheerio@0.17.0, request@2.45.0, gruntfile-editor@0.2.0, download@1.0.7, inquirer@0.7.3)

generator-angular@0.9.8 C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── yosay@0.2.1 (pad-component@0.0.1, word-wrap@0.1.3, minimist@0.0.9)
├── wiredep@1.8.5 (propprop@0.3.0, minimist@1.1.0, lodash@2.4.1, chalk@0.5.1, through2@0.6.3, glob@4.0.6, bower-config@0.5.2)
└── yeoman-generator@0.16.0 (dargs@0.1.0, diff@1.0.8, debug@0.7.4, class-extend@0.1.1, rimraf@2.2.8, findup-sync@0.1.3, text-table@0.2.0, async@0.2.10, mime@1.2.11, mkdirp@0.3.5, i
sbinaryfile@2.0.1, shelljs@0.2.6, glob@3.2.11, underscore.string@2.3.3, iconv-lite@0.2.11, lodash@2.4.1, file-utils@0.1.5, request@2.30.0, cheerio@0.13.1, inquirer@0.4.1, download@
0.1.19)

C:\Users\cem.topkaya\WebstormProjects\yodemo>

Şimdi angular projesi oluşturalım:

C:\Users\cem.topkaya\WebstormProjects\yoAngular>yo angular

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
   create app\styles\main.scss
   create app\index.html
   create bower.json
   create .bowerrc
   create package.json
   create Gruntfile.js
   invoke   angular:common:C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\app\index.js
   create     .editorconfig
   create     .gitattributes
   create     .jshintrc
   create     .gitignore
   create     test\.jshintrc
   create     app\.buildignore
   create     app\.htaccess
   create     app\404.html
   create     app\favicon.ico
   create     app\robots.txt
   create     app\views\main.html
   create     app\images\yeoman.png
   invoke   angular:main:C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\app\index.js
   create     app\scripts\app.js
   invoke   angular:controller:C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\app\index.js
   create     app\scripts\controllers\main.js
   create     test\spec\controllers\main.js
   invoke   karma:app


I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.


'bower' is not recognized as an internal or external command,
operable program or batch file.
   invoke       angular:route
   invoke           angular:controller:C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\route\index.js
   create             app\scripts\controllers\about.js

C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\lib\detect-dependencies.js:89
  if ($._.isString(componentConfigFile.main)) {
                                      ^
TypeError: Cannot read property 'main' of undefined
    at findMainFiles (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\lib\detect-dependencies.js:89:39)
    at C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\lib\detect-dependencies.js:151:17
    at forOwn (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2105:15)
    at Function.forEach (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\node_modules\lodash\dist\lodash.js:3302:9)
    at detectDependencies (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\lib\detect-dependencies.js:33:7)
    at wiredep (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\wiredep\wiredep.js:65:39)
    at Generator._injectDependencies (C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\app\index.js:326:5)
    at C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\yeoman-generator\node_modules\async\lib\async.js:232:13
    at C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\yeoman-generator\node_modules\async\lib\async.js:113:21
    at C:\Users\cem.topkaya\AppData\Roaming\npm\node_modules\generator-angular\node_modules\yeoman-generator\node_modules\async\lib\async.js:24:16

C:\Users\cem.topkaya\WebstormProjects\yoAngular>npm WARN package.json yoangular@0.0.0 No description
npm WARN package.json yoangular@0.0.0 No repository field.
npm WARN package.json yoangular@0.0.0 No README data
|
> gifsicle@1.0.3 postinstall C:\Users\cem.topkaya\WebstormProjects\yoAngular\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-gifsicle\node_modules\g
ifsicle
> node lib/install.js

  downloading : https://raw.github.com/imagemin/gifsicle-bin/v1.0.3/vendor/win/x86/gifsicle.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> optipng-bin@1.0.1 postinstall C:\Users\cem.topkaya\WebstormProjects\yoAngular\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-optipng\node_modules
\optipng-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/optipng-bin/v1.0.1/vendor/win/optipng.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> jpegtran-bin@1.0.2 postinstall C:\Users\cem.topkaya\WebstormProjects\yoAngular\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modul
es\jpegtran-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/jpegtran-bin/v1.0.2/vendor/win/x86/jpegtran.exe
     progress : [============        ] 58% 0.2s  downloading : https://raw.github.com/imagemin/jpegtran-bin/v1.0.2/vendor/win/x86/libjpeg-62.dll
     progress : [====================] 100% 0.0s
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!

> pngquant-bin@1.0.1 postinstall C:\Users\cem.topkaya\WebstormProjects\yoAngular\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-pngquant\node_modul
es\pngquant-bin
> node lib/install.js

  downloading : https://raw.github.com/imagemin/pngquant-bin/v1.0.1/vendor/win/pngquant.exe
     progress : [====================] 100% 0.0s
? pre-build test passed successfully!
grunt-contrib-copy@0.5.0 node_modules\grunt-contrib-copy

grunt-contrib-clean@0.5.0 node_modules\grunt-contrib-clean
└── rimraf@2.2.8

grunt-contrib-concat@0.4.0 node_modules\grunt-contrib-concat
└── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)

grunt-filerev@0.2.1 node_modules\grunt-filerev
├── each-async@0.1.3
└── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)

grunt-newer@0.7.0 node_modules\grunt-newer
├── rimraf@2.2.6
└── async@0.2.10

jshint-stylish@0.2.0 node_modules\jshint-stylish
├── text-table@0.2.0
└── chalk@0.4.0 (has-color@0.1.7, strip-ansi@0.1.1, ansi-styles@1.0.0)

time-grunt@0.3.2 node_modules\time-grunt
├── date-time@0.1.1
├── pretty-ms@0.1.0
├── text-table@0.2.0
├── hooker@0.2.3
└── chalk@0.4.0 (ansi-styles@1.0.0, strip-ansi@0.1.1, has-color@0.1.7)

grunt-usemin@2.4.0 node_modules\grunt-usemin
├── debug@1.0.4 (ms@0.6.2)
└── lodash@2.4.1

grunt-concurrent@0.5.0 node_modules\grunt-concurrent
├── pad-stdio@0.1.1 (lpad@0.2.1)
└── async@0.2.10

grunt-contrib-compass@0.7.2 node_modules\grunt-contrib-compass
├── dargs@0.1.0
├── tmp@0.0.23
└── async@0.2.10

grunt-contrib-uglify@0.4.1 node_modules\grunt-contrib-uglify
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)
└── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1)

grunt-contrib-cssmin@0.9.0 node_modules\grunt-contrib-cssmin
├── clean-css@2.1.8 (commander@2.1.0)
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
└── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1)

grunt-contrib-htmlmin@0.3.0 node_modules\grunt-contrib-htmlmin
├── pretty-bytes@0.1.2
├── chalk@0.4.0 (strip-ansi@0.1.1, has-color@0.1.7, ansi-styles@1.0.0)
└── html-minifier@0.6.8 (change-case@2.1.5, relateurl@0.2.5, clean-css@2.2.16, cli@0.6.4, uglify-js@2.4.15)

grunt-ng-annotate@0.3.2 node_modules\grunt-ng-annotate
└── ng-annotate@0.9.11 (tryor@0.1.2, alter@0.2.0, simple-fmt@0.1.0, simple-is@0.2.0, stringset@0.2.1, stringmap@0.2.2, stable@0.1.5, convert-source-map@0.4.1, ordered-ast-traverse@
0.1.1, optimist@0.6.1, source-map@0.1.40, esprima@1.2.2)

grunt-contrib-jshint@0.10.0 node_modules\grunt-contrib-jshint
├── hooker@0.2.3
└── jshint@2.5.6 (strip-json-comments@1.0.1, underscore@1.6.0, exit@0.1.2, console-browserify@1.1.0, shelljs@0.3.0, minimatch@1.0.0, cli@0.6.4, htmlparser2@3.7.3)

grunt-svgmin@0.4.0 node_modules\grunt-svgmin
├── each-async@0.1.3
├── pretty-bytes@0.1.2
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── svgo@0.4.5 (colors@0.6.2, whet.extend@0.9.9, coa@0.4.1, sax@0.6.0, js-yaml@2.1.3)

grunt-wiredep@1.9.0 node_modules\grunt-wiredep
└── wiredep@1.8.5 (propprop@0.3.0, minimist@1.1.0, chalk@0.5.1, through2@0.6.3, glob@4.0.6, lodash@2.4.1, bower-config@0.5.2)

grunt-contrib-connect@0.7.1 node_modules\grunt-contrib-connect
├── connect-livereload@0.3.2
├── open@0.0.4
├── portscanner@0.2.2 (async@0.1.15)
├── async@0.2.10
└── connect@2.13.1 (uid2@0.0.3, methods@0.1.0, pause@0.0.1, debug@0.8.1, cookie-signature@1.0.1, qs@0.6.6, fresh@0.2.0, bytes@0.2.1, buffer-crc32@0.2.1, batch@0.5.0, raw-body@1.1.3
, cookie@0.1.0, compressible@1.0.0, negotiator@0.3.0, send@0.1.4, multiparty@2.2.0)

grunt-autoprefixer@0.7.6 node_modules\grunt-autoprefixer
├── diff@1.0.8
├── chalk@0.4.0 (ansi-styles@1.0.0, strip-ansi@0.1.1, has-color@0.1.7)
└── autoprefixer@1.3.1 (fs-extra@0.9.1, postcss@0.3.5, caniuse-db@1.0.20141008)

grunt-contrib-watch@0.6.1 node_modules\grunt-contrib-watch
├── async@0.2.10
├── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, noptify@0.0.3, qs@0.5.6)
├── gaze@0.5.1 (globule@0.1.0)
└── lodash@2.4.1

load-grunt-tasks@0.4.0 node_modules\load-grunt-tasks
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
└── multimatch@0.1.0 (minimatch@0.2.14, lodash@2.4.1)

grunt-google-cdn@0.4.3 node_modules\grunt-google-cdn
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── google-cdn@0.7.0 (regexp-quote@0.0.0, google-cdn-data@0.1.11, debug@1.0.4, async@0.9.0, semver@2.3.2, cdnjs-cdn-data@0.1.1)
└── bower@1.3.12 (is-root@1.0.0, junk@1.0.0, stringify-object@1.0.0, abbrev@1.0.5, chmodr@0.1.0, which@1.0.5, osenv@0.1.0, archy@0.0.2, opn@1.0.0, bower-logger@0.2.2, bower-endpoin
t-parser@0.2.2, lockfile@1.0.0, nopt@3.0.1, retry@0.6.0, rimraf@2.2.8, lru-cache@2.5.0, tmp@0.0.23, request-progress@0.3.0, q@1.0.1, shell-quote@1.4.2, chalk@0.5.0, semver@2.3.2, b
ower-json@0.4.0, promptly@0.2.0, p-throttler@0.1.0, fstream@1.0.2, mkdirp@0.5.0, fstream-ignore@1.0.1, bower-config@0.5.2, graceful-fs@3.0.3, decompress-zip@0.0.8, request@2.42.0,
bower-registry-client@0.2.1, tar-fs@0.5.2, cardinal@0.4.0, glob@4.0.6, mout@0.9.1, update-notifier@0.2.0, handlebars@2.0.0, inquirer@0.7.1, insight@0.4.3)

grunt@0.4.5 node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── grunt-legacy-util@0.2.0
├── hooker@0.2.3
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.5)
├── lodash@0.9.2
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
└── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)

grunt-contrib-imagemin@0.8.1 node_modules\grunt-contrib-imagemin
├── async@0.9.0
├── pretty-bytes@1.0.1 (get-stdin@1.0.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
└── imagemin@1.0.5 (get-stdin@3.0.0, stat-mode@0.2.0, ware@0.3.0, nopt@3.0.1, tempfile@1.1.0, fs-extra@0.11.1, imagemin-svgo@1.0.2, imagemin-gifsicle@1.0.0, imagemin-optipng@1.0.0,
 imagemin-jpegtran@1.0.0, imagemin-pngquant@1.0.2)

C:\Users\cem.topkaya\WebstormProjects\yoAngular>

Grunt içeriği:

Plugin	Description
contrib-jshint	Validate files using jshint
contrib-uglify	Minify JS files using UglifyJS
contrib-watch	Run tasks whenever watched files are changed
contrib-clean	Clean up files and folders
contrib-copy	Copy files and folders
contrib-concat	Combine files into a single file
contrib-cssmin	Compress CSS files
contrib-less	Compile LESS files to CSS
contrib-imagemin	Minify PNG, JPG, and GIFs
contrib-compass	Compile SASS to CSS using Compass
contrib-htmlmin	Minify HTML files

NOTLARIMDAN...

Aklımda Kalası Kelimeler