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

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

gulp.js를 사용하는 주요 장점 :

• 자동화 : 이미지 최적화, SASS 컴파일 및 CSS 미수와 같은 반복적 인 작업을 자동화합니다.
• 유연성 : 는 작업 구성에 JavaScript를 사용하여 환경 (개발/생산)을 기반으로 쉽게 수정할 수 있습니다.
• Extensibility : 수많은 플러그인을 활용합니다 (예 : gulp-imagemin , gulp-sass ).
• Live Reloading : 여러 브라우저 및 장치에서 실시간 업데이트를 위해 BrowserSync와 통합됩니다.
• 효율적인 작업 관리 : 최적화 된 빌드 시간에 대해 일련의 또는 병렬로 작업을 처리합니다.

왜 Gulp를 선택 하는가?

많은 작업 러너가 존재하지만 (Grunt, Webpack, Parcel, NPM 스크립트) 안정성, 속도, 광범위한 플러그인 지원 및 JavaScript 기반 구성으로 인해 Gulp가 눈에 띄게됩니다. 이 코드 기반 접근 방식은 장점을 제공하여 조건부 출력 수정을 가능하게합니다. 예를 들어 최종 배포 중에 SourceMaps를 제거합니다.

시작하기 :

이 튜토리얼은 Gulp 4를 사용합니다. git 및 node.js가 설치되어 있는지 확인하십시오. Github에서 예제 프로젝트를 복제하십시오 :

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

브라우저의

http : // localhost : 8000/ (또는 표시된 외부 URL)로 이동합니다.

또는 새 프로젝트를 만듭니다 :

node.js를 설치합니다.
전 세계적으로 Gulp 설치 :
2. npm i gulp -cli -g
프로젝트 폴더를 만듭니다 (예 :
3. my-gulp project ).
npm 초기화 :
4. npm init
소스 파일 (이미지, scss)에 대한
5. src subfolders create
컴파일 된 파일에 대한
6. 빌드 폴더를 만듭니다.
테스트 용
7. index.html 파일을 만듭니다.

모듈 설치 :

필요한 모듈 설치 :

npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev

gulpfile.js 구성 (예) :

gulpfile.js 파일은 작업을 정의합니다. 단순화 된 예제는 이미지 최적화 및 CSS 처리에 중점을 둡니다.

// gulpfile.js (Simplified Example)

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass')(require('sass')); //Note: using dart-sass
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// Image task
function images() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/images'));
}

// CSS task
function css() {
  return gulp.src('src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('build/css'));
}

exports.images = images;
exports.css = css;
exports.default = gulp.parallel(images, css); // Run tasks in parallel

이 예제는 기본 이미지 최적화 및 미니 화 및 자동 크기 픽스를 통한 SASS 컴파일을 보여줍니다. 보다 포괄적 인

gulpfile.js 에는 Sourcemaps, BrowserSync 및보다 정교한 PostCSS 플러그인과 같은 기능이 포함됩니다. 전체 예제는 원본 텍스트를 참조하십시오.

프로젝트 구조에 맞게 파일 경로를 조정해야합니다. 터미널에서

gulp 를 실행하여 작업을 실행하십시오. 완전하고 자세한 gulpfile.js 및 추가 설명은 원본 기사에서 확인할 수 있습니다.