ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Grunt.js windows에서 설정...
    Web Program/AngularJS 2014. 5. 14. 02:13

     angularJS에 관련된 책이 나왔길래.. 현재 구매해서 보고있는중....^^;

    고재도님이 지으신 책인거같은데(예전에 전자정부 프레임워크 세미나 할때 뵌적이 있는듯...아닌가..)

    하여간... 책을 보다보니 실습하려고 했는데..처음부터 난관에 부딪히고 말았다...ㅠㅠ

    이름하야..."Grunt.js"....

    책에는 되게 쉽게 써있지만..

    그대로 따라하다보니.. localhost보기가 어렵더군...

    1시간 삽질만에 localhost 띄우기 성공...


    내 컴이 문제가 아닌이상... 세팅을 좀 해줘야 한다..

    nodejs 설치 후

    > npm install -g grunt-cli

    설치하면 친절하게도 어디다가 풀었다고 경로가 나온다..그럼 그 경로 그대로 따라가서 (ex.. 사용자폴더\AppData\Roaming\npm\node_modules\grunt-cli\)

    > npm instll

    이러면!!!분명.. grunt-contrib-connect가 설치가 되어야 하는데..설치가 안된다..ㅠㅠ

    pakage.json 안에 

    "devDependencies": {

        "grunt": "~0.4.0",

        "grunt-contrib-connect": "^0.7.1",

        "grunt-contrib-jshint": "~0.2.0"

      },

    분명히 있는데도...

    그래서 그냥 난 따로 설치해버렸다..

    npm install grunt-contrib-connect --save-dev

    그러면 정상적으로 설치가 되는것을 확인!

    설치 이후에는 약간의 설정 필요함..

    그냥 책처럼 실행하면..

    > grunt webserver 

    안되는거같고..

    > grunt connect

    해야하는데 저대로 했다간...또 오류를 보게된다... connect를 찾지 못한다는 얘기....

    그래서 수정을 해야합니다. 

    grunt-cli폴더 안에 gruntfile.js를 열고 jshint 밑에다가...

     connect: {

             test: {}      

        }

    요걸 붙여주고   

    아래쪽에 있는..

    grunt.loadNpmTasks('grunt-contrib-jshint');

    이것을 

    grunt.loadNpmTasks('grunt-contrib-connect');

    이렇게 바꿔준다..

    그리고 실행하면 되지만..바로 죽어버리는...서버..

    이유를...찾다가..

    http://blog.outsider.ne.kr/1048

    아웃사이드님의 블로그를 보고 알았다..(감사합니다.ㅠㅠ)

    > grunt connect:targetname:keepalive

    이렇게 하면 죽지 않고 살아있는 서버를 보게 될것!!!!!


    서버 세부설정파일은 

    grunt-contrib-connect 폴더안에 있는 connect.js 해주면 된다...그건 아웃사이더님 블로그에 있으니...

    확인해보시고 참고할 만한 페이지는 ..

    https://github.com/gruntjs/grunt-contrib-connect


    로컬주소 쓰고 포트 쓰고 테스트하면  끝!

    http://localhost:8000/






    'Web Program > AngularJS' 카테고리의 다른 글

    Yeoman 구성..  (0) 2014.05.24
    Form에 관련된 ng Type  (0) 2014.05.15
    자동완성 기능 사용~  (0) 2014.04.02
    초! 간단한 AngularJS 업로드!  (0) 2014.03.04
    AngularJS의 Basic!!  (0) 2014.03.01
Designed by Tistory.