Skip to content

Instantly share code, notes, and snippets.

@vektornsk
Last active June 30, 2019 17:57
Show Gist options
  • Select an option

  • Save vektornsk/1a7b33a968cacbd97795 to your computer and use it in GitHub Desktop.

Select an option

Save vektornsk/1a7b33a968cacbd97795 to your computer and use it in GitHub Desktop.
Сборка для gulp + плагины
'use strict';
var
gulp = require("gulp"),
wiredep = require("wiredep").stream, // авто прописывет файлы из bower
useref = require("gulp-useref"), // перемещает index.html
uglify = require("gulp-uglify"), // минимизирует js
clean = require("gulp-clean"), // удаление файлов, папок
gulpif = require("gulp-if"), // объединяет файлы в поток
filter = require("gulp-filter"), // фильтрует
size = require("gulp-size"), // отображает размеры файлов
imagemin = require("gulp-imagemin"), // минифицирует картинки
concatCss = require("gulp-concat-css"), // склеивает css в одну
minifyCss = require("gulp-minify-css"), // минифицирует css
jade = require("gulp-jade"), // jade
prettify = require("gulp-prettify"), // причесывает jade
browserSync = require("browser-sync"), // перезагрузка страницы
gutil = require("gulp-util"), // утилиты для gulp, выводит в console.log информацию
ftp = require("vinyl-ftp"), // для подключения по ftp
reload = browserSync.reload; // переменная для browserSync reload
// установка в bower: npm install ... --save-dev
// очистка папки
gulp.task('clean', function() {
return gulp.src('dist') // выберае папку
.pipe(clean()); // очистка
});
// Переносим HTML, CSS, JS, в папку dist
gulp.task ('useref', function() {
var assets = useref.assets(); //
return gulp.src('app/*.html') // выбераем все htmnl
.pipe(assets) // все ресурсы
.pipe(gulpif('*.js', uglify())) // фильтрует если js минимизирует
.pipe(gulpif('*.css', minifyCss({compaatibility: 'ie8'}))) // фильтрует если css минимизирует (совместимость с ie8)
.pipe(assets.restore()) // возвращаем ресурсы
.pipe(useref()) // переносит html
.pipe(gulp.dest('dist')); //
});
// установка в html для сборки build
<!-- build:css css/vendor.min.css -->
// положить вовнутрь сжатые css файлы и переименовать их в vendor
<!-- endbuild -->
<!-- build:css fonts/fonts.min.css -->
// положить вовнутрь сжатые шрифты
<!-- endbuild -->
<!-- build:css fonts/main.min.css -->
// положить вовнутрь сжатые main css
<!-- endbuild -->
<!-- build:js js/vendor.min.js -->
// положить вовнутрь сжатые vendor js
<!-- endbuild -->
<!-- build:js js/main.min.js -->
// положить вовнутрь сжатые main js
<!-- endbuild -->
// перенос шрифтов
gulp.task('fonts', function() {
gulp.src('app/fonts/*') // выберает папку
.pipe(filter(['*.eot','*.svg','*.ttf','*.woff','*.woff2',])) // фильтрует шрифты
.pipe(gulp.dest('dist/fonts/')); // переносит
});
// картинки
gilp.task('images', function() {
return gulp.src('app/img/**/*') // выберает все картинки
.pipe(imagemin({ // сжатие
progressive: true, //
interlaced: true //
}))
.pipe(gulp.dest('dist/img')); // переносит
});
// Остальные файлы, такие как favicon.ico и пр.
gulp.task('extras', function() {
return gulp.src([ //
'app/*.*', // все файлы в корне
'!app/*.html' // кроме html
]).pipe(gulp.dest('dist')); // переносит
});
// компиляция jade в html
gulp.task('jade', function() {
gulp.src('app/templates/pages/*.jade') // файлы jade
.pipe(jade()); // компелирует
.on('error', log) // если есть ошибки выводит
.pipe(prettify({indent_size: 2})) // делает красивые отступы в 2
.pipe(gulp.dest('app/')) // скомпелированное складывает в папку app
.pipe(reload({stream: true})); // перезагрузит (reload переменная)
});
// новый wiredep ссылки на bower components
gulp.task('wiredep', function() {
gulp.src('app/templates/common/*.jade')
.pipe(wiredep({
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app/templates/common'));
});
// запускаем локальный сервер
gulp.task('server', ['jade'], function() {
browserSync({
notify: false, //
port: 9000, // порт
server: { //
baseDir: 'app' // базовая директория
}
});
});
// слежка и запуск задач
gulp.task('watch', function() {
gulp.watch('app/templates/**/*.jade', ['jade']); // отслеживаем jade
gulp.watch('bower.json', ['wiredep']); // отслеживаем bower и запускает wiredep
gulp.watch([ //
'app/js/**/*.js', // отслеживаем js
'app/css/**/*.css' // отслеживаем css
]).on('change', reload); // перезагружаем локальный сервер
});
// задача по умолчанию
gulp.task('default', ['server', 'watch']);
// сборка и вывод размера содержимого папки dist
gulp.task('dist', ['useref', 'images', 'fonts', 'extras'], function() { // сборка запускается dist, [массив задач]
return gulp.src('dist/**/*').pipe(size({title : 'buid'})); // показывает сколько весит
});
gulp.task('build', [clean], function() { // очищает папку
gulp.start('dist'); // запускаем задачу dist
});
// gulp.task(name, deps, fn)
// desp - массив задач, которые будут выаолнены ДО запуска задачи name
// внимательно следите за порядком выаолнения задач!
// Отправка на сервер
gulp.task('deploy', function() {
var conn = ftp.create({ // создание ftp подключения
host: 'name_host.ru', // имя домена
user: 'name_user', // имя пользователя
password: 'password', // пароль
parallel: 10, //
log.gutil.log // логи
});
var globs =['dist/**/*']; // переменная для пути
return gulp.src(globs, {base: 'dist/', buffer: false }) //
.pipe(conn.dest('public_html/')); // перемещение
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment