Commit 5dc7fb73 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge "Adds 'production' command line argument for gulp and make (Bug 1507811)"

parents a917f2d9 364c007a
all: css
production = true
ifeq (, $(shell which npm))
$(error ERROR: Can't find the "npm" executable. Try "sudo apt-get install npm")
......@@ -14,7 +15,7 @@ ifndef npmsetup
npm install
@echo "Building CSS..."
@if gulp css ; then echo "Done!"; else npm install; gulp css; fi
@if gulp css --production $(production) ; then echo "Done!"; else npm install; gulp css --production $(production); fi
find ./htdocs/theme/* -maxdepth 1 -name "style" -type d -exec rm -Rf {} \;
......@@ -12,6 +12,8 @@ var autoprefixer = require('gulp-autoprefixer');
var bless = require('gulp-bless');
var es = require('event-stream');
var globule = require('globule');
var argv = require('yargs').default('production', 'true').argv;
var gulpif = require('gulp-if');
// Locate all the themes (they're the directories with a "themeconfig.php" in them)
var themes = globule.find('htdocs/theme/*/themeconfig.php');
......@@ -26,13 +28,16 @@ gulp.task('css', 'Compile SASS into CSS', function () {
console.log("Compiling CSS for " + themepath);
return gulp.src('sass/**/*.scss', {cwd: themepath})
.pipe(sass().on('error', sass.logError))
.pipe(gulpif(argv.production !== 'false', sass().on('error', sass.logError), sass({
style: 'expanded',
sourceComments: 'normal'
}).on('error', sass.logError)))
browsers: ['last 4 version'],
cascade: false
.pipe(gulpif(argv.production !== 'false', minifyCSS()))
.pipe(gulpif(argv.production !== 'false', bless()))
.pipe(gulp.dest('style/', {cwd: themepath}));
......@@ -149,6 +149,22 @@ Now that Gulp is set up, __every time you want to work on a theme__, you will ne
This will watch all the `.scss` files in every theme folder for changes and recompile your `.css`.
gulp --production false
This will compile the css with debug comments in place.
#### Using Make to work on themes
Other useful commands are `make css` and `make css production=false` that can be run from the site's root directory.
make css
This will compile all the different theme css at once into the most compressed format for each theme.
make css production=false
This will compile all the different theme css at once but uncompressed and will add debug comments in place to make understanding of sass -> css workflow better.
### Folder structure of the `raw` theme
The `raw` theme's Sass has been split into partials based on the purpose they serve in the theme. A partial is a Sass file named with a leading underscore, e.g. `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@import` directive.
......@@ -13,7 +13,9 @@
"globule": "^0.2.0",
"gulp-bless": "^3.0.1",
"gulp-autoprefixer": "^3.0.1",
"es6-promise": "^3.0.2"
"es6-promise": "^3.0.2",
"yargs": "^3.27.0",
"gulp-if": "^2.0.0"
"devDependencies": {},
"scripts": {
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment