diff --git a/README.md b/README.md index 99fd179..e2d7139 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ See some important folders bellow: ## Change skin -- Create an any scss file into: `app/layout/skins/` +- Create an any scss file into: `app/layout/scss/skins/` > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**. - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this: @@ -66,6 +66,14 @@ See some important folders bellow: ``` - Configure application to use the new theme, e.g.: `npm config set angular-theme:skin skin-mycustom` +OR add the default skin property to a specific `package.json` file (ONLY PERFORM A BUILD), like this: + +```json +"config": { + "skin": "skin-yellow" +} +``` + **N.B.** diff --git a/gulp/build.js b/gulp/build.js index 0b7424e..37737a2 100644 --- a/gulp/build.js +++ b/gulp/build.js @@ -154,4 +154,8 @@ gulp.task('noosfero', ['html'], function () { return merge(layouts, theme, index); }); -gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']); +gulp.task('inject-skin-build', ['html'], function () { + gulp.start('inject-skin'); +}); + +gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero', 'inject-skin-build']); diff --git a/gulp/conf.js b/gulp/conf.js index 7906f0f..9c416e7 100644 --- a/gulp/conf.js +++ b/gulp/conf.js @@ -9,7 +9,7 @@ var argv = require('minimist')(process.argv.slice(2)); var gutil = require('gulp-util'); var path = require('path'); -var fs = require('fs'); +var fs = require('fs-extra'); /** * The main paths of your project handle these with care @@ -25,6 +25,17 @@ exports.paths = { languages: 'languages' }; +exports.isBuild = function () { + if (!exports.building) { + exports.building = (argv._[0] == 'build' ? true : false); + } + return exports.building; +}; + +exports.isDefaultTheme = function (name) { + return /-default$/.test(name); +}; + /** * Check if theme folder exists on "themes" directory * @@ -45,13 +56,18 @@ exports.themeExists = function (path) { */ exports.skinExists = function (skin) { + //Skip skin verification on 'build' task + // if(exports.isBuild()){ + // return; + // } + var skinPath, prefixPath = ''; var skinFile = skin+'.scss'; if (/skin-/.test(skin)) { skinFile = skin.replace('skin-','_')+'.scss'; } - if (/-default$/.test(exports.paths.theme)) { + if (exports.isDefaultTheme(exports.paths.theme)) { prefixPath = exports.paths.src; }else { prefixPath = path.join(exports.paths.themes, exports.paths.theme); @@ -66,7 +82,7 @@ exports.skinExists = function (skin) { } var content = fs.readFileSync(skinPath, {encoding: 'utf8'}); - if(content.search(skin) == -1) { + if (content.search(skin) == -1) { throw new Error('The skin css selector ".'+skin+'" was not found in "'+skinPath+'" file'); }else if (content.search('@extend %skin-base') == -1) { throw new Error('The skin css selector ".'+skin+'" needs inherit from %skin-base sass placeholder'); @@ -81,15 +97,32 @@ exports.configTheme = function(theme) { exports.paths.allSources = [exports.paths.src, themePath]; - exports.themeExists(themePath); exports.paths.dist = path.join("dist", exports.paths.theme); - if(argv.skin) { + if(exports.isBuild() && !exports.isDefaultTheme(exports.paths.theme)){ + + try { + fs.statSync(path.join(themePath,'package.json')); + var themeData = fs.readJsonSync(path.join(themePath,'package.json')); + + if(!themeData.config || !themeData.config.skin) { + throw new Error('The theme "'+exports.paths.theme+'" needs a default skin on their package.json file'); + } + argv.skin = themeData.config.skin; + } catch (e) { + gutil.log(gutil.colors.yellow('[WARNING]','The package.json file was not found into theme:'), gutil.colors.cyan(exports.paths.theme)); + } + + } + + if(argv.skin && argv.skin != 'skin-whbl') { exports.skinExists(argv.skin); exports.paths.skin = argv.skin; } + + gutil.log('Configuring theme', gutil.colors.green(exports.paths.theme.toUpperCase())); } exports.configTheme(argv.theme); diff --git a/gulp/inject.js b/gulp/inject.js index 8e3c038..f3a82c4 100644 --- a/gulp/inject.js +++ b/gulp/inject.js @@ -57,7 +57,12 @@ gulp.task('inject-skin', function () { if(conf.paths.skin) { - $.util.log('Configured theme skin:', conf.paths.skin); + var jsPaths = { + src: path.join(conf.paths.src,'./noosfero.js'), + dest: conf.paths.src, + }; + + $.util.log('Configuring theme skin:', conf.paths.skin, '...'); var replaceSkin = transform(function(filename) { return map(function(file, next) { @@ -67,9 +72,14 @@ gulp.task('inject-skin', function () { }); }); - gulp.src(path.join(conf.paths.src,'./noosfero.js')) + if (conf.isBuild()) { + jsPaths.src = path.join(conf.paths.dist, 'scripts', 'app-*.js'); + jsPaths.dest = path.join(conf.paths.dist, 'scripts'); + } + + gulp.src(jsPaths.src) .pipe(replaceSkin) - .pipe(gulp.dest(conf.paths.src)); + .pipe(gulp.dest(jsPaths.dest)); } }); diff --git a/package.json b/package.json index 0a27944..b4b655a 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite", "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"", "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", - "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" + "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts", + "debug-gulp": "webpack; gulp clean; ./node_modules/.bin/iron-node node_modules/gulp/bin/gulp.js --theme=$npm_package_config_theme --skin=$npm_package_config_skin" }, "devDependencies": { "bower": "^1.7.7", @@ -39,6 +40,7 @@ "eslint-plugin-angular": "~0.12.0", "estraverse": "~4.1.0", "expose-loader": "^0.7.1", + "fs-extra": "^0.30.0", "glob": "^7.0.0", "gulp": "^3.9.1", "gulp-angular-filesort": "~1.1.1", @@ -69,6 +71,7 @@ "gulp-useref": "~1.3.0", "gulp-util": "~3.0.6", "http-proxy-middleware": "~0.9.0", + "iron-node": "^3.0.7", "istanbul": "^0.4.2", "karma": "~0.13.10", "karma-angular-filesort": "~1.0.0", diff --git a/themes/angular-participa-consulta/README.md b/themes/angular-participa-consulta/README.md index 425d17f..f4e9ed3 100644 --- a/themes/angular-participa-consulta/README.md +++ b/themes/angular-participa-consulta/README.md @@ -3,8 +3,25 @@ ## Getting started +**1. To use with `npm start` command** +> **PS:** To developer mode + Run these commands to set the proper theme and skin `npm config set angular-theme:theme angular-participa-consulta` `npm config set angular-theme:skin skin-yellow` + +**2. To generate a build** +> **PS:** Deploy to production + +* Create a specific `package.json` file into this directory +> Use the **`npm init`** command to create this file + +* Configure the **main** skin to this theme. Add the property `config['skin']` below: + +```json +"config": { + "skin": "skin-yellow" +} +``` diff --git a/themes/angular-participa-consulta/package.json b/themes/angular-participa-consulta/package.json new file mode 100644 index 0000000..25f5085 --- /dev/null +++ b/themes/angular-participa-consulta/package.json @@ -0,0 +1,14 @@ +{ + "name": "angular-participa-consulta", + "version": "1.0.0", + "description": "The theme for 'Consulta publica' community specific colors and UI changes", + "config": { + "theme": "angular-participa-consulta", + "skin": "skin-yellow" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} -- libgit2 0.21.2