Meningkatkan aliran kerja ember.js anda menggunakan gulp.js

Kelebihan utama menggunakan gulp.js dengan emer.js

Artikel ini menunjukkan bagaimana Gulp.js dapat meningkatkan aliran kerja pembangunan Ember.js anda dengan mengautomasikan tugas berulang. Ini termasuk kompilasi SCSS, JavaScript dan CSS minification dan concatenation, pemantauan fail, kompilasi templat hendal, dan pengoptimuman kod JavaScript. Kami akan meneroka persediaan dan konfigurasi plugin Gulp.js penting untuk mencapai ini.

Panduan ini menganggap kebiasaan dengan Gulp.Js. Sekiranya anda memerlukan penyegaran, rujuk pengenalan SitePoint kepada Gulp.Js.

Standard Ember.js Cabaran Pembangunan

projek Ember.js sering melibatkan menguruskan fail SCSS, CSS, JavaScript, dan hendal. Mari kita periksa tugas biasa:

• SCSS ke penukaran CSS: Mengubah kod preprocessor SCSS (Sassy CSS) ke CSS standard.
• Minification: Mengurangkan saiz fail dengan mengeluarkan ruang kosong dan komen yang tidak perlu dalam JavaScript dan CSS.
• Concatenation: Menggabungkan pelbagai fail ke dalam satu fail untuk meminimumkan permintaan HTTP, meningkatkan masa beban, terutamanya pada peranti mudah alih.
• Pemantauan fail: Mengautomasikan proses binaan dengan secara automatik mencetuskan tugas setiap kali fail diubah.
• Penyusunan hendal: Menukar template handlebars ke dalam fungsi JavaScript untuk digunakan oleh runtime Ember.js.
• Pengoptimuman JavaScript: Meminimumkan saiz kod JavaScript dan meningkatkan prestasi melalui teknik seperti pembolehubah minifikasi dan penamaan semula.

Plugin Gulp.js Essential

kami akan menggunakan plugin berikut:

• : pakej teras gulp.js. gulp
• : untuk kompilasi SCSS (memerlukan Ruby dan Permata Kompas). gulp-compass
• : untuk minifikasi dan pengoptimuman JavaScript. gulp-uglify
• : untuk pemantauan fail dan mencetuskan tugas pada perubahan. gulp-watch
• : untuk menggabungkan fail CSS dan JavaScript. gulp-concat
• : untuk menyusun templat hendal. gulp-ember-handlebars

Pemasangan plugin

Buat fail
1. (jika tidak ada). package.json
Pasang Gulp secara global:
2. npm install gulp -g
Pasang plugin secara tempatan:
3. npm install gulp gulp-compass gulp-uglify gulp-watch gulp-concat gulp-ember-handlebars --save-dev

anda sekarang harus menyenaraikan plugin ini di bawah package.json. devDependencies

konfigurasi gulpfile.js

Buat fail

dan tambahkan kod berikut untuk mengimport plugin:

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

Menentukan tugas -tugas gulp

mari kita tentukan tugas untuk operasi biasa. Ingat bahawa laluan fail adalah relatif kepada gulpfile.js.

• tugas CSS: Menyusun scss, concatenates, dan output ke 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>

Tugas template
• : menyusun templat dan output hendal ke 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>

• Tugas skrip: ugglifies, concatenates, dan output JavaScript to 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>

• Tugas menonton: memantau fail dan mencetuskan tugas yang relevan pada perubahan.

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

Menggunakan tugas

• Pembangunan: Run (atau gulp) untuk memulakan tugas menonton dan membina semula secara automatik pada perubahan fail. Anda mungkin mahu menyesuaikan tetapan gulp default untuk pembangunan untuk mengelakkan pemprosesan yang tidak perlu. uglify

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

• Pengeluaran: Run untuk membina tunggal tanpa tugas menonton. gulp production

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

ingat untuk menggantikan senarai fail JavaScript Pemegang Sedang dalam tugas

dengan fail projek sebenar anda. Rujuk dokumentasi untuk setiap plugin untuk pilihan penyesuaian lanjutan. Persediaan ini menyediakan aliran kerja yang mantap dan cekap untuk projek Ember.js anda. scripts

Atas ialah kandungan terperinci Meningkatkan aliran kerja ember.js anda menggunakan gulp.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!