Gulp.js를 사용하여 CSS 작업을 자동화하는 방법

이 기사는 Gulp.js가 반복적 인 CSS 개발 작업을 간소화하여 워크 플로 효율성을 높이는 방법을 살펴 봅니다. 텍스트 편집기는 웹 개발에 충분하지만 최신 웹 사이트에 중요한 반복적 인 작업과 최적의 성능은 종종 실망스러운 것으로 판명됩니다. 여기에는 다음과 같은 것이 포함됩니다 : 전환, 파일 연결, 생산 코드 미수 및 다양한 서버의 배포가 포함됩니다. 모든 변화에 반복되는 이러한 작업은 점점 더 부담이 될 수 있습니다.

다행히도 Gulp.js는 이러한 프로세스를 자동화합니다. 이 기사는 이미지 최적화, SASS 컴파일, 자산 처리 및 인라인, 자동 공급 업체 접두사, 사용하지 않는 CSS 선택기 제거, CSS 미니 화, 파일 크기보고, 브라우저 DevTools의 소스 맵 생성 및 라이브 브라우저로로드하는 다양한 CSS 작업을 자동화하는 데 응용 프로그램을 보여줍니다. 소스 파일이 변경되면 Gulp.js를 사용하는 주요 장점 :

자동화 :

는 이미지 최적화, SASS 컴파일 및 CSS 미수와 같은 반복적 인 작업을 자동화합니다. 유연성 :

는 작업 구성에 JavaScript를 사용하여 환경 (개발/생산)을 기반으로 쉽게 수정할 수 있습니다. 확장 성 : 는 향상된 기능을 위해 수많은 플러그인 (예 : , )을 활용합니다. 라이브 재 장전 : 여러 브라우저 및 장치에서 실시간 업데이트를 위해 BrowserSync와 통합. 효율적인 작업 관리 : 최적화 된 빌드 시간에 대해 연속적 또는 병렬로 작업을 처리합니다.

• 왜 gulp를 선택합니까? 많은 작업 러너 (Grunt, Webpack, Parcel, NPM 스크립트)가 존재하지만 안정성, 속도, 광범위한 플러그인 지원 및 JavaScript 기반 구성으로 인해 Gulp가 눈에 띄게됩니다. 이 코드 기반 접근 방식은 장점을 제공하여 조건부 출력 수정을 가능하게합니다. 예를 들어 최종 배포 중에 SourceMaps를 제거합니다.
시작하기 :
• 이 자습서는 gulp 4를 사용합니다. git 및 node.js가 설치되어 있는지 확인하십시오. Github : 에서 예제 프로젝트를 복제하십시오 브라우저에서 (또는 표시된 외부 URL)로 이동하십시오. 또는 새로운 프로젝트를 만들어냅니다 :
<..> Node.js. 를 설치하십시오 전 세계적으로 Gulp를 설치하십시오 : 프로젝트 폴더를 만듭니다 (예 : )

npm 초기화 :

gulp-imagemin 소스 파일 (이미지, SCSS)에 대한 gulp-sass 서브 폴더를 작성하십시오 컴파일 된 파일에 대한
• 폴더를 만듭니다 테스트를 위해 파일을 만듭니다 모듈 설치 :
필요한 모듈을 설치하십시오 :

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

gulpfile.js 구성 (예) :

파일은 작업을 정의합니다. 단순화 된 예제는 이미지 최적화 및 CSS 처리에 중점을 둡니다. 이 예제는 기본 이미지 최적화 및 미니 화 및 자동 판결을 통한 SASS 컴파일을 보여줍니다. 보다 포괄적 인 에는 Sourcemaps, BrowserSync 및보다 정교한 PostCSS 플러그인과 같은 기능이 포함됩니다. 완전한 예제는 원본 텍스트를 참조하십시오 프로젝트 구조에 맞게 파일 경로를 조정해야합니다. 터미널에서 실행하여 작업을 실행하십시오. 완전하고 세부적인 및 추가 설명은 원본 기사에서 볼 수 있습니다.

위 내용은 Gulp.js를 사용하여 CSS 작업을 자동화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!