Laravel gulp 를 이용 하여 전단 자원 을 어떻게 구축 하 는 지 상세 하 게 설명 합 니 다.

2540 단어 laravelgulp전단
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 을 실행 합 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

좋은 웹페이지 즐겨찾기