Skip to content

Instantly share code, notes, and snippets.

@exdeniz
Created May 26, 2014 21:56
Show Gist options
  • Save exdeniz/b810399b7235cae58aa8 to your computer and use it in GitHub Desktop.
Save exdeniz/b810399b7235cae58aa8 to your computer and use it in GitHub Desktop.
gulp с одного проекта. Второй файл - вариант использования browser-sync по другому.
// Собираем Stylus
gulp.task('stylus', function() {
gulp.src('./assets/b/blocks.styl')
.pipe(plumber())
.pipe(stylus()) // собираем stylus
.pipe(prefix())
.pipe(gulp.dest('./public/css/')) // записываем css
.pipe(browserSync.reload({stream:true}))
});
// Локальный сервер для разработки
// gulp.task('http-server', function() {
// connect()
// .use(require('connect')())
// .use(connect.static('./public'))
// .listen('9001');
// console.log('Server listening on http://localhost:9000');
// });
gulp.task('browser-sync', function() {
browserSync.init(null, {
server: {
baseDir: "./public/",
}
});
});
// Инициализируем плагины
var gulp = require('gulp'), // Сообственно Gulp JS
jade = require('gulp-jade'), // Плагин для Jade
stylus = require('gulp-stylus'), // Плагин для Stylus
csso = require('gulp-csso'), // Минификация CSS
imagemin = require('gulp-imagemin'), // Минификация изображений
uglify = require('gulp-uglify'), // Минификация JS
concat = require('gulp-concat'), // Склейка файлов
connect = require('connect'), // Webserver
plumber = require('gulp-plumber'),
newer = require('gulp-newer'),
browserSync = require('browser-sync'),
iconfont = require('gulp-iconfont'),
pixrem = require('gulp-pixrem'),
rename = require("gulp-rename"),
fontgen = require("gulp-fontgen"),
rsvg = require('gulp-rsvg'),
prefix = require('gulp-autoprefixer');
// Собираем Stylus
gulp.task('stylus', function() {
gulp.src('./assets/b/blocks.styl')
.pipe(plumber())
.pipe(stylus()) // собираем stylus
.pipe(prefix())
.pipe(gulp.dest('./public/css/')) // записываем css
});
gulp.task('stylusURI', function() {
gulp.src('./assets/b/blocks.uri.styl')
.pipe(plumber())
.pipe(stylus()) // собираем stylus
.pipe(prefix())
.pipe(gulp.dest('./public/css/')) // записываем css
});
gulp.task('stylusIE', function() {
gulp.src('./assets/b/blocks.ie.styl')
.pipe(plumber())
.pipe(stylus()) // собираем stylus
.pipe(prefix())
.pipe(gulp.dest('./public/css/')) // записываем css
});
gulp.task('stylusREM', function() {
gulp.src('./assets/b/blocks.styl')
.pipe(plumber())
.pipe(stylus()) // собираем stylus
.pipe(prefix("ie 8"))
.pipe(pixrem('62.5%',{replace: true}))
.pipe(rename('blockIE8.css'))
.pipe(gulp.dest('./public/css/')) // записываем css
});
// Собираем html из Jade
gulp.task('jade', function() {
gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
.pipe(jade({
pretty: true
})) // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(gulp.dest('./public/')) // Записываем собранные файлы
});
// Собираем JS
gulp.task('js', function() {
gulp.src(['./assets/js/index/**/*.js', './assets/js/plugins.js'])
.pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
.pipe(gulp.dest('./public/js'))
});
gulp.task('bower-js', function() {
gulp.src([
'./assets/bower_components/jquery/dist/jquery.js',
'./assets/bower_components/switchery/switchery.js'
])
.pipe(gulp.dest('./assets/js/vendor/'))
});
gulp.task('vendor-js', function() {
gulp.src(['./assets/js/vendor/**/*.js'])
.pipe(concat('vendor.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
.pipe(gulp.dest('./public/js'))
});
// Копируем и минимизируем изображения
gulp.task('images', function() {
gulp.src('./assets/img/**/*')
.pipe(newer('./public/img'))
.pipe(imagemin())
.pipe(gulp.dest('./public/img'))
});
gulp.task('favicon', function() {
gulp.src(['./assets/favicon/**/*.png','./assets/favicon/**/*.ico'])
.pipe(newer('./public/'))
.pipe(gulp.dest('./public/'))
});
gulp.task('fonts', function() {
gulp.src('./assets/fonts/**/*')
.pipe(newer('./public/fonts'))
.pipe(gulp.dest('./public/fonts'))
});
gulp.task('fontgen', function() {
gulp.src('./assets/fonts_source/*.otf')
.pipe(fontgen({
dest: './public/fonts/'
}))
.pipe(gulp.dest('./public/fonts/'));
});
gulp.task('rsvg', function(){
gulp.src('assets/icons/*.svg')
.pipe(rsvg({
format: 'svg',
height: '500',
width: '500'
}))
.pipe(gulp.dest('assets/icons/resize/'));
});
gulp.task('iconfont', function(){
gulp.src(['assets/icons/resize/*.svg'])
.pipe(iconfont({
fontName: 'UCIconFont', // required
appendCodepoints: true, // recommended option
fixedWidth: '28',
//fontHeight: '28'
}))
.on('codepoints', function(codepoints, options) {
// CSS templating, e.g.
console.log(codepoints, options);
})
.pipe(gulp.dest('./public/fonts'));
});
// Локальный сервер для разработки
gulp.task('http-server', function() {
connect()
.use(require('connect')())
.use(connect.static('./public'))
.listen('9001');
console.log('Server listening on http://localhost:9000');
});
// Запуск сервера разработки gulp watch
gulp.task('default', function() {
// // Предварительная сборка проекта
gulp.run(['stylus','stylusIE','stylusURI']);
gulp.run('jade');
gulp.run('images');
gulp.run('favicon');
gulp.run('vendor-js');
gulp.run('js');
gulp.run('fonts');
browserSync.init(['./public/**/*.css','./public/**/*.html','./public/js/**/*.js']);
gulp.run('http-server');
gulp.watch(['assets/b/**/*.styl','!assets/b/**/*.ie.styl','!assets/b/**/*.uri.styl'] , function() {
gulp.run('stylus');
});
gulp.watch(['!assets/b/**/*.styl','assets/b/**/*.ie.styl','!assets/b/**/*.uri.styl'] , function() {
gulp.run('stylusIE');
});
gulp.watch(['!assets/b/**/*.styl','!assets/b/**/*.ie.styl','assets/b/**/*.uri.styl'] , function() {
gulp.run('stylusURI');
});
gulp.watch(['assets/template/**/*.jade','assets/b/**/*.jade'], function() {
gulp.run('jade');
});
gulp.watch('assets/img/**/*', function() {
gulp.run('images');
});
gulp.watch('assets/favicon/**/*', function() {
gulp.run('favicon');
});
gulp.watch('assets/js/**/*', function() {
gulp.run('js');
gulp.run('vendor-js');
});
gulp.watch('assets/fonts/**/*', function() {
gulp.run('fonts');
});
gulp.watch('assets/icons/**/*', function() {
gulp.run('iconfont');
});
});
gulp.task('build', function() {
// css
gulp.src(['./assets/b/blocks.styl', './assets/b/blocks.ie.styl', './assets/b/blocks.uri.styl'])
.pipe(stylus()) // собираем stylus
.pipe(prefix())
.pipe(csso()) // минимизируем css
.pipe(gulp.dest('./build/css/')) // записываем css
// jade
gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
.pipe(jade())
.pipe(gulp.dest('./build/'))
gulp.src(['./assets/js/index/**/*.js', './assets/js/plugins.js'])
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
gulp.src(['./assets/js/vendor/**/*.js'])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'));// js
// image
gulp.src('./assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./build/img'))
// favicon
gulp.src(['./assets/favicon/**/*.png','./assets/favicon/**/*.ico'])
.pipe(gulp.dest('./build/'))
// fonts
gulp.src('./assets/fonts/**/*')
.pipe(gulp.dest('./build/fonts'))
});
@exdeniz
Copy link
Author

exdeniz commented May 26, 2014

Сыровато, но идеи понятны =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment