Commit 364c007a authored by Mark Webster's avatar Mark Webster Committed by Robert Lyon

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

Adds 'yargs' and 'gulp-if' to allow the css to be compiled with
expanded comments for easier debugging.

Gulp Usage:

Running 'gulp' will behave the same as before this patch.
Running 'gulp --production false' will compile the css with
debug comments in place.

Make Usage:

Running 'make css' will behave as before.
Running 'make css production=false' will compile the css with
debug comments in place.

behatnotneeded

Change-Id: I83fa35a9ac179b0419dc0160b58cac01b929734a
parent b7824081
all: css
production = true
css:
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
endif
@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
clean-css:
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)))
.pipe(autoprefixer({
browsers: ['last 4 version'],
cascade: false
}))
.pipe(minifyCSS())
.pipe(bless())
.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": {
......
Markdown is supported
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