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

Не запускайте задания 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 кусок:

`

`

Что касается 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']

}); });`

Заключение

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