Merge branch 'master' into staging

* master: Added skins support when release a BUILD on dist directory

Merge branch 'master' into staging
* master: Added skins support when release a BUILD on dist directory
Evandro Junior · Evandro Junior
2 parents 166d39f0 fb9fa79c
Showing 7 changed files with 100 additions and 11 deletions Show diff stats
README.md
gulp/build.js
gulp/conf.js
gulp/inject.js
package.json
themes/angular-participa-consulta/README.md
themes/angular-participa-consulta/package.json
@@ -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.**
@@ -154,4 +154,8 @@ gulp.task(&#39;noosfero&#39;, [&#39;html&#39;], 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']);
@@ -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);
@@ -57,7 +57,12 @@ gulp.task(&#39;inject-skin&#39;, 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(&#39;inject-skin&#39;, 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));
   }
 });
@@ -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",
@@ -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"
+}
+```
@@ -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"
+}
	@@ -154,4 +154,8 @@ gulp.task('noosfero', ['html'], function () {		@@ -154,4 +154,8 @@ gulp.task('noosfero', ['html'], function () {
154	return merge(layouts, theme, index);	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']);
	@@ -3,8 +3,25 @@		@@ -3,8 +3,25 @@
3		3
4	## Getting started	4	## Getting started
5		5
		6	+1. To use with `npm start` command
		7	+> PS: To developer mode
		8	+
6	Run these commands to set the proper theme and skin	9	Run these commands to set the proper theme and skin
7		10
8	`npm config set angular-theme:theme angular-participa-consulta`	11	`npm config set angular-theme:theme angular-participa-consulta`
9		12
10	`npm config set angular-theme:skin skin-yellow`	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	+```
@@ -0,0 +1,14 @@		@@ -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	+}