Уроки использования Gulp

Не запускайте всё последовательно

Не запускайте задания gulp.js в порядке, в котором вы их определили. При паралельном запуске они будут работать гораздо быстрее.

Однако, если вы хотите запустить задания в определённом порядке, то можете обозначить зависимости, например так:

gulp.task('one', function(cb) {
    cb(err);
});

gulp.task('two', ['one'], function() {

});

gulp.task('default', ['one', 'two']);

В предыдущей версии gulp, вам нужно было использовать что-то вроде gulp-sequence или run-sequence.

Используйте задание watch с осторожностью

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

// Да
gulp.watch('src/js/**/*.js', ['js']);

// Нет
gulp.watch('**/*.*', ['js']);

Иначе запуск gulp задания в командной строке приведёт к медленному выполнению задач и высокой загрузке CPU / использованию памяти.

Gulp-inject

После обрезки и минификации CSS и JavaScript файлов, я хотел найти способ динамически добавлять эти файлы к HTML странице. Плагин gulp-inject - именно то, что я искал.

// Убедитесь, что все предыдущие задачи (обрезание и минификация) запускаются раньше
gulp.task('index', ['images', 'js', 'css', 'fonts'], function() {
    var inject = require('gulp-inject');
    var target = gulp.src('./src/index.html');

    // Read = false не будет читать содержимое файла и будет выполнятся быстрее
    var sources = gulp.src([paths.build.js, paths.build.css], {
        read: false
    });

    return target
    .pipe(inject(sources, {

        // Не добавлять слеш к корневой папке в начале пути
        addRootSlash: false,

        // Убрать `public` из пути при инъекции
        ignorePath: 'public'
    }))
    .pipe(gulp.dest('public'));
});

И добавляете всё это в ваш html кусок:

<body>
    <!-- inject:js -->
    <!-- endinject -->
</body>

Что касается html, он также поддерживает jade, jsx, slm и haml.

Используете bower?

Когда вы используете bower для управления зависимостями, то на помощь прийдут main-bower-files. Иначе вам вручную нужно будет указывать какие файлы bower вы хотели бы включить.

var mainBowerFiles = require('main-bower-files');

var paths = {
  src: {
    js: mainBowerFiles({

      // Установите базовый путь для своих bower компонентов
      base: './bower_components',

      // Возвращать только JavaScript файлы
      filter: /.*\.js$/i

    // Обрезать файлы bower
    }).concat(['src/js/**/*.js']);
  }
}

Node + browsersync: возможно, но громоздко

Одной из самых утомительных вещей, является нахождение способа заставить работать gulp с nodemon (автоматический рестарт node) и BrowserSync. gulpfile от Hafiz Ismail положил отличный старт и я сделал маленькие изменения.

gulp.task('nodemon', function(cb) {
  var nodemon = require('gulp-nodemon');

  // Мы используем переменную `called`, чтобы убедится, что колбек исполняется только раз
  var called = false;
  return nodemon({
    script: 'server.js',
    watch: ['server.js', 'server/**/*.*']
  })
  .on('start', function onStart() {
    if (!called) {
      cb();
    }
    called = true;
  })
  .on('restart', function onRestart() {

    // Также перегрузка браузеров после небольшой задержки
    setTimeout(function reload() {
      browserSync.reload({
        stream: false
      });
    }, 500);
  });
});

// Убедитесь, что `nodemon` запускается перед запуском `browser-sync`.
gulp.task('browser-sync', ['index', 'nodemon'], function() {
  var port = process.env.PORT || 5000;
  browserSync.init({

    // На все следующие файлы вешаем задачу watch
    files: ['public/**/*.*'],

    // Сообщает BrowserSync где запущено приложение express
    proxy: 'http://localhost:' + port,

    // Этот порт должен отличаться от порта приложения express
    port: 4000,

    // Какой браузер будем запускать?
    browser: ['google chrome']
  });
});

Заключение

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

Знакомство с gulp 12 бесплатных игр для обучения программированию