refactor(gulpfile): fixed gulpfile and paths (carbon-design-system#2140)

* refactor(gulpfile): fixed gulpfile and paths * refactor(gulpfile): fixed lint errors
jnm2377 · Jan 20, 2017 · 576aeb7 · 576aeb7
1 parent c2111c5
commit 576aeb7
Show file tree

Hide file tree

Showing 69 changed files with 320 additions and 404 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ demo/*.css
 demo/*.map
 demo/*.js
 !demo/index.js
+dist
 
 # OSX
 .DS_Store

diff --git a/demo/index.js b/demo/index.js
@@ -1,4 +1,4 @@
-export * from '../consumables/js/es2015';
+export * from '../index';
 import ThemeSwitcher from './js/theme-switcher';
 import DemoSwitcher from './js/demo-switcher';
 

diff --git a/demo/polyfills/array-from.js b/demo/polyfills/array-from.js
diff --git a/demo/polyfills/custom-event.js b/demo/polyfills/custom-event.js
diff --git a/demo/polyfills/element-matches.js b/demo/polyfills/element-matches.js
diff --git a/demo/polyfills/event-matches.js b/demo/polyfills/event-matches.js
diff --git a/demo/polyfills/math-sign.js b/demo/polyfills/math-sign.js
diff --git a/demo/polyfills/object-assign.js b/demo/polyfills/object-assign.js
diff --git a/demo/polyfills/toggle-class.js b/demo/polyfills/toggle-class.js
diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
@@ -1,10 +1,13 @@
-@import '../../globals/scss/styles';
+@import '../../src/globals/scss/styles';
 
 .demo--container {
   @include grid-container;
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   padding: 1rem;
+  margin-top: 5rem;
   transition: .2s;
   background-color: $color__navy-gray-2;
 
@@ -22,6 +25,7 @@
   }
 
   &.flex-row {
+    flex-direction: row;
     flex-wrap: wrap;
     margin: 0 auto;
 

diff --git a/demo/views/demo-all.dust b/demo/views/demo-all.dust
@@ -11,9 +11,7 @@
     }
   </style>
 </head>
-<body class="bx--body">
-  {header|s}
-  {detailHeader|s}
+<body class="bx--body bx--global-light-ui">
   <button class="bx--btn theme-switcher" data-theme-switcher>Theme Switcher</button>
   <div data-demo-switcher class="demo-switcher__container">
     <input id="flex-col" data-demo-col class="bx--radio" type="radio" value="col" name="radio">
@@ -34,8 +32,8 @@
   </div>
 
   <!-- Scripts -->
-  <!-- <script src="../bluemix-components.min.js"></script> -->
-  <script src="../demo.js"></script>
+  <!-- <script src="../../dist/bluemix-components.min.js"></script> -->
+  <script src="/demo.js"></script>
   <script src="/svgxuse/svgxuse.min.js"></script>
 
   </script>

diff --git a/demo/views/demo-es5.html b/demo/views/demo-es5.html
@@ -37,16 +37,10 @@
       <li class="bx--tabs__nav-item" data-target=".demo--panel--api-reference" role="presentation"><a id="tab-link-5" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-5" aria-selected="false">Subtab 5</a></li>
     </ul>
   </nav>
-  
+
 
   <!-- Scripts -->
   <!-- <script src="../bluemix-components.min.js"></script> -->
-  <script src="../../consumables/js/es5/bluemix-components.min.js"></script>
-  <!-- Disable Auto Init with this flag -->
-  <!-- true = JavaScript will not initialize automatically -->
-  <!-- false = JavaScript will initialize automatically -->
-  <script>
-    BluemixComponents.settings.disableAutoInit = false;
-  </script>
+  <script src="../../dist/bluemix-components.min.js"></script>
 </body>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -23,7 +23,6 @@ const babel = require('gulp-babel');
 const merge = require('merge-stream');
 const gutil = require('gulp-util');
 
-
 const Server = require('karma').Server;
 const cloptions = require('minimist')(process.argv.slice(2), {
   alias: {
@@ -52,12 +51,12 @@ gulp.task('browser-sync', () => {
 // Use: npm run prebuild
 gulp.task('clean', () => {
   return del([
-    'consumables/css/*.css',
-    'consumables/js/{es5,umd}/**/*.{js,map}',
+    'dist',
     'demo/**/*.{js,map}',
     '!demo/js/demo-switcher.js',
     '!demo/js/theme-switcher.js',
     '!demo/index.js',
+    '!demo/polyfills/*.js',
   ]);
 });
 
@@ -67,13 +66,12 @@ gulp.task('clean', () => {
 
 function buildScripts(options) {
   options = options || {};
-  options.target = (options.target || './consumables/js/es5/bluemix-components.js')
-    .replace(/\.js$/, options.excludePolyfills ? '-without-polyfills.js' : '.js')
+  options.target = (options.target || './dist/bluemix-components.js')
     .replace(/\.js$/, options.prod ? '.min.js' : '.js');
   return new Promise((resolve, reject) => {
     webpack({
       devtool: 'source-maps',
-      entry: options.entry || './consumables/js/es2015/index.js',
+      entry: options.entry || './index.js',
       output: Object.assign({
         path: path.dirname(options.target),
         filename: path.basename(options.target),
@@ -90,14 +88,6 @@ function buildScripts(options) {
           },
         ],
       },
-      externals: options.excludePolyfills ? {
-        '../polyfills/array-from': 'Array.from',
-        '../polyfills/custom-event': 'CustomEvent',
-        './element-matches': 'Element.matches',
-        '../polyfills/element-matches': 'Element.matches',
-        '../polyfills/math-sign': 'Math.sign',
-        '../polyfills/object-assign': 'Object.assign',
-      } : {},
       plugins: options.prod ? [new webpack.optimize.UglifyJsPlugin()] : [],
     }, (err, stats) => {
       if (err) {
@@ -113,39 +103,36 @@ function buildScripts(options) {
   });
 }
 
-gulp.task('scripts:consumables', () => {
-  return Promise.all([
-    buildScripts(), // Expanded ES5
-    buildScripts({ prod: true }), // Minified ES5
-    buildScripts({ excludePolyfills: true }), // Expanded ES5
-    buildScripts({ excludePolyfills: true, prod: true }), // Minified ES5
-  ]);
-});
 
 gulp.task('scripts:umd', () => {
-  const filesMain = './consumables/js/es2015/*.js';
-  const filesOthers = './consumables/js/{misc,polyfills}/**/*.js';
+  const filesMain = './src/components/**/*.js';
+  const filesOthers = './src/globals/js/**/*.js';
 
   const babelOpts = {
     plugins: ['transform-es2015-modules-umd', 'transform-runtime'],
   };
 
   const mainStream = gulp.src(filesMain)
     .pipe(babel(babelOpts))
-    .pipe(gulp.dest('./consumables/js/umd/lib'));
+    .pipe(gulp.dest('./dist/js/umd/lib'));
 
   const othersStream = gulp.src(filesOthers)
     .pipe(babel(babelOpts))
-    .pipe(gulp.dest('./consumables/js/umd'));
+    .pipe(gulp.dest('./dist/js/umd'));
 
   return merge(mainStream, othersStream);
 });
 
+gulp.task('scripts:consumables', () => {
+  return Promise.all([
+    buildScripts(), // Expanded ES5
+    buildScripts({ prod: true }), // Minified ES5
+  ]);
+});
 
 gulp.task('scripts:dev', () => {
   return Promise.all([
     buildScripts({
-      excludePolyfills: cloptions['exclude-polyfills'], // For testing "polyfills excluded" version
       target: './demo/demo.js',
       entry: './demo/index.js',
     }),
@@ -158,7 +145,7 @@ gulp.task('scripts:dev', () => {
 
 gulp.task('sass:consumables', () => {
   function buildStyles(prod) {
-    return gulp.src('globals/scss/styles.scss')
+    return gulp.src('src/globals/scss/styles.scss')
       .pipe(sourcemaps.init())
       .pipe(sass({
         outputStyle: prod ? 'compressed' : 'expanded',
@@ -175,7 +162,7 @@ gulp.task('sass:consumables', () => {
         }
       }))
       .pipe(sourcemaps.write())
-      .pipe(gulp.dest('consumables/css'))
+      .pipe(gulp.dest('dist'))
       .pipe(browserSync.stream());
   }
 
@@ -198,35 +185,13 @@ gulp.task('sass:dev', () => {
     .pipe(browserSync.stream());
 });
 
-// Temporary
-// gulp.task('sass:json', () => {
-//   const src = '_colors.scss';
-//   const dest = 'colors.json';
-//   const filePath = path.resolve(__dirname, `consumables/scss/global/colors/`);
-//   const colors = JSON.stringify(scssToJson(`${filePath}/${src}`), null, 2);
-//
-//   fs.writeFile(`${filePath}/${dest}`, colors, (err) => {
-//     if (err) return console.log(err);
-//     console.log('colors > colors.json!');
-//   });
-// });
-
 /////////////////////////////
 // Lint
 /////////////////////////////
 
-// Temporary: gulp-sass-lint does not seem to be using our .sass-lint.yml
-// gulp.task('lint:sass', () => {
-//   return gulp.src('consumables/**/*.scss')
-//     .pipe(sassLint())
-//     .pipe(sassLint.format())
-//     .pipe(sassLint.failOnError());
-// });
-
-gulp.task('lint:scripts', function () {
+gulp.task('lint', function () {
   return gulp.src([
-    'consumables/js/{es2015,misc,polyfills}/**/*.js',
-    '!**/examples/**/*.js',
+    'src/**/*.js'
   ])
     .pipe(eslint())
     .pipe(eslint.format())
@@ -242,8 +207,6 @@ gulp.task('lint:scripts', function () {
     }));
 });
 
-gulp.task('lint', [/*'lint:sass',*/ 'lint:scripts']);
-
 /////////////////////////////
 // Test
 /////////////////////////////
@@ -260,7 +223,7 @@ gulp.task('test', (done) => {
 /////////////////////////////
 
 gulp.task('jsdoc', function (cb) {
-  gulp.src('./consumables/js/{es2015,mixins}/**/*.js')
+  gulp.src('./src/components/**/*.js')
     .pipe(babel({
       plugins: ['transform-class-properties'],
       babelrc: false,
@@ -288,15 +251,15 @@ gulp.task('jsdoc', function (cb) {
 //////////////////////////////
 
 gulp.task('watch', () => {
-  gulp.watch('consumables/**/*.html').on('change', browserSync.reload);
-  gulp.watch(['consumables/js/{es2015,misc,polyfills}/**/*.js'], ['scripts:dev']);
-  gulp.watch(['consumables/**/*.scss', 'demo/**/*.scss'], ['sass:dev']);
+  gulp.watch('src/**/**/*.html').on('change', browserSync.reload);
+  gulp.watch(['src/**/**/*.js'], ['scripts:dev']);
+  gulp.watch(['src/**/**/*.scss', 'demo/**/*.scss'], ['sass:dev']);
 });
 
 gulp.task('serve', ['browser-sync', 'watch']);
 
 // Use: npm run build
-gulp.task('build', ['sass:consumables', 'scripts:consumables', 'scripts:umd']);
+gulp.task('build', ['sass:consumables', 'scripts:consumables']);
 gulp.task('build:dev', ['sass:dev', 'scripts:dev']);
 
 gulp.task('default', () => {

diff --git a/index.js b/index.js
@@ -96,24 +96,12 @@ export {
    */
   Modal,
 
-  /**
-   * Header with taxonomy menu.
-   * @type HeaderNav
-   */
-  HeaderNav,
-
   /**
    * Left Navigation Menu
    * @type LeftNav
    */
    LeftNav,
 
-  /**
-   * Search button in tool bar.
-   * @type Toolbars
-   */
-  Toolbars,
-
   /**
    * Spinner indicating loading state.
    * @type Loading
@@ -144,12 +132,6 @@ export {
    */
   ResponsiveTable,
 
-  /**
-   * Data table.
-   * @type Table
-   */
-  Table,
-
   /**
    * Detail page header.
    * @type DetailPageHeader
@@ -195,13 +177,11 @@ const init = () => {
     Tab.init();
     OverflowMenu.init();
     Modal.init();
-    Toolbars.init();
     Loading.init();
     Dropdown.init();
     Card.init();
     NumberInput.init();
     ResponsiveTable.init();
-    Table.init();
     DetailPageHeader.init();
     LeftNav.init();
     InlineLeftNav.init();