Skip to content

Instantly share code, notes, and snippets.

@schfkt
Created October 24, 2016 09:49
Show Gist options
  • Save schfkt/3e1c3857e2d8e0551398d9436c7726b9 to your computer and use it in GitHub Desktop.
Save schfkt/3e1c3857e2d8e0551398d9436c7726b9 to your computer and use it in GitHub Desktop.
Gulp config for a simple frontend development process
var gulp = require('gulp');
var clean = require('gulp-clean');
var replace = require('gulp-replace');
var concat = require('gulp-concat-css');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var plumber = require('gulp-plumber');
var csscomb = require('gulp-csscomb');
var BUILD_DIR = '../done';
// CSS files
var VENDOR = [
'css/vendor/bootstrap.min.css',
'css/vendor/bootstrap-theme.min.css',
'css/vendor/font-awesome.min.css'
];
var PROJECT = [
'css/base/base.css',
'css/base/layout.css',
'css/base/state.css',
'css/module/*.css'
];
var ALL = VENDOR.concat(PROJECT);
// Build process tasks
gulp.task('clean', function () {
return gulp.src(BUILD_DIR, {read: false})
.pipe(clean({force: true}));
});
gulp.task('build', ['clean'], function () {
gulp.start('build:css');
gulp.start('build:images');
gulp.start('build:html');
gulp.start('build:js');
gulp.start('build:fonts');
});
gulp.task('build:css', function () {
return gulp.src(ALL)
.pipe(concat('bundle.css', {inlineImports: false, rebaseUrls: false}))
.pipe(replace('/images/', 'images/'))
.pipe(replace('/fonts/', 'fonts/'))
.pipe(gulp.dest(BUILD_DIR));
});
gulp.task('build:images', function () {
return gulp.src('images/**/*', {base: '.'})
.pipe(gulp.dest(BUILD_DIR));
});
gulp.task('build:html', function () {
return gulp.src('*.html')
.pipe(replace('/images/', 'images/'))
.pipe(replace('/js/', 'js/'))
.pipe(gulp.dest(BUILD_DIR));
});
gulp.task('build:js', function () {
return gulp.src('js/**/*', {base: '.'})
.pipe(gulp.dest(BUILD_DIR));
});
gulp.task('build:fonts', function () {
return gulp.src('fonts/**/*', {base: '.'})
.pipe(gulp.dest(BUILD_DIR));
});
// Development tasks
gulp.task('concat', function () {
gulp.src(ALL)
.pipe(plumber())
.pipe(concat('bundle.css', {inlineImports: false, rebaseUrls: false}))
.pipe(gulp.dest('.'));
});
gulp.task('watch', function () {
watch(ALL, batch(function (events, done) {
gulp.start('concat', done);
}));
});
gulp.task('csscomb', function () {
gulp.src(PROJECT, {base: './css'})
.pipe(csscomb('./node_modules/csscomb/config/zen.json'))
.pipe(gulp.dest('css'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment