Компиляция CSS- и JS-файлов в Laravel

좋은 하루! 이 비디오에서 나는 Laravel 믹스를 사용하는 방법에 대해 얘기하자 Laravel에 스타일 시트와 자바 스크립트 파일을 컴파일합니다 난 그냥 Laravel 시스템을 설치했다

나는 프로젝트라는 laratest는 각각 사이트가 laratestdev에서 열리고있다 여기에 설치 konsolka 우리는 프로젝트의 모든 파일을보기 위해 편집기로 설정합니다 여기,이 파일들, 결국, 파일은 webpack

mixjs라고 하는 우리는 설정을 변경할 수 있습니다 시스템 Laravel 믹스, 이는 CSS- 및 자바 스크립트 파일을 컴파일합니다 여기, 우리는 JS 파일이 우리가 / 자산 /의 JS / appjs 자원 파일에서 컴파일 된 것을 참조 공공에 배치 / 폴더를 appjs

따라서, SASS-파일에서 컴파일 이제이 파일 또한 공용 폴더로 전송 의 소스 파일을 살펴 보자 디렉토리 JS와 말대꾸 배치 자원 / 자산 폴더에 있습니다 따라서, 우리는 JS 파일을 appjs

우리의 자바 스크립트 코드를 생성에서 그리고 말대꾸 폴더에서 우리는 사이트 스타일 시트에 추가 할 수 있습니다 파일을 생성 한 후 해당 파일의 아빠가 여기에 기록됩니다 이 파일을로드 할 수 모두 우리가 먼저하자 우리의 웹 사이트에, laratestdev, 즉 주 프로젝트 페이지입니다

이제 우리의 홈 페이지에서로드되는 템플릿 파일을 찾아 보자 이렇게하려면 webphp 루트 폴더에서 파일을 엽니 다 우리는 메인 페이지가 welcomeblade

php 템플릿에서로드되는 것을 알 수있다 여기 템플릿입니다 따라서, 우리는 여기에 스타일 시트와 자바 스크립트 파일을 추가합니다 우리는이 방법을하고 있습니다 <링크 HREF = "{{URL : 자산 ( 'CSS / appcss')}}"확인해 = "스타일"유형 = "텍스트 / CSS"/> 이제 자바 스크립트 파일을 추가합니다

<스크립트 SRC = "{{URL : 자산 ( '의 JS / appjs')}}"> </ script> 따라서, CSS-스타일은 파일 전송 SASS 파일에서,에서가 편집에 갈 곳 간단히 복사 할 수 있습니다 이 스타일 태그를 잘라 불필요한 제거합니다 파일을 저장합니다

자산 폴더로 이동합니다 우리의 새로운 스타일의 SASS 파일에 추가 할 수 있습니다 탭을 제거합니다 파일을 저장합니다 그러나, 우리는 지금 우리의 사이트를 다시로드하는 경우, 우리는 스타일이 사라진 것을 알 수있다

다만, 이것은 우리가 다시 컴파일하지 않은 때문이다 CSS- 및 자바 스크립트 파일, 그리고의 주제에 도착하자 열 명령 행 나는 그것이 터미널 버튼을 통해 Laragon을 열고 있음을 알려 프로젝트 폴더로 이동합니다 – 나는 그것이있다 그리고 명령을 실행 dev에 NPM 실행합니다

이것은 단지 파일 편집 팀, 그리고 지금 우리는 그것이 작동하지 않았습니다 이 Laravel의 새로운 설치하고, 사실 아직 내가 발견하지 않았습니다 NPM, 즉 명령을 준수하지 NPM 설치합니다 이 명령을 실행하십시오 그것은 우리의 프로젝트에 설치 폴더 노드 모듈 여기에 나는 조금 빗나가 할 내가 때 작업 말 이러한 명령을 : NPM과 NPM 실행 dev에 설치 농가의 도움으로 설립되었다 Laravel에서 영구적 인 오류, 즉, 발생 이러한 명령은 정말 끝에서 수행되지 않습니다

그리고 단지 Laragon 프로그램을 통해 Laravel 설정 – 내 채널에 별도의 비디오를 가지고 – 나는 잘 같은, 이러한 오류를 정정 할 수 있었다 명령 줄의 모든 명령은 "쾅"실행됩니다 그래서, 팀은 NPM 성공적으로 설치합니다 우리는 우리의 프로젝트를 보면, 우리는 우리가 폴더 노드 모듈을 추가 할 필요가 있음을 볼 수 있습니다 가장 중요한 것은 – 지금 우리는 이전 명령을 실행할 수 있습니다

다시 일어날 수 있습니다 NPM 실행 DEV 이 명령은 단지 CSS-와 자바 스크립트 파일을 컴파일하고 공공 디렉토리에 덮어 씁니다 완료 파일 기록했다 와서 우리의 페이지 업데이트 – F5를

우리는 우리를 참조 스타일이 추가됩니다 우리는의이 명령 한 가지 더 수행 할 수 – 실행 시계를하는 npn 그것은 즉, 이전 명령과 동일한 모든 작업을 수행 이 파일을 컴파일합니다 그러나 컴파일 완료 후 그것은 원시 자바 스크립트와 SASS-파일의 변경 사항을 모니터링 그것은 즉시 변경 사항을 감지하면 컴파일합니다 즉 컴파일은 즉시 발생합니다 나는 그것을 보여 드리죠

진행 우리의 SASS 파일 및 변화 페이지 배경 다음은 이에 대한 예를 들어, 컬러 나는 컴파일이 있었다, 당신이보고, 저장 명중합니다 이제 페이지를 새로 고침하고, 우리는 이미 색상을 변경했습니다 마찬가지로, 작업은 자바 스크립트 파일을 컴파일합니다

아빠로 이동 자산 /의 JS 잘 뭔가를 추가 Yahuuu! 컴파일 작동 – 이유가 기뻐 저장합니다 통과 컴파일하기 업데이트 페이지 우수! 사실, 그 Laravel에서 컴파일 CSS- 및 자바 스크립트 파일을 구성하는 매우 쉽습니다

이 명령 행에 종료 할 것을 추가 할 수 있습니다 당신은 Ctrl 키 + C를 누를 필요가 컴파일 파일을 모니터링 사실 모든 여러분의 관심에 감사드립니다!