Amélioration de votre flux de travail Ember.js à l'aide de Gulp.js

Avantages clés de l'utilisation de gulp.js avec Ember.js

Cet article montre comment Gulp.js peut améliorer considérablement votre flux de travail de développement Ember.js en automatisant les tâches répétitives. Il s'agit notamment de la compilation SCSS, de la minification et de la concaténation JavaScript et CSS, de la surveillance des fichiers, de la compilation du modèle de guidon et de l'optimisation du code JavaScript. Nous explorerons la configuration et la configuration des plugins essentiels Gulp.js pour y parvenir.

Ce guide assume la familiarité avec gulp.js. Si vous avez besoin d'un rafraîchissement, reportez-vous à l'introduction de SitePoint à gulp.js.

Défis de développement Ember.js standard

Les projets Ember.js impliquent souvent la gestion des fichiers SCSS, CSS, JavaScript et Honebars. Examinons les tâches courantes:

• SCSS à CSS Conversion: Transformer le code préprocesseur SCSS (Sassy CSS) en CSS standard.
• Minification: Réduire les tailles de fichiers en supprimant les espaces blancs et commentaires inutiles en JavaScript et CSS.
• Concaténation: combinant plusieurs fichiers dans un seul fichier pour minimiser les demandes HTTP, améliorant les temps de chargement, en particulier sur les appareils mobiles.
• Surveillance des fichiers: Automatisation du processus de construction en déclenchant automatiquement des tâches chaque fois que les fichiers sont modifiés.
• Compilation du guidon: Convertir des modèles de guidon en fonctions JavaScript à utiliser par le runtime Ember.js.
• Optimisation JavaScript: Minimiser la taille du code JavaScript et améliorer les performances grâce à des techniques telles que la minification et le renommer des variables.

Plugins essentiels gulp.js

Nous utiliserons les plugins suivants:

• gulp: Le package Core Gulp.js.
• gulp-compass: Pour la compilation SCSS (nécessite Ruby et le GEM de la boussole).
• gulp-uglify: Pour la minification et l'optimisation JavaScript.
• gulp-watch: Pour les tâches de surveillance et de déclenchement des fichiers sur les modifications.
• gulp-concat: Pour concaténer les fichiers CSS et JavaScript.
• gulp-ember-handlebars: Pour compiller les modèles de guidon.

Installation du plugin

1. Créer un fichier package.json (si on n'existe pas).
2. Installez Gulp Globalement: npm install gulp -g
3. Installez les plugins localement: npm install gulp gulp-compass gulp-uglify gulp-watch gulp-concat gulp-ember-handlebars --save-dev

votre package.json devrait désormais répertorier ces plugins sous devDependencies.

gulpfile.js Configuration

Créez un fichier gulpfile.js et ajoutez le code suivant pour importer les plugins:

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

Définition des tâches Gulp

Définissons les tâches des opérations communes. N'oubliez pas que les chemins de fichier sont relatifs à gulpfile.js.

• CSS Tâche: compile SCSS, concaténe et sorties vers 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>

• Modèles Tâche: Compile les modèles et les sorties du guidon vers 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>

• SCRIPTS Tâche: uglifie, concaténe et sort javascript à 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>

• Tâche de montre: surveille les fichiers et déclenche des tâches pertinentes sur les modifications.

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

en utilisant les tâches

• Développement: Exécutez gulp (ou gulp default) pour démarrer la tâche de montre et reconstruire automatiquement sur les modifications de fichiers. Vous voudrez peut-être ajuster les paramètres uglify pour le développement afin d'éviter le traitement inutile.

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

• Production: Exécutez gulp production pour une seule version sans la tâche de montre.

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

N'oubliez pas de remplacer la liste des fichiers JavaScript de l'espace réservé dans la tâche scripts par les fichiers de votre projet réel. Consultez la documentation pour chaque plugin pour les options de personnalisation avancées. Cette configuration fournit un flux de travail robuste et efficace pour vos projets Ember.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!