gulp.js를 사용하여 Ember.js 워크 플로 향상

ember.js 이 기사는 Gulp.js가 반복적 인 작업을 자동화하여 Ember.js 개발 워크 플로를 크게 향상시키는 방법을 보여줍니다. 여기에는 SCSS 컴파일, JavaScript 및 CSS Minification 및 Concatenation, 파일 모니터링, 핸들 바 템플릿 컴파일 및 JavaScript 코드 최적화가 포함됩니다. 이를 달성하기 위해 Essential Gulp.js 플러그인의 설정 및 구성을 살펴 보겠습니다. 이 안내서는 Gulp.js에 대한 친숙 함을 가정합니다. 새로 고침이 필요한 경우 gulp.js. 에 대한 sitepoint의 소개를 참조하십시오. 표준 ember.js 개발 과제 EMBER.JS 프로젝트에는 종종 SCSS, CSS, JavaScript 및 핸들 바 파일을 관리하는 것이 포함됩니다. 일반적인 과제를 살펴 보겠습니다 : CSS 변환으로의 SCSS :

SCSS (Sassy CSS) 전처리 코드로 표준 CSS로 변환합니다. 미니 화 : 불필요한 공백과 javaScript 및 CSS의 댓글을 제거하여 파일 크기를 줄입니다. 연결 : 여러 파일을 단일 파일로 결합하여 HTTP 요청을 최소화하고, 특히 모바일 장치에서로드 시간을 개선합니다. 파일 모니터링 : 파일 모니터링 : 파일이 수정 될 때마다 작업을 자동으로 트리거하여 빌드 프로세스 자동화.

핸들 바 컴파일 :

handbars 템플릿을 ember.js 런타임에서 사용하기 위해 JavaScript 함수로 변환합니다. JavaScript 최적화 : 미니 화 및 변수 변경과 같은 기술을 통해 JavaScript 코드 크기를 최소화하고 성능 향상.

Essential Gulp.js 플러그인

우리는 다음 플러그인을 사용합니다 : : 핵심 gulp.js 패키지.

: SCSS 컴파일 (루비와 나침반 보석이 필요). : JavaScript Minification 및 최적화의 경우

: 파일 모니터링 및 변경 사항에 대한 작업을 트리거하는 경우

: CSS 및 JavaScript 파일을 연결하는 경우

: 핸들 바 템플릿을 컴파일합니다
• 플러그인 설치
파일을 만듭니다 (존재하지 않는 경우) 전 세계적으로 Gulp를 설치하십시오 :
• 플러그인을 로컬로 설치하십시오 :
귀하의 는 이제이 플러그인을 gulpfile.js 구성
• 파일을 생성하고 플러그인을 가져 오려면 다음 코드를 추가하십시오.

  <code class="language-javascript">var gulp = require('gulp'),
    compass = require('gulp-compass'),
    watch = require('gulp-watch'),
    handlebars = require('gulp-ember-handlebars'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');</code>

  gulp 태스크 정의 공통 작업에 대한 작업을 정의하겠습니다. 파일 경로는

  .

  와 관련이 있습니다 gulpfile.js CSS 작업 :

  는 SCSS, 연결 및 출력을
  • 템플릿 작업 : dist/css는 핸들 바 템플릿과 출력을

  <code class="language-javascript">gulp.task('css', function() {
    return gulp.src('scss/*.scss')
      .pipe(compass({ sass: 'scss' }))
      .pipe(concat('main.min.css'))
      .pipe(gulp.dest('dist/css'));
  });</code>

  스크립트 작업 : uglifies, concatenate 및 outputs javaScript로
  • Watch Task : js/ 변경 사항에 대한 파일을 모니터링하고 관련 작업을 트리거합니다.
  작업을 활용

  <code class="language-javascript">gulp.task('templates', function() {
    gulp.src(['js/templates/**/*.hbs'])
      .pipe(handlebars({
        outputType: 'browser',
        namespace: 'Ember.TEMPLATES'
      }))
      .pipe(concat('templates.js'))
      .pipe(gulp.dest('js/'));
  });</code>

  • 개발 : run )는 시계 작업을 시작하고 파일 변경을 자동으로 재 구축합니다. 불필요한 처리를 피하기 위해 개발을위한 설정을 조정할 수 있습니다. dist/js
  제작 :

  <code class="language-javascript">gulp.task('scripts', function() {
    // ... (Your JavaScript file list here) ...
    return gulp.src(scriptSrc)
      .pipe(uglify({ mangle: false }))
      .pipe(concat('main.min.js'))
      .pipe(gulp.dest('dist/js'));
  });</code>

  run
  watch 작업이없는 단일 빌드.
  • 작업의 자리 표시 자 JavaScript 파일 목록을 실제 프로젝트 파일로 바꾸는 것을 잊지 마십시오. 고급 사용자 정의 옵션은 각 플러그인의 문서를 참조하십시오. 이 설정은 Ember.js 프로젝트를위한 강력하고 효율적인 워크 플로를 제공합니다.

위 내용은 gulp.js를 사용하여 Ember.js 워크 플로 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!