Last active
March 9, 2018 03:18
-
-
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.
This file contains hidden or 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
'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'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.