Grunt 시트¶

Grunt - JavaScript 작업 러너

Grunt는 minification, 컴파일, 단위 테스트 및 리딩과 같은 반복 작업을 자동화하는 JavaScript 작업 런너입니다. 이 플러그인의 광대 한 생태계와 구성 오버 코드 접근을 사용하여 거의 모든 작업을 처리합니다.

본문 바로가기¶

설치
시작
Gruntfile 구성
핵심 과제
파일 처리
CSS 작업
JavaScript 작업
이미지 처리
HTML 작업
개발 서버
위치 작업
빌딩 파이프
플러그인 에코시스템
주문 작업
다트랙 작업
Template 처리
테스트 통합
직업
기능 최적화
모범 사례

설치하기¶

글로벌 설치¶

카지노사이트

지역 설치¶

카지노사이트

프로젝트 설정¶

카지노사이트

패키지.json 제품 설명¶

카지노사이트

시작하기¶

기본 Gruntfile¶

카지노사이트

작업 실행¶

카지노사이트

프로젝트 구조¶

카지노사이트

Gruntfile 설정¶

구성 구조¶

카지노사이트

고급 구성¶

카지노사이트

템플릿 처리¶

카지노사이트

핵심 업무¶

파일 작업¶

ο 회원 관리

파일 필터링¶

카지노사이트

사이트맵 기타¶

Sass 편집¶

카지노사이트

사이트맵 제품정보¶

카지노사이트

사이트맵 관련 링크¶

카지노사이트

· 기타¶

링크 메뉴¶

카지노사이트

JavaScript 변환¶

카지노사이트

· 관련 링크¶

카지노사이트

Browserify 통합¶

카지노사이트

이미지 처리¶

이미지 최적화¶

오프화이트

Sprite 세대¶

카지노사이트

HTML 작업¶

HTML 처리¶

오프화이트

HTML 검증¶

카지노사이트

개발 서버¶

서버 연결¶

카지노사이트

라이브 Reload¶

카지노사이트

작업 보기¶

Basic Watch 구성¶

카지노사이트

고급 시계 패턴¶

카지노사이트

오류 처리¶

카지노사이트

파이프 라인¶

개발 구축¶

```javascript // Development build pipeline grunt.registerTask('dev', [ 'clean:dist', 'jshint', 'sass:dev', 'autoprefixer', 'concat', 'copy:dev', 'includes', 'connect:livereload', 'watch' ]);

// Development build without server grunt.registerTask('build-dev', [ 'clean:dist', 'jshint', 'sass:dev', 'autoprefixer', 'concat', 'copy:dev', 'includes' ]); ```의 경우

회사연혁¶

```javascript // Production build pipeline grunt.registerTask('build', [ 'clean:dist', 'jshint', 'sass:prod', 'autoprefixer', 'cssmin', 'concat', 'uglify', 'imagemin', 'copy:prod', 'includes', 'htmlmin', 'rev', 'usemin' ]);

// Build with testing grunt.registerTask('test-build', [ 'build', 'connect:test', 'qunit' ]);

// Complete production pipeline grunt.registerTask('production', [ 'build', 'test-build', 'compress', 'deploy' ]); ```에 대하여

멀티 환경 구축¶

```javascript // Environment-specific configurations grunt.initConfig({ env: { dev: { NODE_ENV: 'development' }, prod: { NODE_ENV: 'production' } },

// Conditional configuration uglify: { options: { compress: { drop_console: '<%= process.env.NODE_ENV === "production" %>' } }, build: { src: 'dist/js/bundle.js', dest: 'dist/js/bundle.min.js' } } });

// Environment-specific tasks grunt.registerTask('build-dev', ['env:dev', 'build-common']); grunt.registerTask('build-prod', ['env:prod', 'build-common']); grunt.registerTask('build-common', [ 'clean', 'sass', 'concat', 'uglify', 'copy' ]); ```의 경우

플러그인 생태계¶

필수 플러그인¶

```bash

File operations¶

npm install --save-dev grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat

CSS processing¶

npm install --save-dev grunt-sass grunt-contrib-cssmin grunt-autoprefixer

JavaScript processing¶

npm install --save-dev grunt-contrib-uglify grunt-contrib-jshint grunt-babel

HTML processing¶

npm install --save-dev grunt-contrib-htmlmin grunt-includes

Image processing¶

npm install --save-dev grunt-contrib-imagemin grunt-responsive-images

Development¶

npm install --save-dev grunt-contrib-watch grunt-contrib-connect grunt-browser-sync

Build tools¶

npm install --save-dev grunt-usemin grunt-rev grunt-filerev ```에 대하여

고급 플러그인¶

```javascript // File revisioning rev: { files: { src: ['dist/js//*.js', 'dist/css//*.css'] } }

// Asset injection usemin: { html: ['dist/**/*.html'], options: { assetsDirs: ['dist', 'dist/images'] } }

// Compression compress: { main: { options: { archive: 'dist.zip' }, files: [{ expand: true, cwd: 'dist/', src: ['**/*'], dest: '.' }] } }

// FTP deployment 'ftp-deploy': { build: { auth: { host: 'server.com', port: 21, authKey: 'key1' }, src: 'dist', dest: '/public_html', exclusions: ['dist//.DS_Store', 'dist//Thumbs.db'] } } ```의 경우

플러그인 로딩¶

카지노사이트

주문 작업¶

Basic 사용자 정의 작업¶

카지노사이트

고급 사용자 정의 작업¶

카지노사이트

작업 Dependencies¶

카지노사이트

Multi-target 작업¶

제품 설명¶

카지노사이트

사용자 정의 Multi-target 기타¶

카지노사이트

템플릿 처리¶

내장 템플릿¶

```javascript grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),

// Using package.json data concat: { options: { banner: '/! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { src: ['src/js/*/*.js'], dest: 'dist/js/<%= pkg.name %>.js' } },

// Date templates copy: { timestamped: { src: 'src/config.js', dest: 'dist/config-<%= grunt.template.today("yyyymmdd") %>.js' } } }); ```의 경우

주문 템플릿¶

```javascript // Custom template data grunt.initConfig({ config: { app: { name: 'MyApp', version: '1.0.0', author: 'John Doe' }, build: { timestamp: '<%= grunt.template.today("isoDateTime") %>', environment: process.env.NODE_ENV || 'development' } },

// Using custom data replace: { config: { src: ['src/js/config.js'], dest: 'dist/js/config.js', replacements: [{ from: '{{APP_NAME}}', to: '<%= config.app.name %>' }, { from: '{{VERSION}}', to: '<%= config.app.version %>' }, { from: '{{BUILD_TIME}}', to: '<%= config.build.timestamp %>' }] } } });

// Template processing task grunt.registerTask('process-templates', function() { var config = grunt.config('config');

grunt.file.expand('src/templates/**/*.html').forEach(function(file) { var content = grunt.file.read(file); var processed = grunt.template.process(content, { data: config });

var dest = file.replace('src/templates/', 'dist/');
grunt.file.write(dest, processed);

}); }); ```의 경우

테스트 통합¶

단위 시험¶

카지노사이트

부호 적용¶

```javascript // Istanbul coverage instrument: { files: 'src/js/**/*.js', options: { lazy: true, basePath: 'instrumented/' } }

storeCoverage: { options: { dir: 'coverage/' } }

makeReport: { src: 'coverage/**/*.json', options: { type: 'lcov', dir: 'coverage/', print: 'detail' } }

// Coverage task grunt.registerTask('coverage', [ 'clean:coverage', 'instrument', 'qunit', 'storeCoverage', 'makeReport' ]); ```의 경우

End-to-End 테스트¶

```javascript // Protractor protractor: { options: { configFile: 'protractor.conf.js', keepAlive: true, noColor: false }, e2e: { options: { args: { suite: 'e2e' } } } }

// WebDriver webdriver: { chrome: { tests: ['test/e2e/**/*.js'], options: { timeout: 10000, reporter: 'spec', browser: 'chrome' } } }

// Nightwatch nightwatch: { options: { standalone: true, jar_version: '2.53.0', jar_url: 'http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.0.jar' } } ```를 호출합니다.

계정 만들기¶

구축 및 배포¶

```javascript // Build for deployment grunt.registerTask('deploy-build', [ 'clean', 'jshint', 'test', 'sass:prod', 'autoprefixer', 'cssmin', 'concat', 'uglify', 'imagemin', 'htmlmin', 'rev', 'usemin' ]);

// FTP deployment 'ftp-deploy': { production: { auth: { host: 'ftp.example.com', port: 21, authKey: 'production' }, src: 'dist/', dest: '/public_html/', exclusions: [ 'dist//.DS_Store', 'dist//Thumbs.db', 'dist/tmp' ] } }

// SFTP deployment sftp: { production: { files: { './': 'dist/**' }, options: { path: '/var/www/html/', host: 'example.com', username: 'deploy', privateKey: grunt.file.read('deploy_key'), showProgress: true } } } ```의 경우

Git 배포¶

```javascript // Git deployment 'gh-pages': { options: { base: 'dist' }, src: ['**'] }

// Git push gitpush: { production: { options: { remote: 'production', branch: 'master' } } }

// Complete deployment pipeline grunt.registerTask('deploy', [ 'deploy-build', 'ftp-deploy:production' ]);

grunt.registerTask('deploy-github', [ 'deploy-build', 'gh-pages' ]); ```로

Docker 배포¶

카지노사이트

성능 최적화¶

병렬 가공¶

오프화이트

Incremental 빌드¶

카지노사이트

뚱 베어¶

__CODE_BLOCK_49_로그

최고의 연습¶

사업영역¶

카지노사이트

구성 관리¶

```javascript // External configuration var config = require('./grunt.config.js');

grunt.initConfig(config);

// Environment-specific configs var env = process.env.NODE_ENV || 'development'; var config = require('./config/' + env + '.js');

// Modular configuration grunt.initConfig({ // Load task configs sass: require('./grunt/sass.js'), uglify: require('./grunt/uglify.js'), watch: require('./grunt/watch.js') }); ```를 호출합니다.

오류 처리¶

```javascript // Graceful error handling grunt.option('force', true); // Continue on errors

// Custom error handling grunt.registerTask('safe-build', function() { try { grunt.task.run(['jshint', 'sass', 'uglify']); } catch (e) { grunt.log.error('Build failed: ' + e.message); grunt.fail.warn('Build task failed, but continuing...'); } });

// Conditional error handling grunt.registerTask('conditional-fail', function() { if (grunt.option('strict')) { grunt.fail.fatal('Strict mode enabled, failing on any error'); } }); ```의 경우

성과 모범 사례¶

** 동시 작업 사용 ** 독립적 인 작업
**Implement incremental build ** 와 grunt-newer
**Cache 비싼 운영 ** 가능
** Optimize watch 패턴** 불필요한 재건을 방지하기 위해
** spawn: false**를 사용하여 빠른 재건축 작업을 볼 수 있습니다.

유지 보수 모범 사례¶

**Keep 플러그인 업데이트 ** 정기적으로
** semantic versioning 사용 ** 빌드에 대한
**작업 수행 ** 및 구성
** 적절한 오류 처리 * *필수
** 민감한 데이터에 대한 환경 변수 **
** 모듈형 구성 파일* *필수
Monitor 빌드 성능 with time-grunt

제품정보¶

Grunt는 구성을 통해 반복적인 개발 작업을 자동화하는 강력한 JavaScript 작업 런너입니다. 주요 특징은 다음을 포함합니다:

Configuration-driven: 쉬운 설정을위한 JSON 기반 구성
Extensive Plugin Ecosystem: 모든 작업을 위한 플러그인의 수천
다트랙 작업: 같은 작업을 위한 다른 구성을 실행
Template System: 템플릿과 동적 구성
** 파일 처리**: 강력한 파일 globbing 및 처리 기능
Watch and Live Reload: 파일 변경에 대한 자동 작업 실행
** 사용자 정의 작업**: 사용자 정의 작업 및 워크플로우의 쉬운 생성
Mature Ecosystem: 광범위한 문서로 잘 설립

Grunt의 구성 중심 접근 및 광대 한 플러그인 생태계를 활용하여 간단한 파일 concatenation에서 복잡한 배포 파이프라인에 모든 것을 처리하는 강력한 유지 가능한 빌드 프로세스를 만들 수 있습니다.

<문서> 기능 copyToClipboard () 이름 * const 명령어 = document.querySelectorAll('code'); let allCommands = ''; 명령. forEach(cmd =>의 경우 모든Commands +=cmd.textContent + navigator.clipboard.write텍스(allCommands); alert('모든 명령은 클립보드에 복사!'); 이름 *

함수 생성PDF() { 창. 인쇄 (); 이름 *