styles.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import gulp from 'gulp';
  2. import config from '../config';
  3. import sass from 'gulp-sass';
  4. import plumber from 'gulp-plumber';
  5. import gulpif from 'gulp-if';
  6. import size from 'gulp-size';
  7. import stylelint from 'stylelint';
  8. import postcss from 'gulp-postcss';
  9. import syntaxScss from 'postcss-scss';
  10. import reporter from 'postcss-reporter';
  11. import notify from 'gulp-notify';
  12. import notifier from 'node-notifier';
  13. import header from 'gulp-header';
  14. import minify from 'gulp-clean-css';
  15. import rename from 'gulp-rename';
  16. import del from 'del';
  17. // STYLES
  18. // ------------------
  19. // lints styles using stylelint (config under 'stylelint' in package.json)
  20. gulp.task('lint:styles', () => {
  21. return gulp
  22. .src([`${config.styles.source}/**/*.scss`, `!${config.styles.source}/bootstrap/**/*.scss`, `!${config.styles.source}/mixins/**/*.scss`], {
  23. base: './',
  24. since: gulp.lastRun('lint:styles'),
  25. })
  26. .pipe(
  27. postcss(
  28. [
  29. stylelint({
  30. fix: true,
  31. syntax: 'scss',
  32. }), // see http://stylelint.io/user-guide/example-config/
  33. reporter({clearMessages: true, clearReportedMessages: true}),
  34. ],
  35. {syntax: syntaxScss}
  36. )
  37. )
  38. .pipe(gulp.dest('./'));
  39. });
  40. // Compiles sass into css & minifies it (production)
  41. gulp.task('make:styles', () => {
  42. return gulp
  43. .src(`${config.styles.source}/*.scss`)
  44. .pipe(
  45. plumber({errorHandler: notify.onError('Error: <%= error.message %>')})
  46. )
  47. .pipe(
  48. sass({
  49. precision: 10, // https://github.com/sass/sass/issues/1122
  50. includePaths: config.styles.include,
  51. })
  52. )
  53. .pipe(postcss())
  54. .pipe(gulpif(config.production, header(config.banner)))
  55. .pipe(size({gzip: true, showFiles: true}))
  56. .pipe(gulp.dest(`${config.styles.build}`))
  57. .pipe(minify())
  58. .pipe(rename({
  59. extname: '.min.css'
  60. }))
  61. .pipe(size({gzip: true, showFiles: true}))
  62. .pipe(plumber.stop())
  63. .pipe(gulp.dest(`${config.styles.build}`));
  64. });
  65. gulp.task(
  66. 'styles',
  67. gulp.series('lint:styles', 'make:styles', (done) => {
  68. if (config.enable.notify) {
  69. notifier.notify({
  70. title: config.notify.title,
  71. message: 'Styles task complete',
  72. });
  73. }
  74. done();
  75. })
  76. );
  77. // Clean styles files
  78. gulp.task('clean:styles', (done) => {
  79. return del([`${config.styles.build}/**/*`]).then(() => {
  80. if (config.enable.notify) {
  81. notifier.notify({
  82. title: config.notify.title,
  83. message: 'Clean styles task complete',
  84. });
  85. }
  86. done();
  87. });
  88. });