자산을 컴파일하는 방법 인 Elixir를 만나십시오

elixir : 포괄적 인 가이드 로 Laravel 워크 플로를 간소화하십시오 많은 웹 개발자들이 다양한 도구를 사용하여 워크 플로를 향상시키고 마른 코드베이스를 유지합니다. 그러나 CSS 및 JavaScript 전 처리기와 같은 컴파일이 필요한 도구는 때때로 프로세스 속도를 늦출 수 있습니다. 이곳은 Gulp 및 Elixir와 같은 작업 주자가 빛납니다. 이 튜토리얼은 Jeffrey Way가 구축 한 사용자 친화적 인 Node.js 도구 인 Elixir를 탐색합니다. 특히 Laravel Framework 내에서 Gulp 작업 관리를 단순화하도록 설계되었습니다.

이 안내서는 Laravel의 자산 편집에 중점을두고 더 넓은 적용 가능성에 중점을 둡니다. 주요 개념 :

elixir는 깨끗한 node.js 인터페이스 내에서 Gulp 작업을 감싸서 자산 컴파일을 간소화합니다. 설치는 node.js, gulp 및 패키지 (npm을 통해)가 필요합니다. Elixir는 기본 소스 및 출력 경로를 사용하지만 메소드 인수 또는 구성 객체를 통해 사용자 정의 할 수 있습니다. 내장 지원 지원 CSS 전처리 서 컴파일, JavaScript 처리 및 자산 버전이 포함됩니다. 사용자 정의 작업은 Elixir의 API를 사용하여 쉽게 만들어지며 Laravel의 블레이드 템플릿과 완벽하게 통합됩니다. 전제 조건 및 설치 : node.js :

gulp가 node.js 내에서 실행될 때 필수적입니다. 홈스테드 개선 된 사용자는 이미 이것을 가지고 있습니다.

gulp :

elixir는 gulp에 의존합니다. NPM을 사용하여 전 세계적으로 설치 : (홈스테드 개선을 통해 이미 설치되지 않는 한). Laravel Elixir : laravel 프로젝트에는 일반적으로 를 사용하여 설치하십시오. 비 래벨 환경의 경우 :

• 시작하기 전에 :
, , 등)을 기본적으로
• 로 출력하여 laravel-elixir에 상주한다고 가정합니다.
elixir 작업은 객체 (사용 가능한 모든 메소드 제공)와 함께 콜백을 사용하는 함수를 사용하여

내에서 정의됩니다. gulpfile.js 배열 또는 와일드 카드는 여러 파일을 elixir 또는 로 컴파일하고 연결합니다. 단일 파일 이름은 동일하게 명명 된 출력 파일을 초래합니다. 이 기본값은 사용자 정의 가능합니다. mix

실기 예 :

<code class="language-javascript">elixir(function(mix) {
  mix.less('styles.less');
});</code>

app.css 컴파일 덜 컴파일 : app.js

를 컴파일 ~ . SASS 컴파일을 사용합니다. Elixir는 공급 업체 접두사를 처리합니다

컴파일 커피 스크립트 :
• 는 커피 스크립트 파일을 에서
고급 기술 :

<code class="language-javascript">elixir(function(mix) {
    mix.less("styles.less");
});</code>

다중 파일 : resources/assets/less/styles.less, , public/css/styles.css 단일 파일, 와일드 카드, 어레이 또는 인수가 허용됩니다 (기본 디렉토리의 모든 파일에 대해). mix.sass()

사용자 정의 소스/출력 경로 :
• 인수 : 두 번째 인수는 출력 디렉토리를 지정합니다 :

<code class="language-javascript">elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});</code>

전체 경로 :

가있는 접두사가 프로젝트 루트에 대한 경로를 지정하려면 resources/assets/coffee/. public/js/app.js

구성 개체 : 선호하는 메소드는 elixir 's 및 를 수정하는 것입니다 (나중에 논의).
• 연결 :

  JavaScript의 경우 를 사용하고 CSS의 경우 를 사용하십시오. 이들은 컴파일 방법과 유사한 소스 및 출력 경로에 대한 인수를 허용합니다. 지정된 디렉토리 내의 모든 파일을 연결합니다. sass() less() Blade to Blade : coffee()가

  ()를 필요로합니다.
메소드는 jade to 블레이드 템플릿을 컴파일합니다

• 파일 버전화 : 는 해시를 파일 이름에 추가하여 캐싱 문제를 방지합니다. 블레이드 템플릿에서 헬퍼를 사용하여 버전 파일을 참조하십시오.

  • 구성 : elixir의 동작은 에서 파일을 생성하여 기본값을 재정의합니다. 사용자 정의 작업 : 메소드를 사용하여 Elixir의 기능을 확장하여 사용자 정의 Gulp 작업을 생성합니다.
  실제 시나리오 (laravel/angular) :

  이 섹션에서는 Laravel/Angular 프로젝트에서 Elixir의 기능을 보여주는 전체 예제를 자세히 설명합니다. Elixir 구성, Less 및 CoffeeScript를 컴파일하고 Blade로 Jade를 컴파일하며 자산을 포함합니다. 완전한 가 제공되는 방법, 메소드 체인을 보여줍니다 실행 작업 : run 모든 elixir 작업을 실행합니다. 변경 사항에 대한 파일을 모니터링하고 자동으로 작업을 실행합니다. 개별 작업을 실행할 수 있습니다 (예 : ). 를 사용하십시오.

  결론 : gulpfile.js Elixir는 GULP 작업 관리를 단순화하여 공통 자산 컴파일 작업을위한 사용자 친화적 인 인터페이스를 제공합니다. 유연성, 사용자 정의 가능성 및 Laravel과의 통합은 개발 워크 플로를 간소화하는 데 유용한 도구입니다. 이 안내서는 포괄적 인 개요를 제공하지만 Elixir의 문서에 대한 추가 탐색은 고급 기능을 위해 권장됩니다.

위 내용은 자산을 컴파일하는 방법 인 Elixir를 만나십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!