gulp.jsを使用して、ember.jsワークフローを改善します

ember.jsでgulp.jsを使用することの重要な利点

この記事では、gulp.jsが繰り返しタスクを自動化することにより、ember.js開発ワークフローを大幅に向上させる方法を示しています。 これらには、SCSSコンパイル、JavaScriptおよびCSSの縮小と連結、ファイル監視、ハンドルバーテンプレートコンパイル、およびJavaScriptコードの最適化が含まれます。 これを実現するために、必須gulp.jsプラグインのセットアップと構成を調べます。

このガイドはgulp.jsに精通していると想定しています。 リフレッシャーが必要な場合は、gulp.jsへのSitePointの紹介を参照してください。

標準のember.js開発の課題

ember.jsプロジェクトには、多くの場合、SCS、CSS、JavaScript、およびハンドルバーファイルの管理が含まれます。 一般的なタスクを調べてみましょう：

scss to css変換：
• SCSS（生意気なCSS）プレプロセッサコードの変換プリプロセッサコード。 縮小：
不要な空白とjavascriptとcssのコメントを削除することにより、ファイルサイズを削減します。
• 連結：
複数のファイルを単一のファイルに組み合わせて、HTTP要求を最小限に抑え、ロード時間の改善、特にモバイルデバイスで。
• ファイル監視：ファイルが変更されるたびにタスクを自動的にトリガーすることにより、ビルドプロセスを自動化する。
ハンドルバーコンピレーション：
• ハンドルバーをJavaScript関数に変換して、ember.jsランタイムで使用します。 javascriptの最適化：
JavaScriptコードサイズを最小化し、変数の変更や名前変更などの手法を通じてパフォーマンスを改善します。
• 必須gulp.jsプラグイン
• 次のプラグインを使用します

：コアgulp.jsパッケージ。

：SCSSコンピレーションの場合（RubyとCompass Gemが必要です）。

：javaScriptの縮小と最適化の場合

• ：ファイル監視および変更に関するタスクのトリガーの場合gulp
• ：CSSおよびJavaScriptファイルを連結してください。gulp-compass
• ：ハンドルバーテンプレートをコンパイルするため。gulp-uglify
• gulp-watchプラグインのインストール
• gulp-concat
• ファイルを作成します（存在しない場合）。gulp-ember-handlebars
Gulpをグローバルにインストールする：

プラグインをローカルにインストールする：

1. あなたのpackage.jsonは、これらのプラグインを
。
2. にリストする必要があります npm install gulp -g
gulpfile.js構成
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タスクの定義

一般的な操作のタスクを定義しましょう。 ファイルパスはgulpfile.js

• CSSタスク： 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/'));
});

スクリプトタスク：
• uglififie、concatenate、およびoutputs 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']);
});

開発：run

（または
）ウォッチタスクを開始し、ファイルの変更を自動的に再構築します。 不必要な処理を避けるために、開発のために
• 設定を調整することをお勧めします。 gulp gulp defaultuglify制作：
run
ウォッチタスクなしの単一のビルドの場合。

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

• タスクのプレースホルダーJavaScriptファイルリストを実際のプロジェクトのファイルに置き換えることを忘れないでください。 高度なカスタマイズオプションについては、各プラグインのドキュメントを参照してください。 このセットアップは、ember.jsプロジェクトに堅牢で効率的なワークフローを提供します。

以上がgulp.jsを使用して、ember.jsワークフローを改善しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。