Fixed Sass workflow in generator
diff --git a/views/ngXosLib/generator-xos/app/templates/gulp/build.js b/views/ngXosLib/generator-xos/app/templates/gulp/build.js
index 2861020..663a4cf 100644
--- a/views/ngXosLib/generator-xos/app/templates/gulp/build.js
+++ b/views/ngXosLib/generator-xos/app/templates/gulp/build.js
@@ -22,6 +22,10 @@
var inject = require('gulp-inject');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
const TEMPLATE_FOOTER = `
angular.module('xos.<%= name %>')
@@ -35,25 +39,14 @@
// delete previous builded file
gulp.task('clean', function(){
return del(
- [options.dashboards + 'xos<%= fileName %>.html'],
+ [
+ options.dashboards + 'xos<%= fileName %>.html',
+ options.static + 'css/xos<%= fileName %>.css'
+ ],
{force: true}
);
});
- // inject CSS
- gulp.task('injectCss', function(){
- return gulp.src(options.src + 'index.html')
- .pipe(
- inject(
- gulp.src(options.src + 'css/*.css'),
- {
- ignorePath: [options.src]
- }
- )
- )
- .pipe(gulp.dest(options.src));
- });
-
// minify css
gulp.task('css', function () {
var processors = [
@@ -71,7 +64,7 @@
});
// copy css in correct folder
- gulp.task('copyCss', ['css'], function(){
+ gulp.task('copyCss', ['wait'], function(){
return gulp.src([`${options.tmp}/css/*.css`])
.pipe(concat('xos<%= fileName %>.css'))
.pipe(gulp.dest(options.static + 'css/'))
@@ -102,7 +95,7 @@
});
// copy html index to Django Folder
- gulp.task('copyHtml', ['clean'], function(){
+ gulp.task('copyHtml', function(){
return gulp.src(options.src + 'index.html')
// remove dev dependencies from html
.pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
@@ -112,7 +105,8 @@
inject(
gulp.src([
options.static + 'js/vendor/xos<%= fileName %>Vendor.js',
- options.static + 'js/xos<%= fileName %>.js'
+ options.static + 'js/xos<%= fileName %>.js',
+ options.static + 'css/xos<%= fileName %>.css'
]),
{ignorePath: '/../../../xos/core/xoslib'}
)
@@ -146,13 +140,22 @@
.pipe(eslint.failAfterError());
});
+ gulp.task('wait', function (cb) {
+ // setTimeout could be any async task
+ setTimeout(function () {
+ cb();
+ }, 1000);
+ });
+
gulp.task('build', function() {
runSequence(
+ 'clean',
'templates',
'babel',
'scripts',
'wiredep',
- 'injectCss',
+ 'css',
+ 'copyCss',
'copyHtml',
'cleanTmp'
);
diff --git a/views/ngXosLib/generator-xos/app/templates/src/sass/main.scss b/views/ngXosLib/generator-xos/app/templates/src/sass/main.scss
index 3d8a1c1..6f8a791 100644
--- a/views/ngXosLib/generator-xos/app/templates/src/sass/main.scss
+++ b/views/ngXosLib/generator-xos/app/templates/src/sass/main.scss
@@ -1,3 +1,5 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
#xos<%=fileName%> {
}
\ No newline at end of file
diff --git a/views/ngXosViews/sampleView/gulp/build.js b/views/ngXosViews/sampleView/gulp/build.js
index 714f89f..36534fb 100644
--- a/views/ngXosViews/sampleView/gulp/build.js
+++ b/views/ngXosViews/sampleView/gulp/build.js
@@ -22,6 +22,10 @@
var inject = require('gulp-inject');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
const TEMPLATE_FOOTER = `
angular.module('xos.sampleView')
@@ -35,25 +39,14 @@
// delete previous builded file
gulp.task('clean', function(){
return del(
- [options.dashboards + 'xosSampleView.html'],
+ [
+ options.dashboards + 'xosSampleView.html',
+ options.static + 'css/xosSampleView.css'
+ ],
{force: true}
);
});
- // inject CSS
- gulp.task('injectCss', function(){
- return gulp.src(options.src + 'index.html')
- .pipe(
- inject(
- gulp.src(options.src + 'css/*.css'),
- {
- ignorePath: [options.src]
- }
- )
- )
- .pipe(gulp.dest(options.src));
- });
-
// minify css
gulp.task('css', function () {
var processors = [
@@ -71,7 +64,7 @@
});
// copy css in correct folder
- gulp.task('copyCss', ['css'], function(){
+ gulp.task('copyCss', ['wait'], function(){
return gulp.src([`${options.tmp}/css/*.css`])
.pipe(concat('xosSampleView.css'))
.pipe(gulp.dest(options.static + 'css/'))
@@ -102,7 +95,7 @@
});
// copy html index to Django Folder
- gulp.task('copyHtml', ['clean'], function(){
+ gulp.task('copyHtml', function(){
return gulp.src(options.src + 'index.html')
// remove dev dependencies from html
.pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
@@ -112,7 +105,8 @@
inject(
gulp.src([
options.static + 'js/vendor/xosSampleViewVendor.js',
- options.static + 'js/xosSampleView.js'
+ options.static + 'js/xosSampleView.js',
+ options.static + 'css/xosSampleView.css'
]),
{ignorePath: '/../../../xos/core/xoslib'}
)
@@ -146,13 +140,22 @@
.pipe(eslint.failAfterError());
});
+ gulp.task('wait', function (cb) {
+ // setTimeout could be any async task
+ setTimeout(function () {
+ cb();
+ }, 1000);
+ });
+
gulp.task('build', function() {
runSequence(
+ 'clean',
'templates',
'babel',
'scripts',
'wiredep',
- 'injectCss',
+ 'css',
+ 'copyCss',
'copyHtml',
'cleanTmp'
);
diff --git a/views/ngXosViews/sampleView/src/css/main.css b/views/ngXosViews/sampleView/src/css/main.css
new file mode 100644
index 0000000..afdeba7
--- /dev/null
+++ b/views/ngXosViews/sampleView/src/css/main.css
@@ -0,0 +1,2 @@
+#xosSampleView .row {
+ color: #d9534f; }
diff --git a/views/ngXosViews/sampleView/src/index.html b/views/ngXosViews/sampleView/src/index.html
index e6e5de7..a925a7e 100644
--- a/views/ngXosViews/sampleView/src/index.html
+++ b/views/ngXosViews/sampleView/src/index.html
@@ -1,7 +1,9 @@
<!-- browserSync -->
<!-- bower:css -->
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower --><!-- endcss -->
<!-- inject:css -->
+<link rel="stylesheet" href="/css/main.css">
<!-- endinject -->
<div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
@@ -9,6 +11,27 @@
</div>
<!-- bower:js -->
+<script src="vendor/jquery/dist/jquery.js"></script>
+<script src="vendor/angular/angular.js"></script>
+<script src="vendor/angular-mocks/angular-mocks.js"></script>
+<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="vendor/angular-cookies/angular-cookies.js"></script>
+<script src="vendor/angular-resource/angular-resource.js"></script>
+<script src="vendor/ng-lodash/build/ng-lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower --><!-- endjs -->
<!-- inject:js -->
+<script src="/xosHelpers/src/xosHelpers.module.js"></script>
+<script src="/xosHelpers/src/ui_components/table/table.component.js"></script>
+<script src="/xosHelpers/src/services/rest/vSG.js"></script>
+<script src="/xosHelpers/src/services/rest/vOLT.js"></script>
+<script src="/xosHelpers/src/services/rest/Users.js"></script>
+<script src="/xosHelpers/src/services/rest/Truckroll.js"></script>
+<script src="/xosHelpers/src/services/rest/Subscribers.js"></script>
+<script src="/xosHelpers/src/services/rest/ONOS-Services.js"></script>
+<script src="/xosHelpers/src/services/rest/ONOS-Apps.js"></script>
+<script src="/xosHelpers/src/ui_components/ui-components.module.js"></script>
+<script src="/xosHelpers/src/services/noHyperlinks.interceptor.js"></script>
+<script src="/xosHelpers/src/services/csrfToken.interceptor.js"></script>
+<script src="/.tmp/main.js"></script>
<!-- endinject -->
diff --git a/views/ngXosViews/sampleView/src/sass/main.scss b/views/ngXosViews/sampleView/src/sass/main.scss
index effdec4..76d5ce8 100644
--- a/views/ngXosViews/sampleView/src/sass/main.scss
+++ b/views/ngXosViews/sampleView/src/sass/main.scss
@@ -1,3 +1,7 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
#xosSampleView {
-
+ .row {
+ color: $brand-danger;
+ }
}
\ No newline at end of file
diff --git a/xos/core/xoslib/dashboards/xosSampleView.html b/xos/core/xoslib/dashboards/xosSampleView.html
index 64c6f80..6ebd9f3 100644
--- a/xos/core/xoslib/dashboards/xosSampleView.html
+++ b/xos/core/xoslib/dashboards/xosSampleView.html
@@ -1,6 +1,7 @@
<!-- browserSync -->
<!-- inject:css -->
+<link rel="stylesheet" href="/static/css/xosSampleView.css">
<!-- endinject -->
<div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
diff --git a/xos/core/xoslib/static/css/xosSampleView.css b/xos/core/xoslib/static/css/xosSampleView.css
new file mode 100644
index 0000000..1a67321
--- /dev/null
+++ b/xos/core/xoslib/static/css/xosSampleView.css
@@ -0,0 +1 @@
+#xosSampleView .row{color:#d9534f}
\ No newline at end of file