Created
February 5, 2016 11:01
-
-
Save validatorru/6aca0eba164b290bd14e to your computer and use it in GitHub Desktop.
BUZZfriends frontend workflow gulpfile.js tweaked to work with webfonts and plumber
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
/** | |
* BUZZfriends frontend workflow gulpfile.js | |
* based on https://github.com/Insayt | |
* https://gist.github.com/Insayt/272c9b81936a03884768 | |
* tweaked to work with webfonts and plumber | |
*/ | |
'use strict'; | |
var gulp = require('gulp'); | |
var plumber = require('gulp-plumber'); | |
var watch = require('gulp-watch'); | |
var prefixer = require('gulp-autoprefixer'); | |
var uglify = require('gulp-uglify'); | |
var sass = require('gulp-sass'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var rigger = require('gulp-rigger'); | |
var cssmin = require('gulp-minify-css'); | |
var imagemin = require('gulp-imagemin'); | |
var pngquant = require('imagemin-pngquant'); | |
var rimraf = require('rimraf'); | |
var browserSync = require('browser-sync'); | |
var fontgen = require('gulp-fontgen'); | |
var concatCss = require('gulp-concat-css'); | |
var reload = browserSync.reload; | |
require('es6-promise').polyfill(); | |
var path = { | |
build: { | |
html: 'build/', | |
js: 'build/js/', | |
css: 'build/css/', | |
img: 'build/img/', | |
fonts: 'build/fonts/' | |
}, | |
src: { | |
html: 'src/*.html', | |
js: 'src/js/main.js', | |
styles: 'src/styles/main.scss', | |
img: 'src/img/**/*.*', | |
fonts: 'src/fonts/**/*.*', | |
rawfonts: 'src/rawfonts/*.{ttf,otf}' | |
}, | |
watch: { | |
html: 'src/**/*.html', | |
js: 'src/js/**/*.js', | |
style: 'src/styles/**/*.scss', | |
img: 'src/img/**/*.*', | |
fonts: 'src/fonts/**/*.*' | |
}, | |
clean: './build' | |
}; | |
var config = { | |
server: { | |
baseDir: './build' | |
}, | |
// tunnel: true, // ENABLE / DISABLE tunnel | |
tunnel: false, | |
host: 'localhost', | |
port: 9000, | |
logPrefix: 'BUZZfriends_frontend' | |
}; | |
gulp.task('html:build', function () { | |
gulp.src(path.src.html) | |
.pipe(plumber()) | |
.pipe(rigger()) | |
.pipe(gulp.dest(path.build.html)) | |
.pipe(reload({stream: true})); | |
}); | |
gulp.task('js:build', function () { | |
gulp.src(path.src.js) | |
.pipe(plumber()) | |
.pipe(rigger()) | |
.pipe(sourcemaps.init()) // SOURCEMAP ON / OFF | |
.pipe(uglify()) | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest(path.build.js)) | |
.pipe(reload({stream: true})); | |
}); | |
/** | |
* process SASS | |
*/ | |
gulp.task('styles:build', function () { | |
gulp.src(path.src.styles) | |
.pipe(plumber()) | |
.pipe(sourcemaps.init()) // SOURCEMAP ON / OFF | |
.pipe(sass()) | |
.pipe(prefixer()) | |
.pipe(cssmin()) | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest(path.build.css)) | |
.pipe(reload({stream: true})); | |
}); | |
/** | |
* process images | |
*/ | |
gulp.task('image:build', function () { | |
gulp.src(path.src.img) | |
.pipe(plumber()) | |
.pipe(imagemin({ | |
progressive: true, | |
svgoPlugins: [{removeViewBox: false}], | |
use: [pngquant()], | |
interlaced: true | |
})) | |
.pipe(gulp.dest(path.build.img)) | |
.pipe(reload({stream: true})); | |
}); | |
/** | |
* in case we already have webfonts, copy them to build folder | |
*/ | |
gulp.task('fonts:build', function () { | |
gulp.src(path.src.fonts) | |
.pipe(plumber()) | |
.pipe(gulp.dest(path.build.fonts)); | |
}); | |
/** | |
* convert OTF / TTF to webfonts and CSS | |
*/ | |
gulp.task('webfonts:build', function () { | |
gulp.src('src/rawfonts/*.{ttf,otf}') | |
.pipe(plumber()).pipe(fontgen({dest: 'src/fonts/'})); | |
}); | |
/** | |
* concatenate fonts-CSS into a single file | |
*/ | |
gulp.task('webfontscss:build', function () { | |
gulp.src('src/fonts/*.css') | |
.pipe(plumber()).pipe(concatCss('./fonts.css')) | |
.pipe(plumber()).pipe(gulp.dest('src/fonts/')); | |
}); | |
gulp.task('build', [ | |
'html:build', | |
'js:build', | |
'styles:build', | |
'fonts:build', | |
'image:build' | |
]); | |
gulp.task('watch', function () { | |
watch([path.watch.html], function (event, cb) { | |
gulp.start('html:build'); | |
}); | |
watch([path.watch.style], function (event, cb) { | |
gulp.start('styles:build'); | |
}); | |
watch([path.watch.js], function (event, cb) { | |
gulp.start('js:build'); | |
}); | |
watch([path.watch.img], function (event, cb) { | |
gulp.start('image:build'); | |
}); | |
watch([path.watch.fonts], function (event, cb) { | |
gulp.start('fonts:build'); | |
}); | |
}); | |
gulp.task('webserver', function () { | |
browserSync(config); | |
}); | |
gulp.task('clean', function (cb) { | |
rimraf(path.clean, cb); | |
}); | |
gulp.task('default', ['build', 'webserver', 'watch']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment