laravel에서 mix의 사용법은 무엇입니까

laravel에서 "laravel mix"는 프런트 엔드 작업 자동화 관리 도구입니다. Mix는 Laravel 애플리케이션에 대한 Webpack 컴파일 작업을 정의할 수 있는 간단하고 부드러운 API를 제공하며 호출을 통해 관리할 수 있습니다. 프런트 엔드 리소스.

이 기사의 운영 환경: Windows 10 시스템, Laravel 버전 6, Dell G3 컴퓨터.

laravel에서 mix의 사용법은 무엇인가요

laravel mix 설치

Laravel Mix는 워크플로우 모델을 사용하여 지정된 작업을 순차적으로 실행하는 프런트엔드 작업 자동화 관리 도구입니다. Mix는 Laravel 애플리케이션에 대한 Webpack 컴파일 작업을 정의할 수 있는 간단하고 원활한 API를 제공합니다. Mix는 많은 일반적인 CSS 및 JavaScript 전처리기를 지원하며 간단한 호출로 프런트 엔드 리소스를 쉽게 관리할 수 있습니다.

Mix를 사용하는 방법은 매우 간단합니다. 먼저 다음 명령을 사용하여 npm 종속 항목을 설치해야 합니다. Yarn을 사용하여 종속 항목을 설치하기 전에 국내 네트워크 문제로 인해 Yarn에 대한 설치 가속도 구성해야 합니다.

yarn config set registry https://registry.npm.taobao.org

Yarn을 사용하여 종속 항목 설치:

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

yarn 앞에 SASS_BINARY_SITE=http://npm을 추가합니다. 명령 .taobao.org/mirrors/node-sass의 목적은 Yarn에게 Taobao 미러에서 node-sass 바이너리 파일을 다운로드하도록 지시하는 것입니다.

laravel mix

를 사용하여 webpack.mix.js 파일을 수정하세요.

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

브라우저 캐싱을 방지하기 위해 Mix에서 생성된 각 정적 파일 뒤에 버전 번호와 유사한 매개변수가 추가되도록 끝에 version()을 추가하세요.

resources/sass/app.scss 파일을 수정하세요

// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
/* universal */
body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}
/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
……

npm run watch-poll을 실행하면 css, js 파일이 생성됩니다.

view는

<link href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">

version control

Mix를 호출하고 저장소에 추가할 필요가 없는 public/mix-manifest.json 파일도 생성합니다.

/public/js 및 /public/css는 동적으로 생성되므로 무시됩니다.

수정 ** .gitignore ** 파일:

/public/mix-manifest.json
/public/js
/public/css

관련 권장 사항: 최근 5개의 Laravel 비디오 튜토리얼

위 내용은 laravel에서 mix의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!