Created
May 26, 2014 21:56
-
-
Save exdeniz/b810399b7235cae58aa8 to your computer and use it in GitHub Desktop.
gulp с одного проекта. Второй файл - вариант использования browser-sync по другому.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Собираем 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/", | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Инициализируем плагины | |
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')) | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Сыровато, но идеи понятны =)