Add taiga theme and a gulp task to compile themes

stable
Juanfran 2015-05-22 14:39:08 +02:00 committed by David Barragán Merino
parent 0376fecf02
commit a1488d60c8
7 changed files with 167 additions and 20 deletions

View File

@ -10,7 +10,7 @@ html(lang="en")
meta(name="description", content="Taiga is a project management platform for startups and agile developers & designers who want a simple, beautiful tool that makes work truly enjoyable.")
meta(name="keywords", content="agile, scrum, taiga, management, project, developer, designer, user experience")
//-meta(name="viewport", content="width=device-width, user-scalable=no")
link(rel="stylesheet", href="/styles/main.css")
link(rel="stylesheet", href="/styles/theme-taiga.css")
link(rel="icon", type="image/png", href="/images/favicon.png")
//- PRERENDER SERVICE: This is to know when the page is completely loaded.

View File

@ -10,7 +10,7 @@ $prefix-for-mozilla: true;
// dependencies
//#################################################
@import '../dependencies/colors';
@import "variables";
@import '../dependencies/mixins';
@import '../dependencies/helpers';
@import '../dependencies/responsive';

View File

View File

@ -8,7 +8,6 @@ $gray-light: #b8b8b8;
$whitish: #f5f5f5;
$white: #fff;
$green-taiga: #72a114;
$fresh-taiga: #9dce0a;
$dark-taiga: #879b89;

74
gulp-utils.js Normal file
View File

@ -0,0 +1,74 @@
var exports = module.exports = {};
var fs = require("fs");
var Theme = function() {
var defaultTheme = "taiga";
var themesPath = "app/themes";
var tmpThemesPath = "tmp/themes";
var themesSequenceIndex = 0;
var themesSequence = [];
var searchIndex = function(name) {
for(var i = 0; i < themesSequence.length; i++) {
if (themesSequence[i].name === name) {
return i;
}
}
};
var initThemes = function () {
var availableThemes = {};
var files = fs.readdirSync(themesPath);
files.forEach(function(file) {
var path = themesPath + '/' + file;
var tmpPath = tmpThemesPath + '/' + file;
if (fs.statSync(path).isDirectory()) {
availableThemes[file] = {
name: file,
path: path,
customVariables: path + "/variables.scss",
customScss: path + "/custom.scss",
customCss: tmpPath + "/custom.css",
};
}
});
themesSequence.push(availableThemes[defaultTheme]);
for (var theme in availableThemes) {
if (theme !== defaultTheme) {
themesSequence.push(availableThemes[theme]);
}
}
};
initThemes();
var obj = {};
obj.next = function() {
themesSequenceIndex++;
};
obj.set = function(name) {
themesSequenceIndex = searchIndex(name);
};
Object.defineProperty(obj, "current", {
get: function() {
return themesSequence[themesSequenceIndex];
}
});
return obj;
};
exports.themes = {
sequence: function() {
return Theme();
}
};

View File

@ -27,6 +27,16 @@ var gulp = require("gulp"),
del = require("del"),
coffeelint = require('gulp-coffeelint');
var argv = require('minimist')(process.argv.slice(2));
var utils = require("./gulp-utils");
var themes = utils.themes.sequence();
if (argv.theme) {
themes.set(argv.theme);
}
var paths = {};
paths.app = "app/";
paths.dist = "dist/";
@ -55,10 +65,16 @@ paths.sass = [
paths.app + "**/*.scss",
"!" + paths.app + "/styles/bourbon/**/*.scss",
"!" + paths.app + "/styles/dependencies/**/*.scss",
"!" + paths.app + "/styles/extras/**/*.scss"
"!" + paths.app + "/styles/extras/**/*.scss",
"!" + paths.app + "/themes/**/variables.scss",
];
paths.styles_dependencies = paths.app + "/styles/dependencies/**/*.scss";
paths.sass_watch = paths.sass.concat(themes.current.customScss);
paths.styles_dependencies = [
paths.app + "/styles/dependencies/**/*.scss",
themes.current.customVariables
];
paths.css = [
paths.tmp + "styles/**/*.css",
@ -79,7 +95,8 @@ paths.css_order = [
paths.tmp + "styles/modules/**/*.css",
paths.tmp + "modules/**/*.css",
paths.tmp + "styles/shame/*.css",
paths.tmp + "plugins/**/*.css"
paths.tmp + "plugins/**/*.css",
paths.tmp + "themes/**/*.css"
];
paths.coffee = [
@ -153,7 +170,7 @@ paths.libs = [
paths.app + "js/sha1-custom.js"
];
var isDeploy = process.argv[process.argv.length - 1] == "deploy";
var isDeploy = argv["_"].indexOf("deploy") !== -1;
/*
############################################################################
@ -213,7 +230,9 @@ gulp.task("scss-lint", [], function() {
var fail = process.argv.indexOf("--fail") !== -1;
return gulp.src(paths.sass.concat(ignore))
var sassFiles = paths.sass.concat(themes.current.customScss, ignore);
return gulp.src(sassFiles)
.pipe(gulpif(!isDeploy, cache(scsslint({endless: true, sync: true, config: "scsslint.yml"}), {
success: function(scsslintFile) {
return scsslintFile.scsslint.success;
@ -232,20 +251,25 @@ gulp.task("clear-sass-cache", function() {
});
gulp.task("sass-compile", [], function() {
return gulp.src(paths.sass)
var sassFiles = paths.sass.concat(themes.current.customScss);
return gulp.src(sassFiles)
.pipe(plumber())
.pipe(insert.prepend('@import "dependencies";'))
.pipe(cached("sass"))
.pipe(sass({
includePaths: [
paths.app + "styles/extras/"
paths.app + "styles/extras/",
themes.current.path
]
}))
.pipe(gulp.dest(paths.tmp));
});
gulp.task("css-lint-app", function() {
return gulp.src(paths.css)
var cssFiles = paths.css.concat(themes.current.customCss);
return gulp.src(cssFiles)
.pipe(gulpif(!isDeploy, cache(csslint("csslintrc.json"), {
success: function(csslintFile) {
return csslintFile.csslint.success;
@ -260,9 +284,11 @@ gulp.task("css-lint-app", function() {
});
gulp.task("app-css", function() {
return gulp.src(paths.css)
var cssFiles = paths.css.concat(themes.current.customCss);
return gulp.src(cssFiles)
.pipe(order(paths.css_order, {base: '.'}))
.pipe(concat("app.css"))
.pipe(concat("theme-" + themes.current.name + ".css"))
.pipe(autoprefixer({
cascade: false
}))
@ -278,15 +304,37 @@ gulp.task("vendor-css", function() {
gulp.task("main-css", function() {
var _paths = [
paths.tmp + "vendor.css",
paths.tmp + "app.css"
paths.tmp + "theme-" + themes.current.name + ".css"
];
return gulp.src(_paths)
.pipe(concat("main.css"))
.pipe(concat("theme-" + themes.current.name + ".css"))
.pipe(gulpif(isDeploy, minifyCSS({noAdvanced: true})))
.pipe(gulp.dest(paths.dist + "styles/"))
});
var compileThemes = function (cb) {
return runSequence("clear",
"scss-lint",
"sass-compile",
"css-lint-app",
["app-css", "vendor-css"],
"main-css",
function() {
themes.next()
if (themes.current) {
compileThemes(cb);
} else {
cb();
}
});
};
gulp.task("compile-themes", function(cb) {
compileThemes(cb);
});
gulp.task("styles", function(cb) {
return runSequence("scss-lint",
"sass-compile",
@ -294,7 +342,6 @@ gulp.task("styles", function(cb) {
["app-css", "vendor-css"],
"main-css",
cb);
});
gulp.task("styles-dependencies", function(cb) {
@ -396,7 +443,7 @@ gulp.task("app-deploy", ["coffee", "conf", "locales", "app-loader"], function()
# Common tasks
##############################################################################
*/
gulp.task("clear", function(done) {
gulp.task("clear", ["clear-sass-cache"], function(done) {
return cache.clearAll(done);
});
@ -406,17 +453,33 @@ gulp.task("copy-svg", function() {
.pipe(gulp.dest(paths.dist + "/svg/"));
});
gulp.task("copy-theme-svg", function() {
return gulp.src(themes.current.path + "/svg/**/*")
.pipe(gulp.dest(paths.dist + "/svg/" + themes.current.name));
});
gulp.task("copy-fonts", function() {
return gulp.src(paths.app + "/fonts/*")
.pipe(gulp.dest(paths.dist + "/fonts/"));
});
gulp.task("copy-theme-fonts", function() {
return gulp.src(themes.current.path + "/fonts/*")
.pipe(gulp.dest(paths.dist + "/fonts/" + themes.current.name));
});
gulp.task("copy-images", function() {
return gulp.src(paths.app + "/images/**/*")
.pipe(gulpif(isDeploy, imagemin({progressive: true})))
.pipe(gulp.dest(paths.dist + "/images/"));
});
gulp.task("copy-theme-images", function() {
return gulp.src(themes.current.path + "/images/**/*")
.pipe(gulpif(isDeploy, imagemin({progressive: true})))
.pipe(gulp.dest(paths.dist + "/images/" + themes.current.name));
});
gulp.task("copy-images-plugins", function() {
return gulp.src(paths.app + "/plugins/**/images/*")
.pipe(flatten())
@ -433,7 +496,17 @@ gulp.task("copy-extras", function() {
.pipe(gulp.dest(paths.dist + "/"));
});
gulp.task("copy", ["copy-fonts", "copy-images", "copy-images-plugins", "copy-plugin-templates", "copy-svg", "copy-extras"]);
gulp.task("copy", [
"copy-fonts",
"copy-theme-fonts",
"copy-images",
"copy-theme-images",
"copy-images-plugins",
"copy-plugin-templates",
"copy-svg",
"copy-theme-svg",
"copy-extras"
]);
gulp.task("delete-tmp", function() {
del.sync(paths.tmp);
@ -464,7 +537,7 @@ gulp.task("express", function() {
//Rerun the task when a file changes
gulp.task("watch", function() {
gulp.watch(paths.jade, ["jade-watch"]);
gulp.watch(paths.sass, ["styles"]);
gulp.watch(paths.sass_watch, ["styles"]);
gulp.watch(paths.styles_dependencies, ["styles-dependencies"]);
gulp.watch(paths.svg, ["copy-svg"]);
gulp.watch(paths.coffee, ["app-watch"]);
@ -480,7 +553,7 @@ gulp.task("deploy", function(cb) {
"jade-deploy",
"app-deploy",
"jslibs-deploy",
"styles"
"compile-themes"
], cb);
});
//The default task (called when you run gulp from cli)

View File

@ -64,6 +64,7 @@
"karma-sinon": "^1.0.4",
"karma-sinon-chai": "^0.3.0",
"karma-sourcemap-loader": "^0.3.4",
"minimist": "^1.1.1",
"mocha": "^2.2.4",
"pre-commit": "^1.0.5",
"readable-stream": "~1.0.33",