Verbesserung Ihres Ember.js -Workflows mit gulp.js

Schlüsselvorteile der Verwendung von gulp.js mit ember.js

Dieser Artikel zeigt, wie Gulp.js Ihren EMBER.JS -Entwicklungsworkflow durch Automatisierung von Wiederholungsaufgaben erheblich verbessern kann. Dazu gehören die SCSS -Kompilierung, JavaScript- und CSS -Minifikation und -Katten, Dateiüberwachung, Kompilierung von Lenkerläufern und JavaScript -Codeoptimierung. Wir werden das Setup und die Konfiguration von Essential Gulp.js -Plugins untersuchen, um dies zu erreichen.

Diese Anleitung setzt Vertrautheit mit gulp.js. Wenn Sie eine Auffrischung benötigen, lesen Sie die Einführung von SitePoint in gulp.js.

Standard ember.js Entwicklungsprobleme

ember.js Projekte umfassen häufig die Verwaltung von SCSS-, CSS-, JavaScript- und Lenkerdateien. Lassen Sie uns die üblichen Aufgaben untersuchen:

• scss in CSS -Konvertierung: SCSS (SASSY CSS) Preprozessor -Code in Standard -CSS.
verwandeln.
• Minifikation: Verringerung der Dateigrößen durch Entfernen unnötiger Weißespace und Kommentare in JavaScript und CSS.
• Verkettung: kombiniert mehrere Dateien in einer einzelnen Datei, um HTTP -Anforderungen zu minimieren, die Ladezeiten zu verbessern, insbesondere auf mobilen Geräten.
• Dateiüberwachung: automatisieren den Erstellungsprozess durch automatische Auslösen von Aufgaben, wenn Dateien geändert werden.
• Lenkerkompilierung: Umwandlung von Lenkervorlagen in JavaScript -Funktionen zur Verwendung durch die Runtime von Ember.js.
• JavaScript -Optimierung: Minimierung der JavaScript -Codegröße und Verbesserung der Leistung durch Techniken wie Minifikation und Umbenennung von Variablen.

Essential Gulp.js Plugins

Wir werden die folgenden Plugins verwenden:

• gulp: Das Core Gulp.js -Paket.
• gulp-compass: Für die SCSS -Zusammenstellung (erfordert Ruby und das Kompass -Edelstein).
• gulp-uglify: Für JavaScript -Minifikation und -Optimierung.
• gulp-watch: Für die Dateiüberwachung und Auslösen von Aufgaben zu Änderungen.
• gulp-concat: Zur Verkettung von CSS und JavaScript -Dateien.
• gulp-ember-handlebars: Zum Kompilieren von Lenkervorlagen.

Plugin -Installation

1. Erstellen Sie eine package.json Datei (wenn man nicht existiert).
2. Gulp global installieren: npm install gulp -g
3. Plugins lokal installieren: npm install gulp gulp-compass gulp-uglify gulp-watch gulp-concat gulp-ember-handlebars --save-dev

Ihr package.json sollte diese Plugins jetzt unter devDependencies auflisten.

gulpFile.js Konfiguration

Erstellen Sie eine gulpfile.js Datei und fügen Sie den folgenden Code hinzu, um die Plugins zu importieren:

<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>

Definieren von Gulp -Aufgaben

Definieren wir Aufgaben für gemeinsame Operationen. Denken Sie daran, dass Dateipfade relativ zu gulpfile.js.

sind

• CSS -Aufgabe: kompiliert SCSS, verkettet und gibt zu dist/css.
aus.

<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>

• Templates Aufgabe: Lenkerlehrvorlagen und Ausgänge zu js/.
kompiliert

<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>

• Skripts Aufgabe: hässlich, verkettet und gibt JavaScript zu dist/js.
aus

<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>

• Watch -Aufgabe: Monitors Dateien und löst relevante Aufgaben zu Änderungen aus.

<code class="language-javascript">gulp.task('watch', function() {
  gulp.watch('scss/*.scss', ['css']);
  gulp.watch('js/templates/**/*.hbs', ['templates']);
  gulp.watch('js/**/*.js', ['scripts']);
});</code>

unter Verwendung der Aufgaben

• Entwicklung: Ausführen gulp (oder gulp default), um die Uhrenaufgabe zu starten und automatisch in Dateiänderungen umzubauen. Möglicherweise möchten Sie die uglify -Inalation für die Entwicklung einstellen, um eine unnötige Verarbeitung zu vermeiden.

<code class="language-javascript">gulp.task('default', ['css', 'templates', 'scripts', 'watch']);</code>

• Produktion: für einen einzelnen Build ohne Uhrenaufgabe ausführen. gulp production

<code class="language-javascript">gulp.task('production', ['css', 'templates', 'scripts']);</code>

Denken Sie daran, die Liste der JavaScript -Dateien der Platzhalter in der Aufgabe

durch die Dateien Ihres tatsächlichen Projekts zu ersetzen. Wenden Sie sich an die Dokumentation für jedes Plugin für erweiterte Anpassungsoptionen. Dieses Setup bietet einen robusten und effizienten Workflow für Ihre Ember.js -Projekte. scripts

Das obige ist der detaillierte Inhalt vonVerbesserung Ihres Ember.js -Workflows mit gulp.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!