animate.css/gulpfile.js
Marcy Sutton 940e4aef81 Add support for prefers-reduced-motion media query (#832)
Feat: add prefers-reduced-motion media query

Improve accessibility by respecting the user's preference
2018-07-23 15:44:09 -07:00

108 lines
2.5 KiB
JavaScript

// Utilities
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var fs = require('fs');
// Gulp
var gulp = require('gulp');
// Gulp plugins
var concat = require('gulp-concat');
var gutil = require('gulp-util');
var header = require('gulp-header');
var postcss = require('gulp-postcss');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');
// Misc/global vars
var pkg = JSON.parse(fs.readFileSync('package.json'));
var activatedAnimations = activateAnimations();
// Task options
var opts = {
destPath: './',
concatName: 'animate.css',
autoprefixer: {
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
cascade: false,
},
minRename: {
suffix: '.min',
},
banner: [
'@charset "UTF-8";\n',
'/*!',
' * <%= name %> -<%= homepage %>',
' * Version - <%= version %>',
' * Licensed under the MIT license - http://opensource.org/licenses/MIT',
' *',
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
' */\n\n',
].join('\n'),
};
// ----------------------------
// Gulp task definitions
// ----------------------------
gulp.task('createCSS', function() {
return gulp
.src(activatedAnimations)
.pipe(concat(opts.concatName))
.pipe(postcss([autoprefixer(opts.autoprefixer)]))
.pipe(gulp.dest(opts.destPath))
.pipe(postcss([cssnano({reduceIdents: {keyframes: false}})]))
.pipe(rename(opts.minRename))
.pipe(gulp.dest(opts.destPath));
});
gulp.task('addHeader', function() {
return gulp
.src('*.css')
.pipe(header(opts.banner, pkg))
.pipe(gulp.dest(opts.destPath));
});
gulp.task('default', gulp.series('createCSS', 'addHeader'));
// ----------------------------
// Helpers/functions
// ----------------------------
// Read the config file and return an array of the animations to be activated
function activateAnimations() {
var categories = JSON.parse(fs.readFileSync('animate-config.json')),
category,
files,
file,
target = [],
count = 0;
for (category in categories) {
if (categories.hasOwnProperty(category)) {
files = categories[category];
for (file in files) {
if (files[file]) {
// marked as true
target.push('source/' + category + '/' + file + '.css');
count += 1;
}
}
}
}
// prepend base CSS
target.push('source/_base.css');
if (!count) {
gutil.log('No animations activated.');
} else {
gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.');
}
return target;
}