Laravel gulp 를 이용 하여 전단 자원 을 어떻게 구축 하 는 지 상세 하 게 설명 합 니 다.
gulp 는 차세 대 전단 프로젝트 구축 도구 입 니 다.gulp 와 그 플러그 인 을 사용 하여 프로젝트 코드(less,sas)를 컴 파일 할 수 있 습 니 다.또한 js 와 css 코드 를 압축 할 수 있 습 니 다.심지어 그림 을 압축 할 수 있 습 니 다.gulp 는 소량의 API 만 있 기 때문에 쉽게 배 울 수 있 습 니 다.gulp 는 stream 방식 으로 내용 을 처리 합 니 다.Node 는 Bower,Yeoman,Grunt 등 자동화 도 구 를 탄생 시 켰 다.
gulp 와 grunt 의 공통점
사용 하기 쉽 습 니 다:설정 정책 보다 코드 를 사용 합 니 다.Gulp 는 간단 한 일 을 계속 간단 하고 복잡 한 임 무 를 관리 할 수 있 습 니 다.
효율 성:Node.js 의 강력 한 흐름 을 이용 하여 디스크 에 중간 파일 을 쓸 필요 가 없 으 며 구축 을 더욱 빨리 완성 할 수 있 습 니 다.
고 품질:Gulp 의 엄격 한 플러그 인 지도 방침 으로 플러그 인 이 간단 하고 원 하 는 방식 으로 작 동 하도록 확보 합 니 다.
배우 기 쉽다:API 를 최소 화하 면 짧 은 시간 안에 Gulp 를 배 울 수 있다.구축 작업 은 네가 생각 한 것 처럼 일련의 흐름 관 이다.
머리말
최근 에 자신의 홈 페이지 전단 코드 를 더욱 규범화 시 켰 습 니 다.npm 를 사용 하여 전단 의 자원 라 이브 러 리 를 도입 하고 Laravel 5.5 에서 gulp 를 사용 하여 구 덩이 를 만 났 습 니 다.
mix.sass 는 node 를 직접 사용 할 수 없습니다.modules 폴 더 에 있 는 것 은 resource/assets/asss/app.scss 파일 로 css 를 만 든 다음 다른 css 와 하나의 파일 로 합 칠 수 있 습 니 다.
mix.scripts node 사용 가능modules 폴 더 에 있 는 js 는 자신의 js 와 파일 로 합 쳐 집 니 다.
mix.copy 는 node 를 복사 할 수 있 습 니 다.modules 의 파일 은 글꼴 과 같은 지정 한 디 렉 터 리 로 갑 니 다.
mix.version 은 합 친 파일 에 버 전 번 호 를 추가 할 수 있 습 니 다.
내 마지막 설정 을 다음 과 같이 붙 여 라.
elixir(function (mix) {
mix.sass([
'app.scss'
], 'public/css')
.styles([
'./public/css/app.css',
'style.css',
'pill.css',
], 'public/css/site.css')
.styles([
'./public/css/app.css',
'cover.css',
], 'public/css/cover.css')
.scripts([
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
'scrollerup.js'
],'public/js/app.js')
.copy([
'./node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
'./node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2'
], 'public/build/fonts/bootstrap')
.version([
'public/css/cover.css',
'public/css/site.css'
]);
});
이상 코드 는 제 gulpfile.js 파일 에서 나 왔 습 니 다.gulp 명령 을 실행 하고 온라인 에서 gulp Cproduction 을 실행 합 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Laravel - 변환된 유효성 검사 규칙으로 API 요청 제공동적 콘텐츠를 위해 API를 통해 Laravel CMS에 연결하는 모바일 앱(또는 웹사이트) 구축을 고려하십시오. 이제 앱은 CMS에서 번역된 콘텐츠를 받을 것으로 예상되는 다국어 앱이 될 수 있습니다. 일반적으로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.