일반적으로 사용되는 프런트 엔드 자동화 도구
목적 :
1, 프런트 엔드 엔지니어링은 사업의 특성을 기반으로, 개발 효율성을위한 개발 프로세스, 기술 선택, 코드 사양, 빌드 출판을 포함하고 프론트 엔드 엔지니어의 코드 품질을 향상 프론트 엔드 개발 프로세스 표준화,
이 표준화, 자동화 된 도구 개발 효율성, 성능, 품질, 멀티 협업 및 개발 경험을 통해 프론트 엔드 프로세스를 개선하는 것입니다 (2)는, 프런트 엔드 엔지니어링은 단순의 목적을 달성하기 위해
일반적인 자동화 된 빌드 도구
그런트, 꿀꺽, 웹팩, 금융 기관
자동화 된 빌드 도구 작업
빌드 도구, 그것은 자바 스크립트로 소스 코드를 실행할 수 있습니다 변환하는 것입니다 HTML 코드를 CSS를 할 수
실제로 엔지니어링의 건설, 일련의 과정은, 코드를 달성하기에 구현 된 프런트 엔드 개발 아이디어의 자동화 코드가 복잡한 자동화 프로세스의이 시리즈를 수행 할 수 있습니다. 프런트 엔드 개발, 생산성의 해방에 큰의 역 동성을 주입 건설.
트랜스 코딩 : 타이프 스크립트 등 자바 스크립트, CSS, 컴파일하는 SCS들로 컴파일됩니다.
파일 최적화 : 자바 스크립트, CSS, HTML 코드를 압축 병합 사진을 압축.
코드 분할 : 추출 공통 코드를 여러 페이지가 허용 비동기로 작성된 일부 코드를 실행하는 데 필요하지 않은 첫 번째 화면의 압축을 풉니 다.
병합 모듈 : 모듈 프로젝트, 하나 개의 파일에 기능 모듈을 분류 병합을 구축하는 데 필요한 여러 모듈과 파일이있을 것입니다.
자동 새로 고침 : 모니터 로컬 소스 코드가 변경되면 자동으로 다시 빌드, 브라우저를 새로 고칩니다.
코드 체크섬이 : 코드 준수 여부를 점검 할 필요가 전에 창고에 제출, 시험을 통과 단위 코드입니다.
자동 릴리스 : 라인에 자동으로 빌드 릴리스 코드에 코드를 업데이트 및 분배 시스템으로 전송.
분류
작업에 따라 1,
그런트, 꿀꺽
그들은 자동으로 다음 다른 플러그인을 통해 처리 된 자원을 넣어, 조립 라인처럼, 할당 된 작업을 수행합니다, 그들은 활발한 커뮤니티, 다양한 플러그인을 포함, 당신은 쉽게 워크 플로우의 다양한 만들 수 있습니다.
모듈을 기초로 2
Browserify, 웹팩, rollup.js
개발자가 경험이 모듈을 매우 잘 알고 있어야 있었다 Node.js를 구성 요소에 대한 직접 참조를 필요로 확인을 요구, 도구의 유형이 모드, 당신은 주문형로드, 비동기로드 모듈을 달성 할 수
3, 통합 도구 :
보좌관, FIS, JDF, 아테나 等
달성하기 위해 기술 스택 비계 다양한 도구를 사용하여 장점은 사용이, 단점들이 기술 선택을 제한한다는 것입니다, 학습 비용이 상대적으로 높은 점이다.
이점
A, 모듈 처리 프로젝트에 집중
B, 플러그인 확장에 의해 쉽게 완성은 아직 유연하고 사용하기
C, 사용 시나리오는 웹 개발에 한정되지 않고,
D, 사회 운동가, 시간을 유지 새로운 기능의 개발
전자, 좋은 개발 경험
