Построение с Глоток | bot.kz

Оптимизация веб-сайта свои активы и тестирования дизайна в различных браузерах, конечно, не самая забавная часть процесса проектирования.К счастью, он состоит из повторяющихся задач, которые могут быть автоматизированы с правильными инструментами, чтобы улучшить вашу эффективность .

Глоток является система сборки, которые могут улучшить, как вы развивать сайты по автоматизации общих задач, таких как составление препроцессированный CSS, minifying наличие и перезагрузки браузера.В этой статье мы увидим, как вы можете использовать Глоток изменить workflow, что делает его более быстрым и эффективным .

Что такое Глоток

Gulp ¹ является система сборки, означает, что вы можете использовать его для автоматизации общих задач в развитии веб-сайта.Он построен на Node.js, и оба источника Глоток и ваш Глоток файл, где вы определить задачи, которые написаны на JavaScript (или что-то вроде CoffeeScript, если вы того пожелаете).Это делает его идеальным, если вы передний конец Разработчик: Вы можете написать задачи нибудь вкусненькое свой наличие и CSS, разобрать свои шаблоны и компиляции менее, когда файл был изменен (и это только несколько примеров), и вязык, который вы, вероятно, уже знакомы с .

Глоток сам по себе не действительно много, но огромное количество плагинов доступны, которые вы можете увидеть на плагины page ² либо путем поиска gulpplugin по НПМ.Например, есть плагины для запустить JSHint ^{3 | __14 компиляции вашего CoffeeScript __31 | | 4__10} | __35, запустить Mocha tests __37 | | 5__10 и даже обновить версию number __43 | | 6__10 .

Другие инструменты для сборки доступны, такие как Grunt __51 | | 7__10 и, в последнее время, Broccoli __57 | | 8__10 , но я считаю, Глоток быть выше (смраздел “Почему Глоток?” ниже).Я составил длинный список строительных инструментов, написанных на JavaScript __63 | | 9__10 .

Глоток является открытым исходным кодом и может быть узнать на GitHub ¹⁰ .

Установка Gulp

Установка Глоток довольно легко.Во-первых, необходимо установить пакет глотком глобально:

npm install -g gulp

Затем установите его в свой проект:

npm install --save-dev gulp

Использование Gulp

Давайте создадим глотком задачу Минимизировать один из наших файлов JavaScript.Создайте файл с именем gulpfile.js.Это где вы будете определять ваши глотком задачи, которые будут выполняться с помощью gulp Команда .

Поставьте следующее в вашем gulpfile.js файла:

var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

Установка gulp-uglify через НПМ работает npm install --save-dev gulp-uglify, а затем запустить задачу, запустив gulp minify.Если предположить, что у вас есть файл с именем app.js в js каталог, новая app.js будет создан в каталоге сборки, содержащей уменьшенная содержимое js/app.js .

? Что на самом деле произошло здесь, хотя

Мы делаем несколько вещей в нашей gulpfile.js файл.Во-первых, мы загрузке gulp 31 ~ и | модули:

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

Затем мы определим задачу с именем minify, который при запуске, будет вызывать функцию, предоставляемый в качестве второго аргумента:

gulp.task('minify', function () {

});

Наконец, — и это, где это становится сложнее — мы определяем, что наша задача должна на самом деле:

gulp.src('js/app.js')
   .pipe(uglify())
   .pipe(gulp.dest('build'))

Если вы не знакомы с потоками, которые большинство интерфейсных разработчики не, выше код не будет означать многое для вас .

Streams

Потоки позволяют пройти некоторые данные через ряд, как правило, небольших функций, которые будут изменять данные, а затем передать измененные данные в следующую функцию .

В приведенном выше примере, gulp.src() функция принимает строку, которая соответствует файл или несколько файлов (известный как “Глоб”), и создает поток объектов, представляющих эти файлы.Затем они прошли (или водопроводной) в uglify() функции, которая принимает объекты файл и возвращает новые файловые объекты с уменьшенная источника.Это выход переправлена gulp.dest() функции, которая сохраняет измененные файлы .

В виде диаграммы, это то, что происходит:

Когда есть только одна задача, функция действительно не делать.Тем не менее, рассмотрим следующий код:

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

Чтобы запустить это самостоятельно, установить gulp, gulp-jshint, gulp-uglify 52 ~ и | .

Эта задача будет принимать все файлы, соответствующие js/*.js (т.е. все файлы JavaScript из js каталог), запустите JSHint на них и распечатать вывод, уродовать каждый файл, а затем объединить их, сохраняя их в build/app.js.В виде диаграммы:

Если вы знакомы с Грантом, то вы заметите, что это довольно разные, как Грунт делает.Грунт не использовать потоки;Вместо этого, он принимает файлы, проходит одна задача на них и сохраняет их в новые файлы, повторяя весь процесскаждая задача.Это приводит к большим хитов в файловой системе, что делает его медленнее, чем Глоток .

Для более полной чтения на потоках, проверить “ поток Handbook ¹¹.”

Gulp.src ()

gulp.src() функция принимает Glob (т.е. строка, соответствующая одному или более файлов) или массив шариков и возвращает поток, который может быть передан в плагины .

Глоток использует узел-glob __16 | 12 получить файлы из Глоб или шарики вы укажете.Проще всего объяснить на примерах:

js/app.jsМатчи точное file
js/*.jsМатчи все файлы, оканчивающиеся на .js в js каталог only
js/**/*.jsМатчи все файлы, оканчивающиеся на .js в js каталог и все дочерние directories
!js/app.jsИсключает js/app.js от матча, что полезно, если вы хотите, чтобы соответствовать все файлы в каталоге для конкретного file
*.+(js|css)Матчи все файлы в корневом каталоге, заканчивающиеся на .js 68 ~ или | | __23

Другие функции доступны, но они обычно не используются в залпом.Проверьте вне Minimatch __36 | 13 документация для более .

Давайте предположим, что мы каталог с именем js, содержащая файлы JavaScript, некоторые уменьшенная и некоторые нет, и мы хотим, чтобы создать задачу Минимизировать файлы, которые уже не уменьшенная.Чтобы сделать это, мы сопоставляем все файлы JavaScript в каталоге, а затем исключить все файлы, оканчивающиеся на .min.js:

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

Определение Tasks

Чтобы определить задачу, используйте gulp.task() функцию.При определении простую задачу, эта функция принимает два атрибута: имя задачу и функции для работы .

gulp.task('greet', function () {
   console.log('Hello world!');
});

Летние gulp greet приведет к “Привет, мир” печатается на консоль .

Задача может быть также список других задач.Предположим, мы хотим, чтобы определить build задачу, которая работает три другие задачи, css, js 78 ~ и |.Мы можем сделать это, указав массив задач, вместо функции:

gulp.task('build', ['css', 'js', 'imgs']);

Они будут работать в асинхронном режиме, так что вы не можете предположить, что css задача будет закончена работает по времени js начинается — в самом деле, это, вероятно, не будет иметь.Чтобы убедиться, что задача завершения работы, прежде чем другая задача выполняется, вы можете указать зависимостей путем объединения массива задач с функцией.Например, чтобы определить css задачу, которая проверяет, что greet задача завершения работы, прежде чем он работает, вы можете сделать это:

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

Теперь, когда вы запустите css задачу, Глоток будет выполнять greet задачи, ждать его, чтобы закончить, а затем вызвать функцию, вы указали .

Умолчанию Tasks

Вы можете определить значение по умолчаниюзадача, которая выполняется, когда вы просто запустите gulp.Вы можете сделать это, определив задачу с именем default .

gulp.task('default', function () {
   // Your default task
});

Plugins

Вы можете использовать ряд плагинов — более 600, на самом деле — с залпом.Вы найдете их в списке на плагинов page ^{14 | __9, либо путем поиска gulpplugin по НПМ.Некоторые плагины помечены “gulpfriendly”;это не плагины, но предназначен для работы с глотком.Будьте в курсе при поиске непосредственно на НПМ, что вы не будете в состоянии видеть, был ли черный список плагинов (прокрутка внизу страницы плагинов, вы увидите, что многие) .}

Большинство плагинов довольно проста в использовании, имеют хорошую документацию и работать таким же образом (по конвейеру поток файловых объектов к нему).Они, как правило, затем изменять файлы (хотя некоторые, такие как валидаторы, не будет) и вернуться новые файлы, которые передаются на следующий плагин .

Давайте расширять на нашем js задачи из ранее:

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

Мы используем три плагины здесь, глоток-jshint ¹⁵, глотать-uglify ¹⁶ и глотать-concat ¹⁷.Вы можете увидеть в README файлы для плагинов, что они довольно легко использовать;варианты, но по умолчанию, как правило, достаточно хорошо .

Вы, возможно, заметили, что плагин JSHint вызывается дважды.Это потому, что первая линия проходит JSHint на файлы, которые только придает jshint недвижимость в файловых объектов без вывода чего-либо.Вы можете прочитать jshint свойства самостоятельно или передать его JSHint репортера по умолчанию или в другой репортер, таких как jshint-stylish __38 | 18 .

Два других плагинов яснее: uglify() функция minifies код, и concat('app.js') функция объединяет все файлы в один файл с именем app.js .

Глоток-нагрузки plugins

Модуль, который я нахожу очень полезным является глотком ограждающих плагины, которые автоматически загружает все плагины глоток из своего package.json файла и придает им объекта.Его самое основное использование является следующим:

var gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

Вы можете положить, что все на одну строку (var plugins = require('gulp-load-plugins')();), но я не большой поклонник встроенного require называет .

После запуска этого кода, plugins объект будет содержать ваши плагины, верблюжьей обсадной их имена (например, gulp-ruby-sass будет загружен до plugins.rubySass).Вы можете использовать их, как будто они были обязаны нормально.Например, наш js задача еще до будет снижена доследующее:

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

Это предполагает package.json файл, который что-то вроде следующего:

{
   "devDependencies": {
      "gulp-concat": "~2.2.0",
      "gulp-uglify": "~0.2.1",
      "gulp-jshint": "~1.5.1",
      "gulp": "~3.5.6"
   }
}

В этом примере, это не на самом деле гораздо короче.Тем не менее, с более и более сложных файлов глоток, это уменьшает нагрузку на включает в себя только один или две линии .

Версия 0.4.0 от глотком ограждающих плагинов, выпущенных в начале марта, добавил отложенной загрузки плагина, который улучшает производительность.Плагины не загружаются до тех пор, пока их называем, это означает, что вам не придется беспокоиться о н� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 11.06.2014 by coding.smashingmagazine.com