질문을 삭제하지 말아주세요.!
 
1
0
-1

라라벨로 배우는 실전 php 웹 프로그래밍 책 21파트에서 시키는 그대로했는데 npm install 로 엘릭서가 의존하는 노드 패키지를 최초 설치하려니까 오류가 뜹니다. $ npm install

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 ( node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"}) 이런 오류가 뜨고, 분명 gulp 설치까지하고 버젼확인까지 했는데 $gulp 를 입력하면 No gulpfile found 가 뜹니다... 시키는 그대로만 했는데 그럽니다 어디가 잘못된건가요??


다시 보니 gulp 설치시에도 

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
myapp2@1.0.0 C:\Users\SAMSUNG\myapp2
+-- global@4.3.1
`-- gulp@3.9.1


이런 메세지가 뜨네요ㅠㅠ


혹시나 해서 gulpfile.js 가있는 곳에서 gulp를 실행해보니 

C:\Users\SAMSUNG\myapp2\node_modules\bs-recipes\recipes\gulp.task.sequence>gulp
module.js:471
throw err;
^

Error: Cannot find module 'gulp-sass'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\SAMSUNG\myapp2\node_modules\bs-recipes\recipes\gulp.task.sequence\gulpfile.js:3:19)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

이번엔 이런 오류입니다. 이것때문에 더이상 진도를 못나가네요 ㅠ

  1. 이현석

    혹시 라라벨 버전이 5.5.4인가요?

CommentAdd your comment...

4 answers

  1.  
    1
    0
    -1

    yarn 설치후에 gulp 잘됩니다~

    모든 작업을  /myapp 에서 해야 되네요...


    1. 김기완

      어떻게 해결하셨는지요?

      yarn 설치 후에도 잘 안되던데요.

    CommentAdd your comment...
  2.  
    1
    0
    -1

    윈도우 머신에서 확인해 보니 이건 "문제점"이 맞습니다. 요 몇일간 용준님은 소위 말하는 (노드의) "의존성 지옥"을 경험하신 걸로 보입니다. 노드는 version locking을 package.lock 없이 package.json에만 의존하기 때문에 생기는 문제이고요. 해결 방법을 찾아서 올리겠습니다. 우선 걸프 빌드가 안되어도 다음 챕터 진행하는데 문제가 없으니, 해결책이 나올 때까지는 그냥 건너뛰고 진행하시면 좋겠습니다


    제 실수인데 서버/백엔드 코드를 다루는 책인데 UI를 너무 강조했습니다.


    UI가 구리면 사용자가 꼬이지 않을 뿐이지 회사가 망하지 않습니다. UI는 디자이너의 영역이지 개발자의 영역이 아니기도 하구요. 회사/서비스가 망하는 것은 데이터가 오염되거나 사라지는 경우, 또는 그 데이터를 서비스하는 인프라가 망가지는 경우입니다. 


    제가 곧 답을 남겨 드리겠습니다. 그리고 문제점을 리포트 해 주셔서 고맙습니다.

    1. 김주원

      제가 가진 메모리 4GB 윈도우 머신에서는 한 시간이 지나도 작업이 끝나지 않네요. 우선 급하신 듯하여, (틀릴 수도 있지만), 링크 남겨 드립니다. 기존의 의존성을 전부 체크해서 업데이트하는 명령은 딱 세 줄입니다.

      http://stackoverflow.com/a/16074029/7511247


      npm i -g npm-check-updates
      npm-check-updates -u
      npm install
    2. 김주원

      예제 소스 코드 저장소에 해결 방법을 올렸습니다. 참고해주세요.

      https://github.com/appkr/l5code/issues/10

    3. 이용준

      댓글 정말 감사드립니다! yarn 으로도 다 했습니다. 그런데 마지막 $ gulp 를실행하니 Error: Cannot find module 'laravel-elixir-vue' 라고 뜨는군요. 엘릭서에 대한 모든것이 yarn install을 실행하면 되는게 아니였던건가요ㅠㅠ 따로 설치해야하나요?

    4. 김주원

      예제코드 21장으로 체크아웃해서 다시 한번 테스트해 봤는데요. 다음 절차대로 엘릭서를 쓰기위한 Node.js 의존 패키지 전체를 다시 설치해 보시겠어요.


      # 예제코드가 아니라 직접 작업하고 계신 브랜치라면 이 과정은 필요없습니다.
      ~/l5code(master) $ git checkout 2021-elixir-frontend 
      
      
      # 이미 설치된 Node.js 패키지를 전부 삭제하고, yarn이 만든 버전락 파일도 삭제합니다.
      ~/l5code(2021-elixir-frontend) $ rm -rf node_modules yarn.lock
      
      
      # Node.js 패키지를 처음부터 재 설치합니다.
      ~/l5code(2021-elixir-frontend) $ yarn install
      
      
      # laravel-elixir-vue 의존성이 설치되었나 확인합니다.
      ~/l5code(2021-elixir-frontend) $ ls -al node_modules/laravel-elixir-vue
      
      # gulp 빌드를 실행합니다.
      ~/l5code(2021-elixir-frontend) $ gulp
      
      # 전역 gulp로 빌드가 안되면 로컬 gulp로도 재시도해보세요.
      ~/l5code(2021-elixir-frontend) $ node_modules/.bin/gulp
      


    5. 이용준

      이제 완벽하게 되네요!!!! 정말 감사합니다. ui부분을 너무 강조한게 실수라고 하셧는데, 오히려 이렇게 한번 헤매보게 되니까 프론트영역에 가까워진 기분도 들고 좋습니다!! 친절하게 답변 해주셔서 너무 감사합니다. 남은부분도 열심히 할게요! 


    6. 김주원

      하하 다행입니다. 다시 돌이켜 보니 책 표지에 "풀 스택"이라고 쓰긴 했네요.

    7. 이용준

      질문 하나 더 드려도 되겟는지요... 제가 browsersync 를 설치하고 gulp watch 를 실했했는데, 잘되나 싶더니 localhost:3000에 접속이 안됩니다. localhost페이지가 작동하지 않음. 이라고 뜹니다.  css파일을 수정하면 cmd창에 변화는 감지가 됩니다만 localhost:3000에 연결이 안됩니다.3001은 접속이 되구요!

    8. 김주원

      책에는 썼지만(ㅜㅜ) 브라우저싱크는 리소스를 너무 많이 먹어서 사용을 추천하지 않습니다. 8GB 메모리, SSD가 달린 머신에서 IDE를 거의 쓸 수 없을 정도로 느려집니다. 아~ 이런게 있구나 정도로 이해하고 넘어가시면 좋을 것 같아요.

      작동하는 것을 확인해 보려면, 라라벨 내장 서버 구동할 때 php artisan server --host=0.0.0.0 으로 하셨는지 체크해 보세요. 여전히 안되면 gulpfile.js에서 프록시 주소를 용준님 머신의 로컬 IP주소:8000을 넣어보세요.

      제가 실험한 그림은 아래에 첨부합니다.

    CommentAdd your comment...
  3.  
    1
    0
    -1

    https://laracasts.com/discuss/channels/laravel/laravel-homestead-54-mix-error 여기에 같은 증상을 질문한 글이 있는데요, 윈도우나 윈도우에서 띄운 VM에서는 npm install 할 때 --no-bin-links 옵션을 넣어줘야 한다고 하네요. 윈도우나 윈도우에서 띄운 VM을 사용 중이시라면 아래와 같이 해보세요.

    npm install --no-bin-links
    1. 이용준

      댓글 감사합니다. 저렇게 해도 오류가 나는군요...ㅠㅠ 사실 지금 상황은 이렇습니다. 

      제가  stackoverflow 에 질문한 결과, 책의 내용과는 다르게 npm install --global gulp 를 한이후에 project에 gulpfile.js 파일을 직접 만들어 줘야 하더군요... 그런데 엘릭서를 설치하는 과정도 조금 달랐습니다. 책에서는 그냥 npm install을 하면 된다고 나와있는데 그렇게만 하니까 gulp를 실행 했을때 라라벨을 찾을수 없다고 하더군요. 결과적으로   npm install --save laravel-elixir 등 여러가지도 해야했습니다... 다된줄 알고 gulp를 했더니 이번엔  

      "C:\Users\SAMSUNG\myapp2>gulp 
      C:\Users\SAMSUNG\myapp2\node_modules\laravel-elixir-vue\main‌.js:4 Elixir.webpack.mergeConfig({ ^ TypeError: Cannot read property 'mergeConfig' of undefined"

      이런 에러가 뜨는군요 ㅠㅠ 여기서는 도저히 방법을 모르겟네요....

    2. 이현석

      라라벨 버전과 npm 버전은 몇인가요?

    CommentAdd your comment...
  4.  
    1
    0
    -1

    도움이 될 수도 있어 방금 테스트한 내용 전체 로그 남깁니다.


    제 환경에 설치된 노드 버전을 확인했습니다.

    ~/l5code(master) $ node --version
    # v6.9.5


    gulp를 전역으로 다시 설치했습니다.

    ~/l5code(master) $ npm install gulp-cli --global
    # npm WARN gentlyRm not removing /usr/local/bin/gulp as it wasn't installed by /usr/local/lib/node_modules/gulp-cli
    # /usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
    # - os-tmpdir@1.0.2 node_modules/gulp-cli/node_modules/os-tmpdir
    # - osenv@0.1.3 node_modules/gulp-cli/node_modules/osenv
    # /usr/local/lib
    # └─┬ gulp-cli@1.2.2
    #   ├─┬ chalk@1.1.3
    #   │ └─┬ has-ansi@2.0.0
    #   │   └── ansi-regex@2.1.1
    #   ├── fancy-log@1.3.0
    #   ├─┬ liftoff@2.3.0
    #   │ ├─┬ findup-sync@0.4.3
    #   │ │ └─┬ resolve-dir@0.1.1
    #   │ │   └─┬ global-modules@0.2.3
    #   │ │     └─┬ global-prefix@0.1.5
    #   │ │       ├─┬ homedir-polyfill@1.0.1
    #   │ │       │ └── parse-passwd@1.0.0
    #   │ │       └─┬ which@1.2.14
    #   │ │         └── isexe@2.0.0
    #   │ ├─┬ fined@1.0.2
    #   │ │ └─┬ parse-filepath@1.0.1
    #   │ │   └─┬ is-absolute@0.2.6
    #   │ │     └─┬ is-relative@0.2.1
    #   │ │       └── is-unc-path@0.1.2
    #   │ └─┬ resolve@1.3.2
    #   │   └── path-parse@1.0.5
    #   ├─┬ matchdep@1.0.1
    #   │ ├─┬ micromatch@2.3.11
    #   │ │ ├─┬ braces@1.8.5
    #   │ │ │ └─┬ expand-range@1.8.2
    #   │ │ │   └─┬ fill-range@2.2.3
    #   │ │ │     └── randomatic@1.1.6
    #   │ │ ├─┬ kind-of@3.1.0
    #   │ │ │ └── is-buffer@1.1.5
    #   │ │ └─┬ object.omit@2.0.1
    #   │ │   └─┬ for-own@0.1.5
    #   │ │     └── for-in@1.0.2
    #   │ └── resolve@1.1.7
    #   └─┬ yargs@3.32.0
    #     └─┬ cliui@3.2.0
    #       └── wrap-ansi@2.1.0


    현재 전역으로 설치된 gulp 버전을 확인했습니다.

    ~/l5code(master) $ gulp --version
    # [22:54:02] CLI version 1.2.2


    노드 모듈들을 다시 설치하기 위해 기존에 설치된 모듈을 모두 지우고 다시 설치했습니다.

    ~/l5code(master) $ rm -rf node_modules
    # ...
    
    ~/l5code(master) $ npm install
    # ...


    전역으로 설치된 gulp를 이용해 리소스를 빌드했습니다.

    ~/l5code(master) $ gulp
    [22:52:26] Using gulpfile ~/workspace/l5code/gulpfile.js
    [22:52:26] Starting 'all'...
    [22:52:26] Starting 'sass'...
    [22:52:28] Finished 'sass' after 1.75 s
    [22:52:28] Starting 'webpack'...
    [22:52:31]
    [22:52:31] Finished 'webpack' after 3.39 s
    [22:52:31] Starting 'scripts'...
    [22:52:32] Finished 'scripts' after 489 ms
    [22:52:32] Starting 'version'...
    [22:52:32] Finished 'version' after 195 ms
    [22:52:32] Finished 'all' after 5.83 s
    [22:52:32] Starting 'default'...
    ┌───────────────┬───────────────────────────────┬──────────────────────────────────────────────┬────────────────────┐
    │ Task          │ Summary                       │ Source Files                                 │ Destination        │
    ├───────────────┼───────────────────────────────┼──────────────────────────────────────────────┼────────────────────┤
    │ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss               │ public/css/app.css │
    │               │ 2. Autoprefixing CSS          │                                              │                    │
    │               │ 3. Concatenating Files        │                                              │                    │
    │               │ 4. Writing Source Maps        │                                              │                    │
    │               │ 5. Saving to Destination      │                                              │                    │
    ├───────────────┼───────────────────────────────┼──────────────────────────────────────────────┼────────────────────┤
    │ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js                   │ public/js/app.js   │
    │               │ 2. Writing Source Maps        │                                              │                    │
    │               │ 3. Saving to Destination      │                                              │                    │
    ├───────────────┼───────────────────────────────┼──────────────────────────────────────────────┼────────────────────┤
    │ mix.scripts() │ 1. Concatenating Files        │ node_modules/highlightjs/highlight.pack.js   │ public/js/app.js   │
    │               │ 2. Writing Source Maps        │ public/js/app.js                             │                    │
    │               │ 3. Saving to Destination      │ node_modules/select2/dist/js/select2.js      │                    │
    │               │                               │ node_modules/dropzone/dist/dropzone.js       │                    │
    │               │                               │ node_modules/marked/lib/marked.js            │                    │
    │               │                               │ node_modules/jquery-tabby/jquery.textarea.js │                    │
    │               │                               │ node_modules/autosize/dist/autosize.js       │                    │
    │               │                               │ resources/assets/js/forum.js                 │                    │
    ├───────────────┼───────────────────────────────┼──────────────────────────────────────────────┼────────────────────┤
    │ mix.version() │ 1. Versioning                 │ public/css/app.css                           │ public/build       │
    │               │ 2. Rewriting File Paths       │ public/js/app.js                             │                    │
    │               │ 3. Saving to Destination      │                                              │                    │
    │               │ 4. Copying Source Maps        │                                              │                    │
    └───────────────┴───────────────────────────────┴──────────────────────────────────────────────┴────────────────────┘
    [22:52:32] Finished 'default' after 8.11 ms

    -----------------------

    gulp 전역 설치는 선택사항입니다. 프로젝트에 설치된 gulp를 사용하려면 다음과 같이 합니다. 로컬 gulp를 사용해도 위와 똑같은 결과를 얻을 수 있습니다.

    ~/l5code(master) $ ./node_modules/.bin/gulp
    # ...
    1. 이용준

      node install 명령어를 실행하면 node_modules가 깔리긴 하는데 마지막에 


      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fseve nts):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darw in","arch":"any"} (current: {"os":"win32","arch":"ia32"})


      이렇게 뜹니다.gulp 설치를 했는데도 

      $ gulp
      [11:12:30] No gulpfile found

      이런 오류가뜨고

      $ ./node_modules/.bin/gulp
      [11:12:50] No gulpfile found

      여기서도 이런 오류가 뜹니다.


      뭐가 문제인걸까요...

    2. 이용준

      아무리 다시하고 다시해도 gulp 파일을 찾을 수 없다고 합니다ㅠㅠ

    3. 이용준

      C:\Users\SAMSUNG>gulp -v

      [12:10:40] CLI version 3.9.1
      [12:10:40] Local version 3.9.1

      분명히 설치 되어있는데요....


    CommentAdd your comment...