Я большой сторонник структуры Ember.js. Я видел много учебников по Ember в Интернете, но большинство из них не объясняют, как настроить систему сборки для использования с ней. В свете этого я решил взять на себя обязанность объяснить эту часть червоточины. С момента своего появления Gulp.js стал горячей темой в обсуждении исполнителей задач JavaScript. Не случайно Gulp.js появляется в обсуждении, когда упоминается проект JavaScript. Итак, эта статья покажет, как Gulp может использоваться с проектами Ember.
Я буду делать некоторые предположения в этой статье. Я предполагаю, что у вас уже есть общее представление о том, как работает Gulp.js, и что вы ранее настраивали проект Gulp.js самостоятельно. Если нет, пожалуйста, посетите SitePoint Введение в Gulp.js для повышения квалификации . В оставшейся части этой статьи вы узнаете, как создавать и настраивать общие задачи Gulp.js для вашего проекта Ember.
Типичный рабочий процесс Ember.js
Я работал над несколькими проектами Ember.js и заметил, что среди них есть общие требования. Эти требования включают необходимость манипулировать кодом SCSS, CSS, JavaScript и Handlebars. Ниже приведены требования и краткое объяснение каждого из них.
Компиляция SCSS
Это включает в себя преобразование кода SCSS в CSS.
JavaScript и CSS минификация
Минификация — это процесс уменьшения размера файла путем удаления ненужных пробелов. В CSS это обычно делается после преобразования кода SCSS в CSS.
JavaScript и CSS Конкатенация
Конкатенация — это процесс объединения множества файлов в один файл. Обычно это делается для уменьшения количества HTTP-запросов к серверу. Чем больше файлов, тем больше запросов HTTP, что приводит к увеличению времени загрузки. При объединении вам нужен всего один HTTP-запрос. Это особенно полезно при передаче файлов по медленному сетевому соединению, например на мобильном устройстве.
Просмотр файлов / папок
Такие задачи, как минификация, конкатенация и компиляция, могут выполняться вручную. Однако это повторяющиеся задачи, которые быстро становятся утомительными и скучными. Используя задачу наблюдателя Gulp.js, вы можете настроить средство просмотра файлов, чтобы просматривать нужные файлы на предмет изменений. Когда он обнаруживает изменение, он запускает одну или несколько задач в ответ на это изменение.
Сборник рулей
Handlebars — это язык шаблонов Ember.js по умолчанию. Однако браузеры не могут анализировать код Handlebars. Поэтому нам нужен способ конвертировать код Handlebars в HTML. Вот тут-то и начинается сборник рулей. Во-первых, код Handlebars преобразуется в функцию JavaScript. Затем функция запускается, когда требуется среда выполнения Ember для добавления правильного HTML в DOM.
JavaScript Uglifying
Uglifying JavaScript является двухступенчатым процессом. Первым шагом является удаление пробелов путем минификации. Второй шаг сводит имена функций и переменные JavaScript в отдельные символы, где это возможно. Причина заключается в том, что более короткие имена переменных требуют меньше байтов, что приводит к более быстрой загрузке.
Разбивка плагинов Gulp.js
В этом разделе будут описаны плагины, которые нам понадобятся, и описаны их функциональные возможности
gulp
Это базовый плагин, который устанавливает сам Gulp.js.
gulp-compass
Этот плагин компилирует код SCSS в CSS. Чтобы использовать его, вы должны установить Ruby и гем компаса .
gulp-uglify
Этот плагин изменяет код JavaScript. Вы можете установить опцию не изменять имена функций в случае возникновения проблем.
gulp-watch
Этот плагин позволяет вашему проекту просматривать один или несколько файлов на предмет изменений.
gulp-concat
Этот плагин позволяет объединить несколько файлов CSS или JavaScript в один. Файлы должны быть одного типа, конечно.
gulp-ember-handlebars
Этот плагин позволяет конвертировать Handlebars в JavaScript.
Установка плагинов
Сначала создайте файл package.json содержащий пустой объект JavaScript, {} . Далее мы установим ранее перечисленные плагины. Используя свой терминал, перейдите в корневой каталог вашего проекта. Установите и добавьте вышеупомянутые плагины как зависимости, используя следующие команды в своем терминале.
npm install gulp -g
Это устанавливает глоток во всем мире. Затем сохраните плагин в свой локальный проект с помощью этой команды:
npm install gulp --save-dev
Часть команды --save-dev добавляет плагины как зависимости к вашему package.json . Удаление его только установит плагин, но не добавит его в ваш файл.
Повторите вторую команду для других плагинов. В каждом случае замените gulp на имя плагина, который вы хотите установить. Например, gulp-compass , gulp-concat и т. Д. После этого взгляните на ваш package.json , и вы должны увидеть что-то вроде этого:
{ "devDependencies": { "gulp": "^3.8.0", "gulp-compass": "^1.1.9", "gulp-concat": "^2.2.0", "gulp-ember-handlebars": "^0.6.0", "gulp-uglify": "^0.3.0", "gulp-watch": "^0.6.5" } }
Требование плагинов
Создайте gulpfile.js в том же каталоге, что и ваш package.json . Внутри него добавьте следующий код, который импортирует плагины. Просмотр имен переменных должен быть хорошим индикатором того, какой плагин они представляют.
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');
Настройка задач для плагинов
В этом разделе мы настроим задачи, используя плагины в различных комбинациях. Где применимо, я сообщу, использует ли задача более одного плагина. Обратите внимание, что все пути к файлам для различных задач относятся к файлу gulpfile.js .
Задача CSS
Эта задача выполняет три вещи. Он использует три плагина, compass , concat и gulp . Он компилирует файлы SCSS в CSS, объединяет их и выводит результат в файл по вашему выбору.
gulp.task('css', function() { return gulp.src('scss/*.scss') .pipe(compass({ sass: 'scss' })) .pipe(concat('main.min.css')) .pipe(gulp.dest('dist/css')); });
Задача шаблонов
Эта задача использует плагины concat , concat и gulp для выполнения двух задач. Он принимает список файлов Handlebars в качестве входных данных, компилирует их в 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/')); });
Сценарии Задача
Эта задача делает две вещи и использует три плагина, concat , uglify и uglify . Он принимает список файлов JavaScript в качестве входных данных. Затем он удаляет содержимое, объединяет их все в один файл и сохраняет в нужном месте.
gulp.task('scripts', function() { var scriptSrc = [ 'js/vendor/jquery-1.10.2.js', 'js/vendor/jquery-ui.custom.min.js', 'js/vendor/moment.min.js', 'js/vendor/handlebars.runtime-v1.3.0.js', 'js/vendor/ember-1.3.2.js', 'js/vendor/ember-data.js', 'js/vendor/local-storage-adapter.js', 'js/helpers.js', 'js/main.js', 'js/templates.js', 'js/components.js', 'js/models/*.js', 'js/controllers/*.js', 'js/router.js', 'js/views/*.js', 'js/fixtures.js', 'js/routes/*.js' ]; return gulp.src(scriptSrc) .pipe(uglify({ mangle: false })) .pipe(concat('main.min.js')) .pipe(gulp.dest('dist/js')); });
Задача File Watcher
Это создает задачу наблюдения, в которой есть несколько подзадач. Подзадачи просматривают несколько типов файлов каждый. Когда любой из отслеживаемых файлов изменяется, соответствующая задача запускается в ответ на это изменение.
gulp.task('watch', function() { //watches SCSS files for changes gulp.watch('scss/*.scss', ['css']); //watches handlebars files for changes gulp.watch('js/templates/**/*.hbs', ['templates']); //watches JavaScript files for changes gulp.watch('js/**/*.js', ['scripts']); });
Как использовать задачи
Чтобы показать, как использовать вышеуказанные задачи, я покажу вам два способа их использования при разработке приложения Ember.js.
Использование разработки
Во время разработки мне нужно иметь возможность компилировать SCSS, компилировать Handlebars, объединять CSS, объединять JavaScript и увеличивать его. Файлы должны быть просмотрены на предмет изменений. Поэтому я настроил следующую задачу для запуска в командной строке.
gulp.task('default', ['css', 'templates', 'scripts', 'watch']);
Здесь я устанавливаю задание по умолчанию для Gulp.js. Он запускается с помощью команды gulp в терминале. Это запустит фоновую задачу из- watch зависимости задачи watch . Каждый раз, когда файл изменяется, запускаются задачи внутри задачи watch ( css , templates и scripts ).
Использование продукции
Во время производства, когда я готов отправить приложение, мне нужны зависимые задачи задачи по умолчанию, кроме задачи наблюдения. Это потому, что я не буду вносить какие-либо изменения в файлы, и мне нужно, чтобы инструменты сборки запускались только один раз. Это запускается с использованием команды gulp production , которая выглядит следующим образом:
gulp.task('production', ['css', 'templates', 'scripts']);
Вывод
На этом мы завершаем наш урок о том, как использовать Gulp в вашем проекте Ember.js. Мы определили несколько задач для сочетания общих задач. Имейте в виду, что вы можете смешивать и сочетать задания. Например, вы можете отключить расширение кода JavaScript во время разработки и включить его только для производственной задачи. Один из способов сделать это — определить две отдельные задачи: одну для разработки и одну для производства. Кроме того, эти задачи относятся только к моему проекту. Я призываю вас взглянуть на страницы документации по каждому из плагинов. Они содержат более подробную информацию для дальнейшей настройки каждого из них в соответствии с вашими потребностями. Хорошим местом для начала была бы страница плагинов Gulp.js.
Я надеюсь, что это было полезно, и, как обычно, пожалуйста, дайте нам знать, если у вас есть какие-либо вопросы или есть что-то, чтобы внести вклад в вышеперечисленные вопросы.