Gulpfile.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. var gulp = require('gulp');
  2. var browserSync = require('browser-sync');
  3. var sass = require('gulp-sass');
  4. var rename = require('gulp-rename');
  5. var autoprefixer = require('gulp-autoprefixer');
  6. var sourcemaps = require('gulp-sourcemaps');
  7. var headerComment = require('gulp-header-comment');
  8. var gulpStylelint = require('gulp-stylelint');
  9. var stylefmt = require('gulp-stylefmt');
  10. let cleanCSS = require('gulp-clean-css');
  11. var gulpSequence = require('gulp-sequence')
  12. var del = require('del');
  13. var reload = browserSync.reload;
  14. module.exports = gulp;
  15. /* BROWSER SYNC */
  16. gulp.task('browser-sync', function () {
  17. browserSync({
  18. port: 3040,
  19. server: {
  20. baseDir: "./",
  21. directory: true
  22. },
  23. https: true
  24. });
  25. });
  26. /* BROWSER SYNC RELOAD */
  27. gulp.task('browser-sync-reload', function () {
  28. browserSync.reload();
  29. });
  30. /* LIST SCSS */
  31. gulp.task('lint:scss', function () {
  32. return gulp
  33. .src('src/**/*.scss')
  34. .pipe(gulpStylelint({
  35. reporters: [{
  36. formatter: 'string',
  37. console: true
  38. }]
  39. }));
  40. });
  41. /* COMPILE SCSS */
  42. gulp.task('compile:scss', function () {
  43. return gulp.src('src/**/*.scss')
  44. .pipe(sourcemaps.init())
  45. .pipe(sass({
  46. outputStyle: 'expanded'
  47. })
  48. .on('error', sass.logError))
  49. .pipe(autoprefixer({
  50. browsers: ['> 5%', 'last 4 versions'],
  51. cascade: false
  52. }))
  53. .pipe(sourcemaps.write('./maps'))
  54. .pipe(gulp.dest('dist'))
  55. .pipe(browserSync.reload({
  56. stream: true
  57. }));
  58. });
  59. /* FORMAT CSS */
  60. gulp.task('format:css', function () {
  61. return gulp.src('dist/*.css')
  62. .pipe(stylefmt())
  63. .pipe(gulp.dest('dist'));
  64. })
  65. /* CLEAN DIST */
  66. gulp.task('clean:dist', function () {
  67. return del(['dist']);
  68. });
  69. /* MINIFY CSS */
  70. gulp.task('minify:css', () => {
  71. return gulp.src('dist/*.css')
  72. .pipe(cleanCSS({
  73. compatibility: 'ie9'
  74. }))
  75. .pipe(rename({
  76. suffix: '.min'
  77. }))
  78. .pipe(gulp.dest('dist'));
  79. });
  80. /* SET HEADER */
  81. gulp.task('set:header', function () {
  82. return gulp.src('dist/*.css')
  83. .pipe(headerComment(`
  84. pretty-checkbox.css
  85. A pure CSS library to beautify checkbox and radio buttons
  86. Source: <%= pkg.repository.link %>
  87. Demo: <%= pkg.homepage %>
  88. Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %>
  89. `))
  90. .pipe(gulp.dest('dist'))
  91. });
  92. gulp.task('build', function (cb) {
  93. gulpSequence('lint:scss', 'clean:dist', 'compile:scss', 'format:css', 'minify:css', 'set:header', cb)
  94. });
  95. gulp.task('default', ['compile:scss', 'browser-sync'], function () {
  96. gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']);
  97. });