customizer.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. var addSrc = require('gulp-add-src');
  2. var cleancss = require('gulp-clean-css');
  3. var customizer = require('../../customizer/lib');
  4. var Vinyl = require('vinyl');
  5. var fs = require('fs');
  6. var gulp = require('gulp');
  7. var If = require('gulp-if');
  8. var path = require('path');
  9. var Readable = require('stream').Readable;
  10. var replace = require('gulp-replace');
  11. var rename = require('gulp-rename');
  12. var rimraf = require('rimraf');
  13. var sass = require('gulp-sass');
  14. var touch = require('touch');
  15. var uglify = require('gulp-uglify');
  16. var yaml = require('js-yaml').safeLoad;
  17. var yargs = require('yargs');
  18. var zip = require('gulp-zip');
  19. var postcss = require('gulp-postcss');
  20. var autoprefixer = require('autoprefixer');
  21. var webpackStream = require('webpack-stream');
  22. var webpack = require('webpack');
  23. var utils = require('../utils.js');
  24. var ARGS = yargs.argv;
  25. var FOUNDATION_VERSION = require('../../package.json').version;
  26. var OUTPUT_DIR = ARGS.output || 'custom-build';
  27. var CUSTOMIZER_CONFIG;
  28. var MODULE_LIST;
  29. var VARIABLE_LIST;
  30. var WEBPACK_CONFIG = {
  31. mode: 'development',
  32. externals: utils.umdExternals({
  33. 'jquery': 'jQuery'
  34. }),
  35. module: {
  36. rules: [
  37. {
  38. test: /.js$/,
  39. use: [
  40. {
  41. loader: 'babel-loader'
  42. }
  43. ]
  44. }
  45. ]
  46. },
  47. output: {
  48. libraryTarget: 'umd',
  49. }
  50. };
  51. // Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override
  52. gulp.task('customizer:loadConfig', function(done) {
  53. fs.readFile('customizer/config.yml', function(err, data) {
  54. var moduleListPath = ARGS.modules || '../../customizer/complete';
  55. var moduleList = require(moduleListPath);
  56. CUSTOMIZER_CONFIG = yaml(data.toString());
  57. MODULE_LIST = moduleList.modules;
  58. VARIABLE_LIST = moduleList.variables || {};
  59. done();
  60. });
  61. });
  62. // Prepare dependencies
  63. gulp.task('customizer:prepareSassDeps', function() {
  64. return gulp.src([
  65. 'node_modules/@(sassy-lists)/stylesheets/helpers/missing-dependencies',
  66. 'node_modules/@(sassy-lists)/stylesheets/helpers/true',
  67. 'node_modules/@(sassy-lists)/stylesheets/functions/contain',
  68. 'node_modules/@(sassy-lists)/stylesheets/functions/purge',
  69. 'node_modules/@(sassy-lists)/stylesheets/functions/remove',
  70. 'node_modules/@(sassy-lists)/stylesheets/functions/replace',
  71. 'node_modules/@(sassy-lists)/stylesheets/functions/to-list'
  72. ])
  73. .pipe(gulp.dest('_vendor'));
  74. });
  75. // Creates a Sass file from the module/variable list and creates foundation.css and foundation.min.css
  76. gulp.task('customizer:sass', gulp.series('customizer:loadConfig', 'customizer:prepareSassDeps', function() {
  77. var sassFile = customizer.sass(CUSTOMIZER_CONFIG, MODULE_LIST, VARIABLE_LIST);
  78. var stream = createStream('foundation.scss', sassFile);
  79. return stream
  80. .pipe(sass({
  81. includePaths: [
  82. 'scss',
  83. 'node_modules/motion-ui/src'
  84. ]
  85. }))
  86. .pipe(postcss([autoprefixer()])) // uses ".browserslistrc"
  87. .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css')))
  88. .pipe(cleancss({ compatibility: 'ie9' }))
  89. .pipe(rename('foundation.min.css'))
  90. .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css')))
  91. }));
  92. // Creates a Foundation JavaScript file from the module list, and also copies dependencies (jQuery, what-input)
  93. gulp.task('customizer:javascript-entry', gulp.series('customizer:loadConfig', function() {
  94. var entryFile = customizer.js(CUSTOMIZER_CONFIG, MODULE_LIST);
  95. // Create a stream with our entry file
  96. var stream = createStream('foundation.js', entryFile);
  97. return stream
  98. .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor')));
  99. }));
  100. gulp.task('customizer:javascript', gulp.series('customizer:javascript-entry', function() {
  101. return gulp.src(path.join(OUTPUT_DIR, 'js/vendor/foundation.js'))
  102. .pipe(webpackStream(WEBPACK_CONFIG, webpack))
  103. .pipe(rename('foundation.js'))
  104. .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor')))
  105. .pipe(uglify())
  106. .pipe(rename('foundation.min.js'))
  107. .pipe(addSrc([
  108. 'node_modules/jquery/dist/jquery.js',
  109. 'node_modules/what-input/dist/what-input.js'
  110. ]))
  111. .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor')));
  112. }));
  113. // Copies the boilerplate index.html to the custom download folder
  114. gulp.task('customizer:html', gulp.series('customizer:loadConfig', function() {
  115. var rtlEnabled = VARIABLE_LIST['global-text-direction'] && VARIABLE_LIST['global-text-direction'] === 'rtl';
  116. return gulp.src('customizer/index.html')
  117. .pipe(If(rtlEnabled, replace('ltr', 'rtl')))
  118. .pipe(gulp.dest(OUTPUT_DIR));
  119. }));
  120. // Add main CSS and JS files to the build directory and create a ZIP file from it.
  121. gulp.task('customizer:zip', function (done) {
  122. var outputFolder = path.dirname(OUTPUT_DIR);
  123. var outputFileName = path.basename(OUTPUT_DIR);
  124. touch(path.join(OUTPUT_DIR, 'css/app.css'));
  125. touch(path.join(OUTPUT_DIR, 'js/app.js'));
  126. fs.writeFileSync(path.join(OUTPUT_DIR, 'js/app.js'), '$(document).foundation()\n');
  127. return gulp.src(path.join(OUTPUT_DIR, '/**/*'))
  128. .pipe(zip(path.basename(outputFileName) + '.zip'))
  129. .pipe(gulp.dest(outputFolder));
  130. });
  131. // Clean the build directory
  132. gulp.task('customizer:clean', function(done) {
  133. rimraf(OUTPUT_DIR, done);
  134. });
  135. // Creates a custom build by:
  136. // - Generating a CSS file
  137. // - Generating a JS file
  138. // - Copying the index.html file
  139. // - Creating a blank app.css file
  140. // - Creating an app.js file with Foundation initialization code
  141. gulp.task('customizer', gulp.series('customizer:sass', 'customizer:javascript', 'customizer:html', 'customizer:zip', 'customizer:clean'));
  142. function createStream(name, content) {
  143. // Create a stream with our entry file
  144. var stream = new Readable({ objectMode: true });
  145. stream._read = function() {};
  146. stream.push(new Vinyl({
  147. path: name,
  148. contents: new Buffer(content)
  149. }));
  150. stream.push(null);
  151. return stream;
  152. }