Merge pull request #4 from MurhafSousli/dev

Include themes in dist

CHANGELOG.md

@@ -2,4 +2,10 @@
 
 ## 1.0.0
 
+ - feat(workflow): Compile themes sass to css for production
+ - include themes folder in dist
+ - improve movie rating styles, remove padding
+
+## 0.9.0
+
  - First release

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img height="150px" width="150px" style="text-align: center;" src="https://rawgit.com/MurhafSousli/ngx-bar-rating/master/assets/logo.svg">
+  <img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-bar-rating/af32c04d/assets/logo.svg">
   <h1 align="center">Angular Bar Rating</h1>
   <p align="center">Minimal, light-weight Angular ratings.</p>
 </p>
@@ -121,32 +121,57 @@ It can be used with angular forms and reactive forms, for example:
 
 Import rating theme using in the global style `style.css`
 
+
+ - Pure css stars (default) `[theme]="'fontawesome-o'"`
+
 ```css
-// Pure css stars (default)
-@import '~ngx-bar-rating/themes/br-default-theme';
+@import '~ngx-bar-rating/themes/br-default-theme'
+```
+
+ - Bootstrap stars `[theme]="'bootstrap'"`
 
-// Bootstrap stars
+```css
 @import '~ngx-bar-rating/themes/br-bootstrap-theme';
+```
+
+- Fontawesome stars `[theme]="'fontawesome'"`
 
-// Fontawesome stars
+```css
 @import '~ngx-bar-rating/themes/br-fontawesome-theme';
+```
+
+ - Fontawesome-o stars `[theme]="'fontawesome-o'"`
 
-// Fontawesome-o stars
+```css
 @import '~ngx-bar-rating/themes/br-fontawesome-o-theme';
+```
+
+ - Horizontal bars `[theme]="'horizontal'"`
 
-// Horizontal bars
+```css
 @import '~ngx-bar-rating/themes/br-horizontal-theme';
+```
+
+ - Vertical bars `[theme]="'vertical'"`
 
-// Vertical bars
+```css
 @import '~ngx-bar-rating/themes/br-vertical-theme';
+```
+
+ - Custom stars `[theme]="'custom-stars'"`
 
-// Custom svg stars
+```css
 @import '~ngx-bar-rating/themes/br-custom-stars-theme';
+```
 
-// Movie rating
+ - Movie rating `[theme]="'movie'"`
+```css
 @import '~ngx-bar-rating/themes/br-movie-theme';
+```
+
+ - Square rating `[theme]="'square'"`
 
-// Square rating
+```css
 @import '~ngx-bar-rating/themes/br-square-theme';
 ```
 

gulpfile.js

@@ -51,13 +51,17 @@ const gulpRollup = require('gulp-better-rollup');
 const rollupNodeResolve = require('rollup-plugin-node-resolve');
 const rollupUglify = require('rollup-plugin-uglify');
 
+/** To compile themes scss to css */
+const gulpSass = require('gulp-sass');
+
 
 const LIBRARY_NAME = 'ngx-bar-rating';
 
 const config = {
     allTs: 'src/**/!(*.spec).ts',
     allSass: 'src/**/*.scss',
     allHtml: 'src/**/*.html',
+    themes: 'src/themes/**/*.scss',
     demoDir: 'demo/',
     outputDir: 'dist/',
     coverageDir: 'coverage/'
@@ -296,9 +300,19 @@ gulp.task('watch', () => {
     gulp.watch([config.allTs, config.allHtml, config.allSass], ['compile']);
 });
 
+// Copy themes folder
+gulp.task('themes', () => {
+    const sassOptions = {
+        outputStyle: 'compressed'
+    };
+    gulp.src([config.themes])
+        .pipe(gulpSass(sassOptions))
+        .pipe(gulp.dest(`${config.outputDir}/themes`));
+});
+
 // Build the 'dist' folder (without publishing it to NPM)
 gulp.task('build', ['clean'], (cb) => {
-    runSequence('compile', 'package', 'bundle', cb);
+    runSequence('compile', 'package', 'bundle', 'themes', cb);
 });
 
 // Build and then Publish 'dist' folder to NPM

package.json

@@ -30,12 +30,11 @@
     "test": " gulp test"
   },
   "dependencies": {
-    "@angular/core": "4.0.0",
     "@angular/common": "4.0.0",
+    "@angular/core": "4.0.0",
     "@angular/forms": "4.0.0"
   },
   "devDependencies": {
-    "rxjs": "^5.4.0",
     "@angular/compiler": "4.0.0",
     "@angular/compiler-cli": "4.0.0",
     "@angular/platform-browser": "4.0.0",
@@ -56,6 +55,7 @@
     "gulp-coveralls": "^0.1.4",
     "gulp-file": "^0.3.0",
     "gulp-inline-ng2-template": "^4.0.0",
+    "gulp-sass": "^3.1.0",
     "gulp-tslint": "^7.1.0",
     "gulp-util": "^3.0.7",
     "html-loader": "^0.4.4",
@@ -69,24 +69,25 @@
     "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "2.0.1",
+    "node-sass": "^4.5.2",
     "null-loader": "^0.1.1",
+    "postcss": "^5.2.17",
     "postcss-scss": "^0.4.0",
     "postcss-strip-inline-comments": "^0.1.5",
     "pump": "^1.0.2",
     "raw-loader": "0.5.1",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "run-sequence": "^1.2.2",
+    "rxjs": "^5.4.0",
+    "sass-loader": "^6.0.3",
     "source-map-loader": "^0.1.5",
     "to-string-loader": "^1.1.5",
     "tslint": "^4.5.1",
     "typescript": "2.2.2",
     "webpack": "~2.4.1",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "~2.4.2",
-    "zone.js": "0.8.5",
-    "sass-loader": "^6.0.3",
-    "postcss": "^5.2.17",
-    "node-sass": "^4.5.2"
+    "zone.js": "0.8.5"
   }
 }