var gulp = require('gulp'); var gutil = require('gulp-util'); var rename = require('gulp-rename'); var path = require('path'); gulp.task('default', ['build', 'watch']); gulp.task('build', ['styles', 'javascript', 'images', 'fonts']); var sourceDirName = 'static_src'; var destDirName = 'static'; var renameSrcToDest = function() { return rename(function(filePath) { filePath.dirname = filePath.dirname.replace( '/' + sourceDirName + '/', '/' + destDirName + '/'); }); }; var flatten = function(arrOfArr) { return arrOfArr.reduce(function(flat, more) { return flat.concat(more); }, []); }; // A Wagtail app that contains static files var App = function(dir, options) { this.dir = dir; this.options = options || {}; this.appName = this.options.appName || path.basename(dir); this.sourceFiles = path.join('.', this.dir, sourceDirName); }; App.prototype = Object.create(null); App.prototype.scssIncludePaths = function() { return [this.sourceFiles]; }; App.prototype.scssSources = function() { if (!this.options.scss) return []; return this.options.scss.map(function(file) { return path.join(this.sourceFiles, file); }, this); }; // All the Wagtail apps that contain static files var apps = [ new App('wagtail/wagtailadmin', { 'scss': [ 'wagtailadmin/scss/core.scss', 'wagtailadmin/scss/layouts/login.scss', 'wagtailadmin/scss/layouts/home.scss', 'wagtailadmin/scss/layouts/page-editor.scss', 'wagtailadmin/scss/layouts/preview.scss', 'wagtailadmin/scss/panels/rich-text.scss', 'wagtailadmin/scss/userbar.scss', 'wagtailadmin/scss/userbar_embed.scss', ], }), new App('wagtail/wagtaildocs'), new App('wagtail/wagtailembeds'), new App('wagtail/wagtailforms'), new App('wagtail/wagtailimages', { 'scss': [ 'wagtailimages/scss/add-multiple.scss', 'wagtailimages/scss/focal-point-chooser.scss', ], }), new App('wagtail/wagtailsnippets'), new App('wagtail/wagtailusers', { 'scss': [ 'wagtailusers/scss/groups_edit.scss', ], }), new App('wagtail/contrib/wagtailstyleguide', { 'scss': [ 'wagtailstyleguide/scss/styleguide.scss' ], }), ]; /* * Watch - Watch files, trigger tasks when they are modified */ gulp.task('watch', ['build'], function () { apps.forEach(function(app) { gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']); gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']); gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['javascript']); gulp.watch(path.join(app.sourceFiles, '*/images/**'), ['images']); gulp.watch(path.join(app.sourceFiles, '*/fonts/**'), ['fonts']); }); }); /* * Styles **/ gulp.task('styles', ['styles:sass', 'styles:css']); // SASS - Compile and move sass var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('styles:sass', function () { // Wagtail Sass files include each other across applications, // e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss // Thus, each app is used as an includePath. var includePaths = flatten(apps.map(function(app) { return app.scssIncludePaths(); })); // Not all files in a directory need to be compiled, so each app defines // its own Sass files that need to be compiled. var sources = flatten(apps.map(function(app) { return app.scssSources(); })); return gulp.src(sources) .pipe(sass({ errLogToConsole: true, includePaths: includePaths, outputStyle: 'expanded' })) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest(function(file) { // e.g. wagtailadmin/scss/core.scss -> wagtailadmin/css/core.css // Changing the suffix is done by Sass automatically return file.base .replace('/static_src/', '/static/') .replace('/scss/', '/css/'); })) .on('error', gutil.log); }); /* * Simple copy tasks - these just copy files from the source to the destination, * with no compilation, minification, or other intelligence * **/ var rename = require('gulp-rename'); var simpleCopyTask = function(glob) { return function() { var sources = apps.map(function(app) { return path.join(app.sourceFiles, app.appName, glob); }); return gulp.src(sources, {base: '.'}) .pipe(renameSrcToDest()) .pipe(gulp.dest('.')) .on('error', gutil.log); }; }; gulp.task('styles:css', simpleCopyTask('css/**/*')); gulp.task('javascript', simpleCopyTask('js/**/*')); gulp.task('images', simpleCopyTask('images/**/*')); gulp.task('fonts', simpleCopyTask('fonts/**/*'));