fix(authPages): add separeted gulp tasks for separated pages

gulp/inject.js

@@ -11,15 +11,15 @@ var _ = require('lodash');
 
 var browserSync = require('browser-sync');
 
-gulp.task('inject-reload', ['inject'], function() {
+gulp.task('inject-reload', ['inject'], function () {
   browserSync.reload();
 });
 
-gulp.task('inject', ['scripts', 'styles'], function () {
+gulp.task('inject', ['scripts', 'styles', 'injectAuth', 'inject404'], function () {
   var injectStyles = gulp.src([
-    path.join(conf.paths.tmp, '/serve/app/**/*.css'),
+    path.join(conf.paths.tmp, '/serve/app/main.css'),
     path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
-  ], { read: false });
+  ], {read: false});
 
   var injectScripts = gulp.src([
     path.join(conf.paths.src, '/assets/js/**/*.js'),
@@ -28,16 +28,46 @@ gulp.task('inject', ['scripts', 'styles'], function () {
     path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
     path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
   ])
-  /*.pipe($.angularFilesort())*/.on('error', conf.errorHandler('AngularFilesort'));
+    /*.pipe($.angularFilesort())*/.on('error', conf.errorHandler('AngularFilesort'));
 
   var injectOptions = {
     ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
     addRootSlash: false
   };
 
-  return gulp.src(path.join(conf.paths.src, '/*.html'))
+  return gulp.src(path.join(conf.paths.src, '/index.html'))
     .pipe($.inject(injectStyles, injectOptions))
     .pipe($.inject(injectScripts, injectOptions))
     .pipe(wiredep(_.extend({}, conf.wiredep)))
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
 });
+
+gulp.task('injectAuth', ['stylesAuth'], function () {
+  return injectAlone({
+    css: [path.join('!' + conf.paths.tmp, '/serve/app/vendor.css'), path.join(conf.paths.tmp, '/serve/app/auth.css')],
+    paths: [path.join(conf.paths.src, '/auth.html'), path.join(conf.paths.src, '/reg.html')]
+  })
+});
+
+gulp.task('inject404', ['styles404'], function () {
+  return injectAlone({
+    css: [path.join('!' + conf.paths.tmp, '/serve/app/vendor.css'), path.join(conf.paths.tmp, '/serve/app/404.css')],
+    paths: path.join(conf.paths.src, '/404.html')
+  })
+});
+
+var injectAlone = function (options) {
+  var injectStyles = gulp.src(
+    options.css
+    , {read: false});
+
+  var injectOptions = {
+    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
+    addRootSlash: false
+  };
+
+  return gulp.src(options.paths)
+    .pipe($.inject(injectStyles, injectOptions))
+    .pipe(wiredep(_.extend({}, conf.wiredep)))
+    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
+};

gulp/styles.js

@@ -11,27 +11,36 @@ var $ = require('gulp-load-plugins')();
 var wiredep = require('wiredep').stream;
 var _ = require('lodash');
 
-gulp.task('styles-reload', ['styles'], function() {
+gulp.task('styles-reload', ['styles'], function () {
   return buildStyles()
     .pipe(browserSync.stream());
 });
 
-gulp.task('styles', function() {
+gulp.task('styles', function () {
   return buildStyles();
 });
 
-var buildStyles = function() {
+gulp.task('stylesAuth', function () {
+  return buildAloneStyles(path.join(conf.paths.src, '/sass/auth.scss'));
+});
+gulp.task('styles404', function () {
+  return buildAloneStyles(path.join(conf.paths.src, '/sass/404.scss'));
+});
+
+var buildStyles = function () {
   var sassOptions = {
     style: 'expanded'
   };
 
   var injectFiles = gulp.src([
     path.join(conf.paths.src, '/sass/**/_*.scss'),
-    '!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss')
-  ], { read: false });
+    '!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss'),
+    '!' + path.join(conf.paths.src, '/sass/404.scss'),
+    '!' + path.join(conf.paths.src, '/sass/auth.scss')
+  ], {read: false});
 
   var injectOptions = {
-    transform: function(filePath) {
+    transform: function (filePath) {
       filePath = filePath.replace(conf.paths.src + '/sass/', '');
       return '@import "' + filePath + '";';
     },
@@ -51,3 +60,14 @@ var buildStyles = function() {
     .pipe($.sourcemaps.write())
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
 };
+
+var buildAloneStyles = function (paths) {
+  var sassOptions = {
+    style: 'expanded'
+  };
+
+  return gulp.src([paths])
+    .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
+    .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
+    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
+};

src/404.html

@@ -12,7 +12,11 @@
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
   <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
 
-  <link rel="stylesheet" href="css/404.min.css">
+  <!-- build:css({.tmp/serve,src}) styles/404.css -->
+  <!-- inject:css -->
+  <!-- css files will be automatically insert here -->
+  <!-- endinject -->
+  <!-- endbuild -->
 </head>
 <body>
 <div class="page-not-found-modal">

src/auth.html

@@ -12,7 +12,17 @@
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
   <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
 
-  <link rel="stylesheet" href="css/auth.min.css">
+  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
+  <!-- bower:css -->
+  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
+  <!-- endbower -->
+  <!-- endbuild -->
+
+  <!-- build:css({.tmp/serve,src}) styles/auth.css -->
+  <!-- inject:css -->
+  <!-- css files will be automatically insert here -->
+  <!-- endinject -->
+  <!-- endbuild -->
 </head>
 <body>
 <main class="auth-main">

src/reg.html

@@ -12,7 +12,17 @@
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
   <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
 
-  <link rel="stylesheet" href="css/auth.min.css">
+  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
+  <!-- bower:css -->
+  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
+  <!-- endbower -->
+  <!-- endbuild -->
+
+  <!-- build:css({.tmp/serve,src}) styles/auth.css -->
+  <!-- inject:css -->
+  <!-- css files will be automatically insert here -->
+  <!-- endinject -->
+  <!-- endbuild -->
 </head>
 <body>
 <main class="auth-main">

src/sass/404.scss

@@ -1,5 +1,4 @@
-@import "_variables.scss";
-@import "_mixins.scss";
+@import "common.scss";
 
 html {
   position: relative;

src/sass/auth.scss

@@ -1,5 +1,4 @@
-@import "theme/_variables.scss";
-@import "theme/_mixins.scss";
+@import "common.scss";
 @import "theme/_socicon.scss";
 @import "theme/_layout.scss";