Gulp 열 시트¶
Gulp - 스트리밍 빌드 시스템
Gulp는 개발 워크플로우에서 고통스러운 시간 소모 작업을 자동화하기위한 도구 키트입니다. 따라서 주변을 혼란시키고 무언가를 구축 할 수 있습니다. Node.js 스트림을 사용하여 임시 파일을 디스크로 작성하는 데 필요한 것을 피함으로써 빌드를 빠르게 만듭니다.
본문 바로가기¶
- 설치
- 시작
- 핵심 개념
- 기본 작업
- 파일 작동
- CSS 처리
- JavaScript 처리
- 이미지 최적화
- HTML 처리
- 개발 서버
- 위치 작업
- 빌딩 파이프
- 플러그인 에코시스템
- 고급 패턴
- 기능 최적화
- 등록
- 테스트
- 직업
- 모범 사례
설치하기¶
글로벌 설치¶
카지노사이트
지역 설치¶
카지노사이트
프로젝트 설정¶
카지노사이트
Package.json 스크립트¶
카지노사이트
시작하기¶
기본 Gulpfile¶
카지노사이트
작업 실행¶
카지노사이트
프로젝트 구조¶
카지노사이트
핵심 개념¶
스트림 및 파이프¶
카지노사이트
Glob 패턴¶
카지노사이트
작업 기능¶
카지노사이트
시리즈 및 병렬¶
ο 회원 관리
기본 작업¶
파일 복사¶
카지노사이트
파일 청소¶
카지노사이트
파일 Renaming¶
카지노사이트
파일 작업¶
파일 Concatenation¶
카지노사이트
파일 필터링¶
카지노사이트
파일 변환¶
카지노사이트
사이트맵 제품정보¶
Sass 편집¶
카지노사이트
포스트CSS 제품정보¶
카지노사이트
사이트맵 사업영역¶
오프화이트
JavaScript 처리¶
기본 JavaScript 제품정보¶
카지노사이트
TypeScript 처리¶
오프화이트
JavaScript 번들링¶
카지노사이트
· 관련 링크¶
카지노사이트
이미지 최적화¶
Basic Image 처리¶
카지노사이트
고급 이미지 처리¶
카지노사이트
HTML 처리¶
HTML 축소¶
카지노사이트
HTML 검증 및 처리¶
카지노사이트
개발 서버¶
Basic Server 설정¶
```javascript const browserSync = require('browser-sync').create(); const connect = require('gulp-connect');
// Browser Sync server function serve() { browserSync.init({ server: { baseDir: 'dist' }, port: 3000, open: true }); }
// Connect server function connectServer() { connect.server({ root: 'dist', livereload: true, port: 8080 }); }
// Reload browser function reload(done) { browserSync.reload(); done(); } ```의 경우
고급 서버 구성¶
```javascript // Advanced Browser Sync setup function advancedServe() { browserSync.init({ server: { baseDir: 'dist', middleware: [ // Custom middleware function(req, res, next) { console.log('Request:', req.url); next(); } ] }, port: 3000, ui: { port: 3001 }, files: [ 'dist//*.html', 'dist//.css', 'dist/**/.js' ], reloadDelay: 1000, notify: false, ghostMode: { clicks: true, forms: true, scroll: true } }); }
// Proxy server function proxyServe() { browserSync.init({ proxy: 'localhost:8080', port: 3000, files: ['dist/**/*'], reloadDelay: 1000 }); } ```에 대하여
라이브 Reload¶
```javascript // Live reload with gulp-connect function liveReload() { return gulp.src('dist/**/*.html') .pipe(connect.reload()); }
// Watch with live reload function watchWithReload() { gulp.watch('src/scss//*.scss', gulp.series(styles, reload)); gulp.watch('src/js//.js', gulp.series(scripts, reload)); gulp.watch('src/**/.html', gulp.series(copyHTML, reload)); }
// Complete development server function dev() { serve(); watchWithReload(); }
exports.serve = serve; exports.dev = dev; ```의 경우
작업 보기¶
기본 시계 설정¶
```javascript // Basic watch function watch() { gulp.watch('src/scss//*.scss', styles); gulp.watch('src/js//.js', scripts); gulp.watch('src/**/.html', copyHTML); gulp.watch('src/images/**/*', images); }
// Watch with options function watchAdvanced() { gulp.watch('src/scss/**/*.scss', { events: 'all', delay: 500 }, styles);
gulp.watch('src/js/**/*.js', { ignoreInitial: false }, scripts); } ```에 대하여
고급 시계 패턴¶
```javascript const chokidar = require('chokidar');
// Custom watcher function customWatch() { // Watch SCSS files const scssWatcher = chokidar.watch('src/scss/**/*.scss'); scssWatcher.on('change', () => { console.log('SCSS file changed'); styles(); });
// Watch JS files const jsWatcher = chokidar.watch('src/js/**/*.js'); jsWatcher.on('add', () => { console.log('JS file added'); scripts(); }); jsWatcher.on('unlink', () => { console.log('JS file removed'); scripts(); }); }
// Conditional watching function conditionalWatch() { if (process.env.NODE_ENV === 'development') { gulp.watch('src/scss//*.scss', gulp.series(styles, reload)); gulp.watch('src/js//.js', gulp.series(lintJS, scripts, reload)); } else { gulp.watch('src/scss/**/.scss', styles); gulp.watch('src/js/**/*.js', scripts); } } ```의 경우
오류 처리¶
카지노사이트
파이프 라인¶
개발 구축¶
카지노사이트
회사연혁¶
카지노사이트
멀티 환경 구축¶
카지노사이트
플러그인 생태계¶
필수 플러그인¶
카지노사이트
파일 처리 Plugins¶
카지노사이트
테스트 플러그인¶
```javascript const mocha = require('gulp-mocha'); const karma = require('karma').Server; const jest = require('gulp-jest');
// Mocha tests function runMochaTests() { return gulp.src('test/**/*.js', { read: false }) .pipe(mocha({ reporter: 'spec' })); }
// Karma tests function runKarmaTests(done) { new karma({ configFile: __dirname + '/karma.conf.js', singleRun: true }, done).start(); }
// Jest tests
function runJestTests() {
return gulp.src('.')
.pipe(jest({
preprocessorIgnorePatterns: [
'
배포 플러그인¶
```javascript const ftp = require('vinyl-ftp'); const s3 = require('gulp-s3-upload')(); const ghPages = require('gulp-gh-pages');
// FTP deployment function deployFTP() { const conn = ftp.create({ host: 'ftp.example.com', user: process.env.FTP_USER, password: process.env.FTP_PASSWORD, parallel: 10 });
return gulp.src('dist/**/*', { base: 'dist', buffer: false }) .pipe(conn.newer('/public_html')) .pipe(conn.dest('/public_html')); }
// S3 deployment function deployS3() { return gulp.src('dist/**/*') .pipe(s3({ Bucket: 'my-bucket', ACL: 'public-read' })); }
// GitHub Pages deployment function deployGitHub() { return gulp.src('dist/**/*') .pipe(ghPages()); } ```의 경우
고급 패턴¶
사용자 정의 플러그인¶
카지노사이트
Stream 처리¶
```javascript const map = require('map-stream'); const transform = require('stream-transform');
// Map stream processing function processWithMap() { return gulp.src('src/**/*.js') .pipe(map((file, callback) => { // Process each file const content = file.contents.toString(); const processed = content.toUpperCase(); file.contents = Buffer.from(processed); callback(null, file); })) .pipe(gulp.dest('dist/')); }
// Transform stream function processWithTransform() { return gulp.src('src/**/*.json') .pipe(transform((file, encoding, callback) => { try { const data = JSON.parse(file.contents.toString()); data.processed = true; data.timestamp = new Date().toISOString(); file.contents = Buffer.from(JSON.stringify(data, null, 2)); callback(null, file); } catch (err) { callback(err); } })) .pipe(gulp.dest('dist/')); } ```의 경우
상태 처리¶
```javascript const yargs = require('yargs'); const gulpif = require('gulp-if');
// Command line arguments const argv = yargs.argv;
function conditionalBuild() { return gulp.src('src/**/*.js') .pipe(gulpif(argv.lint, eslint())) .pipe(gulpif(argv.babel, babel())) .pipe(gulpif(argv.minify, uglify())) .pipe(gulp.dest('dist/')); }
// Environment-based conditions function environmentalBuild() { const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = !isProduction;
return gulp.src('src/**/*.js') .pipe(gulpif(isDevelopment, sourcemaps.init())) .pipe(babel()) .pipe(gulpif(isProduction, uglify())) .pipe(gulpif(isDevelopment, sourcemaps.write('.'))) .pipe(gulp.dest('dist/')); }
// File-based conditions function fileBasedProcessing() { return gulp.src('src/**/') .pipe(gulpif('.js', uglify())) .pipe(gulpif('.css', cleanCSS())) .pipe(gulpif('.html', htmlmin())) .pipe(gulp.dest('dist/')); } ```를 호출합니다.
성능 최적화¶
병렬 가공¶
```javascript // Parallel task execution const parallelBuild = gulp.parallel( styles, scripts, images, copyAssets );
// Mixed series and parallel const optimizedBuild = gulp.series( clean, gulp.parallel( gulp.series(lintCSS, styles), gulp.series(lintJS, scripts), images ), injectAssets );
exports.build = optimizedBuild; ```의 경우
Incremental 빌드¶
```javascript const changed = require('gulp-changed'); const newer = require('gulp-newer');
// Process only changed files function incrementalStyles() { return gulp.src('src/scss/**/*.scss') .pipe(changed('dist/css/', { extension: '.css' })) .pipe(sass()) .pipe(gulp.dest('dist/css/')); }
// Process only newer files function incrementalImages() { return gulp.src('src/images/**/*') .pipe(newer('dist/images/')) .pipe(imagemin()) .pipe(gulp.dest('dist/images/')); }
// Cache-based processing const cache = require('gulp-cache');
function cachedImages() { return gulp.src('src/images/**/*') .pipe(cache(imagemin())) .pipe(gulp.dest('dist/images/')); } ```로
메모리 최적화¶
카지노사이트
오류 처리¶
기본 오류 처리¶
오프화이트
고급 오류 처리¶
카지노사이트
제품정보¶
단위 시험¶
__CODE_BLOCK_49_로그
통합 테스트¶
카지노사이트
계정 만들기¶
Pipeline 구축 및 배포¶
```javascript const zip = require('gulp-zip'); const ftp = require('vinyl-ftp');
// Create deployment package function createPackage() { return gulp.src('dist/**/*') .pipe(zip('deploy.zip')) .pipe(gulp.dest('packages/')); }
// Deploy via FTP function deployToServer() { const conn = ftp.create({ host: process.env.FTP_HOST, user: process.env.FTP_USER, password: process.env.FTP_PASSWORD, parallel: 10, log: console.log });
return gulp.src('dist/**/*', { base: 'dist', buffer: false }) .pipe(conn.newer('/public_html')) .pipe(conn.dest('/public_html')); }
// Complete deployment pipeline const deploy = gulp.series( productionBuild, runTests, createPackage, deployToServer );
exports.deploy = deploy; ```를 호출합니다.
CI/CD 통합¶
```javascript // Environment-aware deployment function deployToEnvironment() { const env = process.env.NODE_ENV || 'development'; const configs = { development: { host: 'dev.example.com', path: '/dev' }, staging: { host: 'staging.example.com', path: '/staging' }, production: { host: 'example.com', path: '/public_html' } };
const config = configs[env];
return gulp.src('dist/**/*') .pipe(deployTo(config)); }
// Docker deployment function buildDockerImage() { return gulp.src(['dist/**/*', 'Dockerfile']) .pipe(docker.build({ tag: 'my-app:latest' })); }
// Kubernetes deployment function deployToK8s() { return gulp.src('k8s/*.yaml') .pipe(kubectl.apply()); } ```의 경우
최고의 연습¶
사업영역¶
카지노사이트
구성 관리¶
카지노사이트
성과 모범 사례¶
- **
gulp-changed또는gulp-newer와 incremental 빌드 ** 사용 - ** 임플란트 처리 ** 독립적 인 작업
- Cache 값 비싼 작업 와
gulp-cache - ** 큰 파일을 버퍼링 대신 스트리밍 **
- ** Optimize watch 패턴** 불필요한 재건을 방지하기 위해
Code 품질 최고의 연습¶
- ** CSS, JavaScript 및 HTML에 대한 개선 **
- **소스 맵 사용 ** 개발 디버깅
- ** 오류 처리 추가 **
gulp-plumber - **당신의 빌드 파이프에서 테스트 ** 포함
- **작업 수행 ** 및 구성
유지 보수 모범 사례¶
- **Keep 플러그인 업데이트 ** 정기적으로
- ** semantic versioning 사용 ** 빌드에 대한
- ** 디버깅에 적합한 로깅 **
- ** 모듈형 작업 파일 ** 더 나은 조직
- ** 환경 변수 사용 ** 민감한 구성
제품정보¶
Gulp는 웹 개발에서 반복적인 작업을 자동화하는 강력한 스트리밍 빌드 시스템입니다. 주요 특징은 다음을 포함합니다:
- Stream-based Processing: 임시 파일 없이 효율적인 파일 처리
- ** 구성 이상의 코드 **: 최대 유연성을 위한 JavaScript 기반 구성
- **Rich Plugin Ecosystem **: 모든 conceivable 작업을 위한 플러그인의 수천
- **Parallel 처리 **: 더 빠른 빌드를 위해 동시에 작업을 실행
- Watch and Live Reload: 자동 재건축 및 브라우저 새로 고침
- Incremental Builds: 속도만 변경된 파일
- Error Handling: 실패를 방지하기 위해 튼튼한 오류 처리
- ** 예외 **: 사용자 정의 플러그인 및 작업을 쉽게
Gulp의 스트리밍 아키텍처와 광범위한 플러그인 생태계를 활용하여 프로젝트의 복잡성을 확장하는 효율적인 유지 가능한 빌드 프로세스를 만들 수 있습니다.
<문서> 기능 copyToClipboard () 이름 * const 명령어 = document.querySelectorAll('code'); let allCommands = ''; 명령. forEach(cmd =>의 경우 모든Commands +=cmd.textContent + navigator.clipboard.write텍스(allCommands); alert('모든 명령은 클립보드에 복사!'); 이름 *
함수 생성PDF() { 창. 인쇄 (); 이름 *