Merge pull request #674 from uswds/dw-modular-build

Use a more modular build and compile process

_config.yml

@@ -78,3 +78,5 @@ exclude:
   - gulpfile.js
   - circle.yml
   - css
+
+env: dev

_includes/head.html

@@ -38,4 +38,14 @@
 
 <!-- CSS
 ================================================== -->
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styleguide.css">
+<!-- env: {{ site.env }} -->
+
+{% if site.env == 'dev' %}
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-fonts.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-components.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-layout-grid.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-custom.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-utilities.css">
+{% else %}
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css">
+{% endif %}

config/gulp/sass.js

@@ -1,5 +1,6 @@
 var autoprefixer  = require('autoprefixer');
 var combineMq     = require('gulp-combine-mq');
+var concat        = require('gulp-concat');
 var cssnano       = require('cssnano');
 var dutil         = require('./doc-util');
 var gulp          = require('gulp');
@@ -11,17 +12,75 @@ var sourcemaps    = require('gulp-sourcemaps');
 var strip         = require('gulp-strip-css-comments');
 var task          = 'sass';
 
-gulp.task('build-sass', function () {
-  var plugins = [
-    autoprefixer({ browsers: ['> 1%','Last 2 versions','IE 11'], cascade: false, }),
-    packCSS({ sort: true }),
-    cssnano({ autoprefixer: { browsers: '> 1%, Last 2 versions, IE 11' }})
-  ];
-  return gulp.src('./css/**/*.scss')
+var dev_plugins = [
+  autoprefixer({ browsers: ['> 1%','Last 2 versions','IE 11'], cascade: false, }),
+  packCSS({ sort: true })
+];
+
+var prod_plugins = [
+  packCSS({ sort: true }),
+  cssnano({ autoprefixer: { browsers: '> 1%, Last 2 versions, IE 11' }})
+];
+
+gulp.task('build-sass-fonts', function () {
+  return gulp.src('./css/uswds-fonts.scss')
+    .pipe(sourcemaps.init({largeFile: true}))
+    .pipe(
+      sass({
+        includePaths: [
+          './node_modules/uswds/dist/scss',
+          './css/settings',
+        ],
+        outputStyle: 'expanded',
+      })
+        .on('error', function(error) {
+          sass.logError.bind(this)(error);
+
+          if (process.env.NODE_ENV !== 'development') {
+            process.exit(1);
+          }
+        })
+    )
+    .pipe(postcss(dev_plugins))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('assets/css'))
+    .pipe(gulp.dest('_site/assets/css'))
+});
+
+gulp.task('build-sass-components', function () {
+  return gulp.src('./css/uswds-components.scss')
+    .pipe(sourcemaps.init({largeFile: true}))
+    .pipe(
+      sass({
+        includePaths: [
+          './node_modules/uswds/dist/scss',
+          './css/settings',
+        ],
+        outputStyle: 'expanded',
+      })
+        .on('error', function(error) {
+          sass.logError.bind(this)(error);
+
+          if (process.env.NODE_ENV !== 'development') {
+            process.exit(1);
+          }
+        })
+    )
+    .pipe(postcss(dev_plugins))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('assets/css'))
+    .pipe(gulp.dest('_site/assets/css'))
+});
+
+gulp.task('build-sass-layout-grid', function () {
+  return gulp.src('./css/uswds-layout-grid.scss')
     .pipe(sourcemaps.init({largeFile: true}))
     .pipe(
       sass({
-        includePaths: [ './node_modules/uswds/dist/scss' ],
+        includePaths: [
+          './node_modules/uswds/dist/scss',
+          './css/settings',
+        ],
         outputStyle: 'expanded',
       })
         .on('error', function(error) {
@@ -32,12 +91,98 @@ gulp.task('build-sass', function () {
           }
         })
     )
-    .pipe(postcss(plugins))
+    .pipe(postcss(dev_plugins))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('assets/css'))
     .pipe(gulp.dest('_site/assets/css'))
 });
 
+gulp.task('build-sass-custom', function () {
+  return gulp.src('./css/uswds-custom.scss')
+    .pipe(sourcemaps.init({largeFile: true}))
+    .pipe(
+      sass({
+        includePaths: [
+          './node_modules/uswds/dist/scss',
+          './css/settings',
+        ],
+        outputStyle: 'expanded',
+      })
+        .on('error', function(error) {
+          sass.logError.bind(this)(error);
+
+          if (process.env.NODE_ENV !== 'development') {
+            process.exit(1);
+          }
+        })
+    )
+    .pipe(postcss(dev_plugins))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('assets/css'))
+    .pipe(gulp.dest('_site/assets/css'))
+});
+
+gulp.task('build-sass-utilities', function () {
+  return gulp.src('./css/uswds-utilities.scss')
+    .pipe(sourcemaps.init({largeFile: true}))
+    .pipe(
+      sass({
+        includePaths: [
+          './node_modules/uswds/dist/scss',
+          './css/settings',
+        ],
+        outputStyle: 'expanded',
+      })
+        .on('error', function(error) {
+          sass.logError.bind(this)(error);
+
+          if (process.env.NODE_ENV !== 'development') {
+            process.exit(1);
+          }
+        })
+    )
+    .pipe(postcss(dev_plugins))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('assets/css'))
+    .pipe(gulp.dest('_site/assets/css'))
+});
+
+gulp.task('build-sass-dev',
+  gulp.parallel(
+    'build-sass-fonts',
+    'build-sass-components',
+    'build-sass-layout-grid',
+    'build-sass-custom',
+    'build-sass-utilities',
+  )
+);
+
+gulp.task('build-sass-prod', function () {
+  return gulp.src([
+    './assets/css/uswds-fonts.css',
+    './assets/css/uswds-components.css',
+    './assets/css/uswds-layout-grid.css',
+    './assets/css/uswds-custom.css',
+    './assets/css/uswds-utilities.css'
+  ])
+    .pipe(sourcemaps.init({
+        largeFile: true,
+        loadMaps: true
+      }))
+    .pipe(concat('styles.css'))
+    .pipe(postcss(prod_plugins))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('assets/css'))
+    .pipe(gulp.dest('_site/assets/css'))
+});
+
+gulp.task('build-sass',
+  gulp.series(
+    'build-sass-dev',
+    'build-sass-prod'
+  )
+);
+
 gulp.task('scss-lint', function (done) {
   if (!cFlags.test) {
     dutil.logMessage('scss-lint', 'Skipping linting of Sass files.');

css/styleguide.scss → css/uswds-components.scss

@@ -1,9 +1,7 @@
-// Imports
 @import 'variables';
 @import 'uswds-theme-general';
 @import 'uswds-theme-typography';
 @import 'uswds-theme-spacing';
 @import 'uswds-theme-color';
 @import 'uswds-theme-utilities';
-@import 'uswds';
-@import 'uswds-theme-custom-styles';
+@import 'packages/uswds-components';

css/uswds-custom.scss

@@ -0,0 +1,33 @@
+// Imports
+@import 'variables';
+@import 'uswds-theme-general';
+@import 'uswds-theme-typography';
+@import 'uswds-theme-spacing';
+@import 'uswds-theme-color';
+@import 'uswds-theme-utilities';
+
+// Settings
+// -------------------------------------
+@import 'settings/settings-general';
+@import 'settings/settings-typography';
+@import 'settings/settings-color';
+@import 'settings/settings-spacing';
+@import 'settings/settings-utilities';
+@import 'settings/settings-components';
+
+// Tools
+// -------------------------------------
+@import 'core/font-definitions';
+@import 'core/functions';
+@import 'core/system-tokens';
+@import 'core/variables';
+@import 'core/properties';
+@import 'core/mixins/all';
+
+// Generic
+// -------------------------------------
+@import 'core/font-face';
+@import 'lib/normalize';
+@import 'core/base';
+
+@import 'uswds-theme-custom-styles';

css/uswds-fonts.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+@import 'uswds-theme-general';
+@import 'uswds-theme-typography';
+@import 'uswds-theme-spacing';
+@import 'uswds-theme-color';
+@import 'uswds-theme-utilities';
+@import 'packages/uswds-fonts';

css/uswds-layout-grid.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+@import 'uswds-theme-general';
+@import 'uswds-theme-typography';
+@import 'uswds-theme-spacing';
+@import 'uswds-theme-color';
+@import 'uswds-theme-utilities';
+@import 'packages/uswds-layout-grid';

css/uswds-utilities.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+@import 'uswds-theme-general';
+@import 'uswds-theme-typography';
+@import 'uswds-theme-spacing';
+@import 'uswds-theme-color';
+@import 'uswds-theme-utilities';
+@import 'packages/uswds-utilities';