Download as
Browse Code »

Commit 965b4c331c89affb0337e95812f33eeedaefce3b

Authored by Evandro Junior
2 parents a61cb0f5 a2cd2949
Exists in master and in 9 other branches cosmetic_changes_people_and_communities_block, forgot_password, layout_support, profile-blocks-sass, profile_description_block_component, recent-activities, staging, translations, users_profile_page

Merge branch 'skin-build-dist' into 'master' 

Skins - Build/deploy support

The first **_skins_** feature implementation doesn't works to `gulp build` tasks.
Now, this changes enables support to a specific **`package.json`** to subthemes, allowing a default skin (optionally) in each subtheme folder.

Added to some simple refactorys into `gulp/conf.js` file.

Example of the new **`package.json`** file of `angular-participa-consulta` subtheme:

``` javascript
{
  "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" //Here is the DEFAULT theme skin
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

```

These changes is related with merge !48 and fixes #96

See merge request !50
Showing 7 changed files with 96 additions and 12 deletions   Show diff stats
README.md
  Diff comments   View file @965b4c3
... ... @@ -53,7 +53,7 @@ See some important folders bellow:
53 53  
54 54 ## Change skin
55 55  
56   -- Create an any scss file into: `app/layout/skins/`
  56 +- Create an any scss file into: `app/layout/scss/skins/`
57 57 > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**.
58 58  
59 59 - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
... ... @@ -66,6 +66,14 @@ See some important folders bellow:
66 66 ```
67 67 - Configure application to use the new theme, e.g.:
68 68 `npm config set angular-theme:skin skin-mycustom`
  69 +OR add the default skin property to a specific `package.json` file (ONLY PERFORM A BUILD), like this:
  70 +
  71 +```json
  72 +"config": {
  73 + "skin": "skin-yellow"
  74 +}
  75 +```
  76 +
69 77  
70 78 **N.B.**
71 79  
... ...
gulp/build.js
  Diff comments   View file @965b4c3
... ... @@ -154,4 +154,8 @@ gulp.task('noosfero', ['html'], function () {
154 154 return merge(layouts, theme, index);
155 155 });
156 156  
157   -gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']);
  157 +gulp.task('inject-skin-build', ['html'], function () {
  158 + gulp.start('inject-skin');
  159 +});
  160 +
  161 +gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero', 'inject-skin-build']);
... ...
gulp/conf.js
  Diff comments   View file @965b4c3
... ... @@ -9,7 +9,7 @@
9 9 var argv = require('minimist')(process.argv.slice(2));
10 10 var gutil = require('gulp-util');
11 11 var path = require('path');
12   -var fs = require('fs');
  12 +var fs = require('fs-extra');
13 13  
14 14 /**
15 15 * The main paths of your project handle these with care
... ... @@ -25,6 +25,17 @@ exports.paths = {
25 25 languages: 'languages'
26 26 };
27 27  
  28 +exports.isBuild = function () {
  29 + if (!exports.building) {
  30 + exports.building = (argv._[0] == 'build' ? true : false);
  31 + }
  32 + return exports.building;
  33 +};
  34 +
  35 +exports.isDefaultTheme = function (name) {
  36 + return /-default$/.test(name);
  37 +};
  38 +
28 39 /**
29 40 * Check if theme folder exists on "themes" directory
30 41 *
... ... @@ -44,14 +55,14 @@ exports.themeExists = function (path) {
44 55 * @param skin The skin name passed by arg to gulp task
45 56 */
46 57 exports.skinExists = function (skin) {
47   -
  58 +
48 59 var skinPath, prefixPath = '';
49 60 var skinFile = skin+'.scss';
50 61 if (/skin-/.test(skin)) {
51 62 skinFile = skin.replace('skin-','_')+'.scss';
52 63 }
53 64  
54   - if (/-default$/.test(exports.paths.theme)) {
  65 + if (exports.isDefaultTheme(exports.paths.theme)) {
55 66 prefixPath = exports.paths.src;
56 67 }else {
57 68 prefixPath = path.join(exports.paths.themes, exports.paths.theme);
... ... @@ -66,7 +77,7 @@ exports.skinExists = function (skin) {
66 77 }
67 78  
68 79 var content = fs.readFileSync(skinPath, {encoding: 'utf8'});
69   - if(content.search(skin) == -1) {
  80 + if (content.search(skin) == -1) {
70 81 throw new Error('The skin css selector ".'+skin+'" was not found in "'+skinPath+'" file');
71 82 }else if (content.search('@extend %skin-base') == -1) {
72 83 throw new Error('The skin css selector ".'+skin+'" needs inherit from %skin-base sass placeholder');
... ... @@ -81,15 +92,32 @@ exports.configTheme = function(theme) {
81 92  
82 93 exports.paths.allSources = [exports.paths.src, themePath];
83 94  
84   -
85 95 exports.themeExists(themePath);
86 96 exports.paths.dist = path.join("dist", exports.paths.theme);
87 97  
88   - if(argv.skin) {
  98 + if(exports.isBuild() && !exports.isDefaultTheme(exports.paths.theme)){
  99 +
  100 + try {
  101 + fs.statSync(path.join(themePath,'package.json'));
  102 + var themeData = fs.readJsonSync(path.join(themePath,'package.json'));
  103 +
  104 + if(!themeData.config || !themeData.config.skin) {
  105 + throw new Error('The theme "'+exports.paths.theme+'" needs a default skin on their package.json file');
  106 + }
  107 + argv.skin = themeData.config.skin;
  108 + } catch (e) {
  109 + gutil.log(gutil.colors.yellow('[WARNING]','The package.json file was not found into theme:'), gutil.colors.cyan(exports.paths.theme));
  110 + }
  111 +
  112 + }
  113 +
  114 + if(argv.skin && argv.skin != 'skin-whbl') {
89 115 exports.skinExists(argv.skin);
90 116  
91 117 exports.paths.skin = argv.skin;
92 118 }
  119 +
  120 + gutil.log('Configuring theme', gutil.colors.green(exports.paths.theme.toUpperCase()));
93 121 }
94 122 exports.configTheme(argv.theme);
95 123  
... ...
gulp/inject.js
  Diff comments   View file @965b4c3
... ... @@ -57,7 +57,12 @@ gulp.task('inject-skin', function () {
57 57  
58 58 if(conf.paths.skin) {
59 59  
60   - $.util.log('Configured theme skin:', conf.paths.skin);
  60 + var jsPaths = {
  61 + src: path.join(conf.paths.src,'./noosfero.js'),
  62 + dest: conf.paths.src,
  63 + };
  64 +
  65 + $.util.log('Configuring theme skin:', conf.paths.skin, '...');
61 66  
62 67 var replaceSkin = transform(function(filename) {
63 68 return map(function(file, next) {
... ... @@ -67,9 +72,14 @@ gulp.task('inject-skin', function () {
67 72 });
68 73 });
69 74  
70   - gulp.src(path.join(conf.paths.src,'./noosfero.js'))
  75 + if (conf.isBuild()) {
  76 + jsPaths.src = path.join(conf.paths.dist, 'scripts', 'app-*.js');
  77 + jsPaths.dest = path.join(conf.paths.dist, 'scripts');
  78 + }
  79 +
  80 + gulp.src(jsPaths.src)
71 81 .pipe(replaceSkin)
72   - .pipe(gulp.dest(conf.paths.src));
  82 + .pipe(gulp.dest(jsPaths.dest));
73 83 }
74 84  
75 85 });
... ...
package.json
  Diff comments   View file @965b4c3
... ... @@ -26,7 +26,8 @@
26 26 "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite",
27 27 "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"",
28 28 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
29   - "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
  29 + "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts",
  30 + "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"
30 31 },
31 32 "devDependencies": {
32 33 "bower": "^1.7.7",
... ... @@ -39,6 +40,7 @@
39 40 "eslint-plugin-angular": "~0.12.0",
40 41 "estraverse": "~4.1.0",
41 42 "expose-loader": "^0.7.1",
  43 + "fs-extra": "^0.30.0",
42 44 "glob": "^7.0.0",
43 45 "gulp": "^3.9.1",
44 46 "gulp-angular-filesort": "~1.1.1",
... ... @@ -69,6 +71,7 @@
69 71 "gulp-useref": "~1.3.0",
70 72 "gulp-util": "~3.0.6",
71 73 "http-proxy-middleware": "~0.9.0",
  74 + "iron-node": "^3.0.7",
72 75 "istanbul": "^0.4.2",
73 76 "karma": "~0.13.10",
74 77 "karma-angular-filesort": "~1.0.0",
... ...
themes/angular-participa-consulta/README.md
  Diff comments   View file @965b4c3
... ... @@ -3,8 +3,25 @@
3 3  
4 4 ## Getting started
5 5  
  6 +**1. To use with `npm start` command**
  7 +> **PS:** To developer mode
  8 +
6 9 Run these commands to set the proper theme and skin
7 10  
8 11 `npm config set angular-theme:theme angular-participa-consulta`
9 12  
10 13 `npm config set angular-theme:skin skin-yellow`
  14 +
  15 +**2. To generate a build**
  16 +> **PS:** Deploy to production
  17 +
  18 +* Create a specific `package.json` file into this directory
  19 +> Use the **`npm init`** command to create this file
  20 +
  21 +* Configure the **main** skin to this theme. Add the property `config['skin']` below:
  22 +
  23 +```json
  24 +"config": {
  25 + "skin": "skin-yellow"
  26 +}
  27 +```
... ...
themes/angular-participa-consulta/package.json 0 → 100644
  Diff comments   View file @965b4c3
... ... @@ -0,0 +1,14 @@
  1 +{
  2 + "name": "angular-participa-consulta",
  3 + "version": "1.0.0",
  4 + "description": "The theme for 'Consulta publica' community specific colors and UI changes",
  5 + "config": {
  6 + "theme": "angular-participa-consulta",
  7 + "skin": "skin-yellow"
  8 + },
  9 + "scripts": {
  10 + "test": "echo \"Error: no test specified\" && exit 1"
  11 + },
  12 + "author": "",
  13 + "license": "ISC"
  14 +}
... ...