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

Gulp.src ()

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

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

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

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

Давайте предположим, что мы каталог с именем 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 и imgs.Мы можем сделать это, указав массив задач, вместо функции:

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 ¹⁴ либо путем поиска 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 ¹⁸ .

Два других плагинов яснее: 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 от глоток ограждающих плагинов, выпущенных в начале марта, добавил отложенной загрузки плагина, который улучшает производительность.Плагины не загружаются, пока вы не называть их, это …

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