Need to fix styles return format

Author: dsymonov-jc

gulp-config.js

@@ -13,10 +13,10 @@ module.exports = {
     vendorJs: 'vendor.js',
     vendorJsMin: 'vendor.min.js',
     vendorJsTemp: 'vendor.temp.js',
-    mainScss: 'styles.scss',
-    mainScssMin: 'styles.min.css',
-    vendorScss: 'vendor.scss',
-    vendorScssMin: 'vendor.min.css',
+    mainStyles: 'styles.scss',
+    mainStylesMin: 'styles.min.css',
+    vendorStyles: 'vendor.scss',
+    vendorStylesMin: 'vendor.min.css',
   },
   buildHtml: {
     templates: 'src/html/templates',

gulpfile.js

@@ -93,7 +93,16 @@
   requireTask(`${cfg.task.buildHtml}`, `./${cfg.folder.tasks}/`, {
     templates: cfg.buildHtml.templates,
     dest: cfg.buildHtml.dest,
+    mainJs: cfg.file.mainJs,
+    mainJsMin: cfg.file.mainJsMin,
+    vendorJs: cfg.file.vendorJs,
+    vendorJsMin: cfg.file.vendorJsMin,
+    mainStyles: cfg.file.mainStyles,
+    mainStylesMin: cfg.file.mainStylesMin,
+    vendorStyles: cfg.file.vendorStyles,
+    vendorStylesMin: cfg.file.vendorStylesMin,
     error: cfg.error,
+    checkProduction: true,
   });
 
   /**
@@ -144,8 +153,8 @@
   requireTask(`${cfg.task.buildStyles}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
-    mainScss: cfg.file.mainScss,
-    mainScssMin: cfg.file.mainScssMin,
+    mainStyles: cfg.file.mainStyles,
+    mainStylesMin: cfg.file.mainStylesMin,
     sortType: cfg.buildStyles.sortType,
     error: cfg.error,
     checkProduction: true,
@@ -168,8 +177,8 @@
   requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
-    vendorScss: cfg.file.vendorScss,
-    vendorScssMin: cfg.file.vendorScssMin,
+    vendorStyles: cfg.file.vendorStyles,
+    vendorStylesMin: cfg.file.vendorStylesMin,
     error: cfg.error,
     checkProduction: true,
   });

src/html/partials/head/head.html

@@ -2,6 +2,6 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Starter Kit</title>
-  <link media="all" rel="stylesheet" href="css/vendor.min.css">
-  <link media="all" rel="stylesheet" href="css/styles.min.css">
-</head>
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@vendorStyles">
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@mainStyles">
+</head>

src/html/partials/scripts/common.html

@@ -1,2 +1,2 @@
-<script src="js/vendor.min.js" defer></script>
-<script src="js/app.min.js" defer></script>
+<script src="@@webRoot/js/@@vendorJs" defer></script>
+<script src="@@webRoot/js/@@mainJs" defer></script>

tasks/build-html.js

@@ -12,6 +12,12 @@ module.exports = function (options) {
     prefix: '@@',
     basepath: `./${options.templates}`,
     indent: true,
+    context: {
+      mainJs: options.isProduction ? options.mainJsMin : options.mainJs,
+      vendorJs: options.isProduction ? options.vendorJsMin : options.vendorJs,
+      mainStyles: options.isProduction ? options.mainStylesMin : options.mainStyles,
+      vendorStyles: options.isProduction ? options.vendorStylesMin : options.vendorStyles,
+    },
   };
 
   options.error.title = 'HTML compiling error';

tasks/build-js-vendors.js

@@ -28,14 +28,14 @@ module.exports = function (options) {
       return done();
     } else if (noneES6) {
       return gulp.src(filesExist(jsVendors.es5))
-        .pipe(concat(options.vendorJsMin))
+        .pipe(concat(options.isProduction ? options.vendorJsMin : options.vendorJs))
         .pipe(gulpif(options.isProduction, uglify()))
         .pipe(gulp.dest(`./${options.dest}/js`));
     } else if (noneES5) {
       return browserify({ entries: jsVendors.es6 })
         .transform('babelify', babelConfig)
         .bundle().on('error', notify.onError(options.error))
-        .pipe(source(options.vendorJsMin))
+        .pipe(source(options.isProduction ? options.vendorJsMin : options.vendorJs))
         .pipe(gulpif(options.isProduction, buffer()))
         .pipe(gulpif(options.isProduction, uglify()))
         .pipe(gulp.dest(`./${options.dest}/js`));
@@ -47,7 +47,7 @@ module.exports = function (options) {
         .pipe(gulp.dest(`./${options.temp}/js`))
         .on('end', () => {
           gulp.src(filesExist([...jsVendors.es5, `./${options.temp}/js/${options.vendorJsTemp}`]))
-            .pipe(concat(options.vendorJsMin))
+            .pipe(concat(options.isProduction ? options.vendorJsMin : options.vendorJs))
             .pipe(gulpif(options.isProduction, uglify()))
             .pipe(gulp.dest(`./${options.dest}/js`))
         });

tasks/build-js.js

@@ -24,7 +24,7 @@ module.exports = function (options) {
     })
       .transform('babelify', babelConfig)
       .bundle().on('error', notify.onError(options.error))
-      .pipe(source(options.mainJsMin))
+      .pipe(source(options.isProduction ? options.mainJsMin : options.mainJs))
       .pipe(gulpif(options.isProduction, buffer()))
       .pipe(gulpif(options.isProduction, uglify()))
       .pipe(gulp.dest(`./${options.dest}/js`));

tasks/build-styles-vendors.js

@@ -24,8 +24,8 @@ module.exports = function (options) {
 
   return () => {
     return gulp
-      .src(`./${options.src}/vendor_entries/${options.vendorScss}`)
-      .pipe(rename(options.vendorScssMin))
+      .src(`./${options.src}/vendor_entries/${options.vendorStyles}`)
+      .pipe(rename(options.isProduction ? options.vendorStylesMin : options.vendorStyles))
       .pipe(sass.sync())
       .on('error', notify.onError(options.error))
       .pipe(postcss(plugins))

tasks/build-styles.js

@@ -27,8 +27,8 @@ module.exports = function (options) {
   options.isProduction ? plugins.push(cssnano()) : false;
 
   return () => {
-    return gulp.src(`./${options.src}/scss/${options.mainScss}`)
-      .pipe(rename(options.mainScssMin))
+    return gulp.src(`./${options.src}/scss/${options.mainStyles}`)
+      .pipe(rename(options.isProduction ? options.mainStylesMin : options.mainStyles))
       .pipe(gulpif(!options.isProduction, sourcemaps.init({ loadMaps: true, })))
       .pipe(sass.sync({ sourceMap: !options.isProduction, }))
       .on('error', notify.onError(options.error))