build-less.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
  2. /* eslint no-console: "off" */
  3. const gulp = require('gulp');
  4. const fs = require('fs');
  5. const modifyFile = require('gulp-modify-file');
  6. const less = require('gulp-less');
  7. const autoprefixer = require('gulp-autoprefixer');
  8. const header = require('gulp-header');
  9. const rename = require('gulp-rename');
  10. const cleanCSS = require('gulp-clean-css');
  11. const config = require('./build-config.js');
  12. const banner = require('./banner.js');
  13. function build(cb) {
  14. const env = process.env.NODE_ENV || 'development';
  15. const components = [];
  16. config.components.forEach((name) => {
  17. const lessFilePath = `./src/components/${name}/${name}.less`;
  18. if (fs.existsSync(lessFilePath)) {
  19. components.push(name);
  20. }
  21. });
  22. const colors = [];
  23. Object.keys(config.colors).forEach((key) => {
  24. colors.push(`${key} ${config.colors[key]}`);
  25. });
  26. gulp.src('./src/swiper.less')
  27. .pipe(modifyFile((content) => {
  28. const newContent = content
  29. .replace('//IMPORT_COMPONENTS', components.map(component => `@import url('./components/${component}/${component}.less');`).join('\n'))
  30. .replace('$themeColor', config.themeColor)
  31. .replace('$colors', colors.join(', '));
  32. return newContent;
  33. }))
  34. .pipe(less())
  35. .on('error', (err) => {
  36. if (cb) cb();
  37. console.error(err.toString());
  38. })
  39. .pipe(autoprefixer({
  40. cascade: false,
  41. }))
  42. .on('error', (err) => {
  43. if (cb) cb();
  44. console.error(err.toString());
  45. })
  46. .pipe(header(banner))
  47. .pipe(gulp.dest(`./${env === 'development' ? 'build' : 'dist'}/css/`))
  48. .on('end', () => {
  49. if (env === 'development') {
  50. if (cb) cb();
  51. return;
  52. }
  53. gulp.src('./dist/css/swiper.css')
  54. .pipe(cleanCSS({
  55. advanced: false,
  56. aggressiveMerging: false,
  57. }))
  58. .pipe(header(banner))
  59. .pipe(rename((filePath) => {
  60. /* eslint no-param-reassign: ["error", { "props": false }] */
  61. filePath.basename += '.min';
  62. }))
  63. .pipe(gulp.dest('./dist/css/'))
  64. .on('end', () => {
  65. if (cb) cb();
  66. });
  67. });
  68. }
  69. module.exports = build;