Skip to content

Instantly share code, notes, and snippets.

@chriskjaer
Last active March 9, 2018 03:18
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriskjaer/494e109a450ec9f7d123 to your computer and use it in GitHub Desktop.
Save chriskjaer/494e109a450ec9f7d123 to your computer and use it in GitHub Desktop.
Gulpfile for CMS integration (Drupal, Wordpress, Umbraco Sitecore etc.) Includes task for Sass + Autoprefixer, Styleguide (KSS) and JS Uglifier.
'use strict';
var gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
del = require('del'),
kss = require('gulp-kss'),
changed = require('gulp-changed');
//
// Paths
// -------------------------------------------------------------
// If project root is not inside a folder then change it to './'
var ROOT = './project-name/',
ASSETS = ROOT + 'assets/',
SOURCE = ASSETS + 'source/',
BUILD = ASSETS + 'build/',
BOWER = 'bower_components/',
STYLEGUIDETEMPLATE = SOURCE + 'styleguide-template/',
// Combine these with either BUILD or SOURCE
STYLES = 'styles/',
JS = 'scripts/',
IMAGES = 'images/',
FONTS = 'fonts/';
//
// TASKS
// -------------------------------------------------------------
gulp.task('css', function() {
watch({glob: SOURCE + STYLES + '*.scss'}, function(files) {
return files.pipe(sass({
errLogToConsole: true
}))
.pipe(prefix('last 1 version', '> 1%', 'ie 9').on('error', function (error) {
console.warn(error.message);
}))
.pipe(gulp.dest(BUILD + STYLES));
});
});
gulp.task('js', function() {
return gulp.src([
BOWER + 'jquery/dist/jquery.js',
SOURCE + JS + '*.js'
])
.pipe(concat('main.js'))
.pipe(uglify().on('error', function (error) {
console.warn(error);
}))
.pipe(gulp.dest(BUILD + JS));
});
gulp.task('images', function() {
watch({glob: SOURCE + IMAGES + '*.*'}, function(files) {
return files.pipe(
gulp.dest(BUILD + IMAGES)
);
});
});
gulp.task('fonts', function() {
watch({glob: SOURCE + FONTS + '*.*'}, function(files) {
return files.pipe(
gulp.dest(BUILD + FONTS)
);
});
});
gulp.task('vendor', function() {
return gulp.src([
BOWER + 'modernizr/modernizr.js',
BOWER + 'respond/src/respond.js'
])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest(BUILD + JS));
});
gulp.task('clean', function(cb){
return del([BUILD], cb);
});
gulp.task('kss', function() {
return gulp.src([SOURCE + STYLES + '**/*.scss'])
.pipe(kss({
overview: 'README.md',
templateDirectory: STYLEGUIDETEMPLATE
}))
.pipe(gulp.dest(ROOT + 'styleguide/'));
});
// --- Bringing it all together in a build task ---
gulp.task('build', [
'js',
'css',
'images',
'fonts',
'kss',
'vendor'
]);
// --- Let gulp keep an eye on our files and compile stuff if it changes ---
gulp.task('watch', ['build'], function () {
gulp.watch(SOURCE + STYLES + '**/*.scss',['css', 'kss']);
gulp.watch(SOURCE + JS + '*.js',['js']);
gulp.watch(SOURCE + IMAGES + '*.*',['images']);
gulp.watch([SOURCE + 'styleguide-template/**/*.*', 'README.md'],['kss']);
});
// --- Default gulp task, run with gulp.
gulp.task('default', ['clean'], function(){
gulp.start('watch');
});
@chriskjaer
Copy link
Author

Use this as a continuation from e.g.: https://github.com/chriskjaer/prototype-seed
Get the bower.json, package.json and styleguide-template base from there as well if necessary.

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