使用Gulp.js改善您的ember.js工作流程

>與ember.js

一起使用Gulp.js的關鍵優點

>本文演示了Gulp.js如何通過自動化重複任務來顯著增強您的ember.js開發工作流程。 其中包括SCSS彙編，JavaScript和CSS縮小和串聯，文件監視，車把模板編譯以及JavaScript代碼優化。 我們將探討Essential Gulp.js插件的設置和配置以實現這一目標。

本指南對Gulp.js的熟悉程度。 如果您需要刷新，請參閱Sitepoint對Gulp.js.

的簡介

標準ember.js開發挑戰>

ember.js項目通常涉及管理SCS，CSS，JavaScript和車把文件。 讓我們檢查常見的任務：

• > scss to CSS轉換：將SCSS（SASSY CSS）變換為標準CSS。
降低：
• >通過在JavaScript和CSS中刪除不必要的空格和評論來減少文件大小。 > 串聯：
>將多個文件組合到一個文件中，以最大程度地減少HTTP請求，改善了加載時間，尤其是在移動設備上。
• >>文件監視：每當修改文件時自動觸發任務來自動化構建過程。
• >車把編譯：將車把模板轉換為javascript函數，以供ember.js Runtime使用。
• > JavaScript優化：最小化JavaScript代碼大小，並通過諸如Minification和Renaming變量之類的技術提高性能。
• Essential Gulp.js插件

我們將利用以下插件：>

：核心Gulp.js軟件包。

：對於SCSS編譯（需要Ruby和Compass Gem）。

：用於JavaScript Minification和Optimization。
• gulp：用於更改上的文件監視和触發任務。
>
• gulp-compass：用於串聯CSS和JavaScript文件。
>
• gulp-uglify：用於編譯車把模板。
>
• gulp-watch
插件安裝
• gulp-concat
• 創建一個gulp-ember-handlebars文件（如果不存在）。
>

全球安裝Gulp：

> >本地安裝插件：

>
1. package.json您的
現在應該在
2. >的下列出這些插件 npm install gulp -g
gulpfile.js configuration
3. npm install gulp gulp-compass gulp-uglify gulp-watch gulp-concat gulp-ember-handlebars --save-dev
創建一個

>文件，然後添加以下代碼以導入插件：>

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');

定義Gulp Tasks

>讓我們定義通用操作的任務。 請記住，該文件路徑相對於gulpfile.js。

• > css任務：編譯SCSS，連接和輸出到。 dist/css

gulp.task('css', function() {
  return gulp.src('scss/*.scss')
    .pipe(compass({ sass: 'scss' }))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('dist/css'));
});

>模板任務：

編譯車把模板，輸出到
• >。 >。 js/

gulp.task('templates', function() {
  gulp.src(['js/templates/**/*.hbs'])
    .pipe(handlebars({
      outputType: 'browser',
      namespace: 'Ember.TEMPLATES'
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('js/'));
});

>腳本任務：

uglifies，連接和輸出javascript到
• >。 。 dist/js

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'));
});

觀察任務：

監視文件和触發更改的相關任務。

>使用任務

gulp.task('watch', function() {
  gulp.watch('scss/*.scss', ['css']);
  gulp.watch('js/templates/**/*.hbs', ['templates']);
  gulp.watch('js/**/*.js', ['scripts']);
});

開發：

運行
• （或）開始手錶任務並自動重建文件更改。 您可能需要調整開發設置以避免不必要的處理。 > gulp gulp default uglify
生產：

在沒有手錶任務的情況下進行單個構建。

gulp.task('default', ['css', 'templates', 'scripts', 'watch']);

• 請記住，用您的實際項目的文件替換任務中的佔位符JavaScript文件列表。 請諮詢每個插件的文檔，以獲取高級自定義選項。 此設置為您的ember.js項目提供了強大而高效的工作流程。

以上是使用Gulp.js改善您的ember.js工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！