gulp 4점대 버전 특징

Gulp란 무엇입니까?

1. Automation(자동화) - gulp는 개발 work flow에서 고통스럽거나 시간이 많이 걸리는 작업을 자동화하는데 도움이 되는 툴킷입니다.
2. Platform-agnostic(플랫폼에 구애받지 않는다) - Integrations(통합)은 모든 주요 IDE에 내장되어 있으며 사람들은 PHP, .NET, Node.js, Java 및 기타 플랫폼에서 Gulp를 사용하고 있습니다.
3. Strong Ecosystem(강력한 생태계) - npm 모듈을 사용하여 스트리밍 파일 변환을 위해 2000개 이상의 선별된 플러그인 + 원하는 작업 수행할 수 있습니다.
4. Simple(단순성) - gulp는 최소한의 API 표면만 제공하므로 배우기 쉽고 사용하기 쉽습니다.

4점대 버전에선 무엇이 달라졌습니까?

• 작업 시스템은 기초부터 다시 작성되어 series() 및 parallel() 메서드를 사용하여 작업 구성이 가능합니다.
• 감시자(watcher)는 작업 시스템에 기능 패리티가있는 chokidar (더 이상 gulp-watch 필요 없음)를 사용하여 업데이트되었습니다.
• lastRun()을 사용하여 증분 빌드에 대한 일류 지원이 추가되었습니다.
• 파일을 복사하는 대신 symlink() 메소드가 symlink를 작성하기 위해 노출되었습니다.
• 소스 맵(sourcemap)에 대한 내장 지원이 추가되었습니다. gulp-sourcemaps 플러그인은 더 이상 필요하지 않습니다!
• Node 또는 ES 내보내기(exports)를 사용하여 내 보낸 기능의 작업(task) 등록(registry)이 권장됩니다.
• 사용자 정의 레지스트리(Custom registries)가 설계되어 공유 작업 또는 함수적으로 보완되었습니다.
• 스트림 구현이 개선되어 조건부 및 단계별 빌드가 향상되었습니다.

gulpfile에서 최신 JavaScript 버전을 사용하십시오.

• 대부분의 새 버전의 노드는 import / export 구문을 제외하고 Babel에서 제공하는 대부분의 기능을 지원합니다.
• 해당 구문 만 필요한 경우 gulpfile.esm.js로 이름을 바꾸고 [esm] [esm-module] 모듈을 설치 한 다음 아래 Babel 부분을 건너 뛰십시오.
• Node는 이미 많은 ES2015 + 기능을 지원하지만 호환성 문제를 피하기 위해 Babel을 설치하고 gulpfile.js의 이름을 gulpfile.babel.js로 바꾸는 것이 좋습니다.

                    
                        npm install --save-dev @babel/register @babel/core @babel/preset-env
                        npm i -D @babel/register @babel/core @babel/preset-env
                    
                

그런 다음 사전 설정 구성으로 .babelrc 파일을 만듭니다.

                    
                        touch .babelrc
                    
                

그런 다음 사전 환경설정 내용을 .babelrc 파일에 입력합니다.

                    
                        {
                            "presets": [ "@babel/preset-env" ]
                        }
                    
                

이렇게 하면 ES2015+ 문법을 사용할 수 있습니다.

증분 빌드(Incremental Builds)

gulp.src 함수의 since 옵션과 gulp.lastRun을 사용하여 작업 실행간에 변경되지 않은 파일을 필터링 할 수 있습니다.

                    
                        const paths = {
                          ...
                          images: {
                            src: 'src/images/**/*.{jpg,jpeg,png}',
                            dest: 'build/img/'
                          }
                        }
                         
                        function images() {
                          return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
                            .pipe(imagemin({optimizationLevel: 5}))
                            .pipe(gulp.dest(paths.images.dest));
                        }
                         
                        function watch() {
                          gulp.watch(paths.images.src, images);
                        }
                    
                

Task run time은 메모리에 저장되며 걸프가 종료되면 삭제됩니다.
감시(watch) 작업 중 이미지 작업을 두 번째로 실행할 때의 만 절약됩니다.