wagtail/gulpfile.js
Tim Heap ddebafa119 Remove libsass dependency, precompile CSS for distribution
Depending on libsass for all Wagtail installations was causing issues
with various operating systems, dramatically increasing installation
times, and preventing front end development adopting modern practices.

libsass has been removed as a dependency. Sass files are compiled before
release as a dependency of the `sdist` setup command. Sass compilation
is done through `gulp`. People wishing to hack on the frontend assets
should now install wagtail locally, install the node dependencies, and
run `gulp`:

    $ pip install -e path/to/wagtail
    $ cd path/to/wagtail
    $ npm install
    $ npm start

All the templates and JS files have been updated to reference the new
compiled CSS files instead of the Sass files.

Precompiled CSS for jquery-ui and similar have been moved out of the
`scss/` directory to the `css/` directory.
2015-05-01 08:53:04 +10:00

84 lines
2.3 KiB
JavaScript

var gulp = require('gulp');
var gutil = require('gulp-util');
var rename = require('gulp-rename');
var path = require('path');
var join = path.join;
gulp.task('default', ['watch']);
gulp.task('build', ['styles']);
var scssFiles = {
'wagtail/wagtailadmin/static': [
'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/normalize.scss',
'wagtailadmin/scss/userbar_embed.scss',
],
'wagtail/wagtailimages/static': [
'wagtailimages/scss/add-multiple.scss',
'wagtailimages/scss/focal-point-chooser.scss',
],
'wagtail/wagtailusers/static': [
'wagtailusers/scss/groups_edit.scss',
],
'wagtail/contrib/wagtailstyleguide/static': [
'wagtailstyleguide/scss/styleguide.scss',
],
};
/*
* Watch - Watch files, trigger tasks when they are modified
*/
gulp.task('watch', ['build'], function () {
for (var appPath in scssFiles) {
gulp.watch(join(appPath, '*/scss/**'), ['styles']);
}
});
/*
* SASS - Compile and move sass
**/
gulp.task('styles', function () {
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
// Wagtail Sass files include each other across applications,
// e.g. wagtailimages Sass files will include wagtailadmin/scss/mixins.scss
// Thus, each app is used as an includePath.
var includePaths = Object.keys(scssFiles);
// Not all files in a directory need to be compiled, so globs can not be used.
// Each file is named individually by joining its app path and file name.
var sources = Object.keys(scssFiles).reduce(function(allSources, appPath) {
var appSources = scssFiles[appPath];
return allSources.concat(appSources.map(function(appSource) {
return join(appPath, appSource);
}));
}, []);
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('/scss/', '/css/');
}))
.on('error', gutil.log);
});