gulpfile.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. const gulp = require('gulp');
  2. const connect = require('gulp-connect');
  3. const clean = require('gulp-clean');
  4. const less = require('gulp-less');
  5. const lessAutoprefix = require('less-plugin-autoprefix');
  6. const gulpStylelint = require('gulp-stylelint');
  7. const header = require('gulp-header');
  8. const cleanCSS = require('gulp-clean-css');
  9. const sourcemaps = require('gulp-sourcemaps');
  10. const rename = require('gulp-rename');
  11. const chalk = require('chalk');
  12. const fs = require('fs');
  13. const path = require('path');
  14. const autoprefix = new lessAutoprefix({
  15. browsers: ['IE 11', 'last 2 Safari versions', 'iOS 9.0', 'last 2 Chrome versions', 'Firefox ESR'],
  16. grid: 'no-autoplace'
  17. });
  18. //
  19. // Lint less files using stylelint
  20. //
  21. gulp.task('lint', function() {
  22. return gulp.src('./src/less/**/*.less')
  23. .pipe(gulpStylelint({
  24. failAfterError: true,
  25. reporters: [
  26. {formatter: 'string', console: true}
  27. ]
  28. }));
  29. });
  30. //
  31. // Build HTML demos
  32. //
  33. gulp.task('buildDemos', function() {
  34. return gulp.src(['./src/demo/**/*'])
  35. .pipe(gulp.dest('./build'));
  36. });
  37. //
  38. // Copy TinyMCE from modules/tinymce to the build folder.
  39. // NOTE. This task must be run after the buildDemos task
  40. //
  41. gulp.task('copyTinymce', function(done) {
  42. if (fs.existsSync('../tinymce/js/tinymce/tinymce.min.js')) {
  43. return gulp.src(['../tinymce/js/tinymce/**/*'], {
  44. base: '../tinymce/js/'
  45. })
  46. .pipe(gulp.dest('./build'));
  47. } else {
  48. console.log(chalk.red('Local TinyMCE does not exist. Using cloud version instead'));
  49. console.log(chalk.yellow('Run yarn build in the repository root to build a local version of TinyMCE'));
  50. const url = 'https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js';
  51. const html = fs.readFileSync('./build/index.html', 'utf8');
  52. fs.writeFileSync('./build/index.html', html.replace('/tinymce/tinymce.min.js', url));
  53. done();
  54. }
  55. });
  56. // Generate list of available skins and content css:es to populate select field in index.html
  57. const getDirs = (p) => fs.readdirSync(p).filter(f => fs.statSync(path.join(p, f)).isDirectory());
  58. gulp.task('buildSkinSwitcher', (done) => {
  59. const uiSkins = getDirs(`./build/skins/ui`);
  60. const contentSkins = getDirs(`./build/skins/content`);
  61. const data = `uiSkins = ${JSON.stringify(uiSkins)}, contentSkins = ${JSON.stringify(contentSkins)}`;
  62. const html = fs.readFileSync('./build/index.html', 'utf8');
  63. fs.writeFileSync('./build/index.html', html.replace('/** ADD_DATA */', data));
  64. done();
  65. });
  66. //
  67. // Build CSS
  68. //
  69. gulp.task('less', function() {
  70. return gulp.src('./src/less/skins/**/*.less')
  71. .pipe(less({
  72. relativeUrls: true,
  73. plugins: [autoprefix]
  74. }))
  75. .pipe(gulp.dest('./build/skins/'));
  76. });
  77. //
  78. // Minify CSS
  79. //
  80. gulp.task('minifyCss', function() {
  81. return gulp.src(['./build/skins/**/*.css', '!**/*.min.css'])
  82. .pipe(sourcemaps.init())
  83. .pipe(cleanCSS({ rebase: false }))
  84. .pipe(header(fs.readFileSync('src/text/license-header.css', 'utf8')))
  85. .pipe(rename({ extname: '.min.css' }))
  86. .pipe(sourcemaps.write('.'))
  87. .pipe(gulp.dest('./build/skins'))
  88. .pipe(connect.reload());
  89. });
  90. //
  91. // Copy icon font used by the mobile skin to each skin folder in /build
  92. //
  93. gulp.task('copyFonts', function() {
  94. let base = './build/skins/ui';
  95. return fs.readdirSync(base).reduce((stream, skin) => {
  96. return stream.pipe(gulp.dest(base + '/' + skin + '/fonts/'));
  97. }, gulp.src('./src/fonts/**'));
  98. });
  99. //
  100. // watch and rebuild CSS for Oxide demos
  101. //
  102. gulp.task('monitor', function (done) {
  103. connect.server({
  104. root: './build',
  105. port: 3000,
  106. livereload: true
  107. }, function () {
  108. this.server.on('close', done);
  109. });
  110. gulp.watch('./src/**/*').on('change', gulp.series('css', 'buildDemos', 'copyTinymce'));
  111. });
  112. //
  113. // clean builds
  114. //
  115. gulp.task('clean', function () {
  116. return gulp.src('./build', {
  117. read: false,
  118. allowEmpty: true
  119. })
  120. .pipe(clean());
  121. });
  122. //
  123. // Build project and watch LESS file changes
  124. //
  125. gulp.task('css', gulp.series('lint', 'less', 'minifyCss'));
  126. gulp.task('build', gulp.series('clean', 'css', 'copyFonts'));
  127. gulp.task('default', gulp.series('build'));
  128. gulp.task('demo-build', gulp.series('css', 'less', 'minifyCss', 'buildDemos', 'buildSkinSwitcher'));
  129. gulp.task('watch', gulp.series('build', 'buildDemos', 'copyTinymce', 'buildSkinSwitcher', 'monitor'));