javascript.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. var gulp = require('gulp');
  2. var concat = require('gulp-concat');
  3. var webpackStream = require('webpack-stream');
  4. var webpack = require('webpack');
  5. var named = require('vinyl-named');
  6. var sourcemaps = require('gulp-sourcemaps');
  7. var utils = require('../utils.js');
  8. var CONFIG = require('../config.js');
  9. // ----- WEBPACK CONFIGURATION -----
  10. //
  11. // The following sets up all imports from within Foundation as externals, for the purpose
  12. // of replicating the "drop in dist file" approach of prior versions.
  13. // THIS IS NOT RECOMMENDED FOR MOST USERS. Chances are you either want everything
  14. // (just throw in foundation.js or foundation.min.js) or you should be using a build
  15. // system.
  16. //
  17. // Generate the webpack "Externals" configuration for UMD modules.
  18. // This tells webpack that the modules imported with the listed paths should not
  19. // be included in the build but will be provided later from an external source.
  20. //
  21. // `umdExternals` is used to generate the webpack "externals" configuration:
  22. // an object indicating to different module tools under which name our modules
  23. // are declared. "root" is the global variable name to use in module-less
  24. // environments (or in the namespace if given).
  25. //
  26. // See https://webpack.js.org/configuration/externals/#externals
  27. //
  28. var webpackExternalPlugins = Object.assign(
  29. // | Module import path | External source names and paths
  30. utils.umdExternals({
  31. 'jquery': { root: 'jQuery' },
  32. }),
  33. utils.umdExternals({
  34. './foundation.core': { root: 'foundation.core', default: './foundation.core' },
  35. './foundation.core.utils': { root: 'foundation.core', default: './foundation.core' },
  36. './foundation.core.plugin': { root: 'foundation.core', default: './foundation.core' },
  37. './foundation.util.imageLoader': { root: 'foundation.util.imageLoader' },
  38. './foundation.util.keyboard': { root: 'foundation.util.keyboard' },
  39. './foundation.util.mediaQuery': { root: 'foundation.util.mediaQuery' },
  40. './foundation.util.motion': { root: 'foundation.util.motion' },
  41. './foundation.util.nest': { root: 'foundation.util.nest' },
  42. './foundation.util.timer': { root: 'foundation.util.timer' },
  43. './foundation.util.touch': { root: 'foundation.util.touch' },
  44. './foundation.util.box': { root: 'foundation.util.box' },
  45. './foundation.dropdownMenu': { root: 'foundation.dropdownMenu' },
  46. './foundation.drilldown': { root: 'foundation.drilldown' },
  47. './foundation.accordionMenu': { root: 'foundation.accordionMenu' },
  48. './foundation.accordion': { root: 'foundation.accordion' },
  49. './foundation.tabs': { root: 'foundation.tabs' },
  50. './foundation.smoothScroll': { root: 'foundation.smoothScroll' },
  51. }, {
  52. // Search for the module in this global variable in module-less environments.
  53. namespace: CONFIG.JS_BUNDLE_NAMESPACE
  54. })
  55. );
  56. // The webpack "output" configuration for UMD modules.
  57. // Makes the modules being exported as UMD modules. In module-less environments,
  58. // modules will be stored in the global variable defined by JS_BUNDLE_NAMESPACE.
  59. var webpackOutputAsExternal = {
  60. library: [CONFIG.JS_BUNDLE_NAMESPACE, '[name]'],
  61. libraryTarget: 'umd',
  62. };
  63. var webpackConfig = {
  64. mode: 'development',
  65. externals: utils.umdExternals({
  66. // Use the global jQuery object "jQuery" in module-less environments.
  67. 'jquery': { root: 'jQuery' },
  68. }),
  69. module: {
  70. rules: [
  71. {
  72. test: /.js$/,
  73. use: [
  74. {
  75. loader: 'babel-loader'
  76. }
  77. ]
  78. }
  79. ]
  80. },
  81. output: {
  82. libraryTarget: 'umd',
  83. },
  84. // https://github.com/shama/webpack-stream#source-maps
  85. devtool: 'source-map',
  86. stats: {
  87. chunks: false,
  88. entrypoints: false,
  89. }
  90. }
  91. // ----- TASKS -----
  92. //
  93. // Compiles JavaScript into a single file
  94. gulp.task('javascript', gulp.series('javascript:foundation', 'javascript:deps', 'javascript:docs'));
  95. // Core has to be dealt with slightly differently due to bootstrapping externals
  96. // and the dependency on foundation.core.utils
  97. //
  98. gulp.task('javascript:plugin-core', function() {
  99. return gulp.src('js/entries/plugins/foundation.core.js')
  100. .pipe(named())
  101. .pipe(sourcemaps.init())
  102. .pipe(webpackStream(Object.assign({}, webpackConfig, {
  103. output: webpackOutputAsExternal,
  104. }), webpack))
  105. .pipe(sourcemaps.write('.'))
  106. .pipe(gulp.dest('_build/assets/js/plugins'));
  107. });
  108. gulp.task('javascript:plugins', gulp.series('javascript:plugin-core', function () {
  109. return gulp.src(['js/entries/plugins/*.js', '!js/entries/plugins/foundation.core.js'])
  110. .pipe(named())
  111. .pipe(sourcemaps.init())
  112. .pipe(webpackStream(Object.assign({}, webpackConfig, {
  113. externals: webpackExternalPlugins,
  114. output: webpackOutputAsExternal,
  115. }), webpack))
  116. .pipe(sourcemaps.write('.'))
  117. .pipe(gulp.dest('_build/assets/js/plugins'));
  118. }));
  119. gulp.task('javascript:foundation', gulp.series('javascript:plugins', function() {
  120. return gulp.src('js/entries/foundation.js')
  121. .pipe(named())
  122. .pipe(sourcemaps.init())
  123. .pipe(webpackStream(webpackConfig, webpack))
  124. .pipe(sourcemaps.write('.'))
  125. .pipe(gulp.dest('_build/assets/js'));
  126. }));
  127. gulp.task('javascript:deps', function() {
  128. return gulp.src(CONFIG.JS_DEPS)
  129. .pipe(concat('vendor.js'))
  130. .pipe(gulp.dest('_build/assets/js'));
  131. });
  132. gulp.task('javascript:docs', function() {
  133. return gulp.src(CONFIG.JS_DOCS)
  134. .pipe(concat('docs.js'))
  135. .pipe(gulp.dest('_build/assets/js'));
  136. });