tailwindcss-minimal-setup/gulpfile.js at master · andyjamesn/tailwindcss-minimal-setup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
const { watch, series, src, dest } = require("gulp");
var concat = require("gulp-concat");
var browserSync = require("browser-sync").create();
var postcss = require("gulp-postcss");
// var svgcss = require("gulp-svg-css");
// var svgmin = require("gulp-svgmin");

// Task for compiling our CSS files using PostCSS
function cssTask(cb) {
  return src("./src/css/tailwind-entry.css") // read .css files from ./src/ folder
    .pipe(postcss()) // compile using postcss
    .pipe(concat("tailwind.css"))
    .pipe(dest("./dist/css")) // paste them in ./dist/css folder
    .pipe(dest("./src/css")) // paste them in ./dist/css folder
    .pipe(browserSync.stream());
  cb();
}

// Example outputting svgs to css - decided not to use anymore
// function svgCIBTask(cb) {
//   return src("./src/assets/svg/core-ui-brand/*.svg")
//     .pipe(svgmin())
//     .pipe(
//       svgcss({
//         fileName: "cib-icons",
//         cssPrefix: "cib-",
//         addSize: false,
//       })
//     )
//     .pipe(dest("./src/css"))
//     .pipe(dest("dist/css"));
//   cb();
// }

// Use to optomize svgs once off not part of build process
// Removes dimensions and adds wh-x class and fill currentcolor
// Icons added to iconjar
// const plugins = [
//   {
//     addClassesToSVGElement: {
//       className: "wh-6",
//     },
//   },
//   {
//     addAttributesToSVGElement: {
//       attributes: [{ fill: "currentColor" }],
//     },
//   },
//   {
//     removeDimensions: true,
//   },
//   { removeAttrs: { attrs: "data-name" } },
// ];

// function svgZWTask(cb) {
//   return src("./src/assets/svg/zwicons/**/*.svg")
//     .pipe(
//       svgmin({
//         plugins,
//       })
//     )

//     .pipe(dest("./src/assets/svg/optimized/zw-icons"));
//   cb();
// }

// function svgCIBTask(cb) {
//   return src("./src/assets/svg/core-ui-brand/*.svg")
//     .pipe(
//       svgmin({
//         plugins,
//       })
//     )
//     .pipe(dest("./src/assets/svg/optimized/core-ui-brand"));
//   cb();
// }

// function svgUniconsTask(cb) {
//   return src("./src/assets/svg/unicons-line/*.svg")
//     .pipe(
//       svgmin({
//         plugins,
//       })
//     )
//     .pipe(dest("./src/assets/svg/optimized/unicons-line"));
//   cb();
// }

function htmlTask(cb) {
  return src("./src/index.html") // read .css files from ./src/ folder
    .pipe(dest("./dist")); // paste them in ./dist/css folder
  cb();
}

function browsersyncServe(cb) {
  browserSync.init({
    server: {
      baseDir: "./src",
    },
  });
  cb();
}

function browsersyncReload(cb) {
  browserSync.reload();
  cb();
}

// Watch Files & Reload browser after tasks
function watchTask() {
  watch("./**/*.html", browsersyncReload);
  watch(["./src/*.css"], series(cssTask, browsersyncReload));
}

// Default Gulp Task
exports.default = series(cssTask, browsersyncServe, watchTask);
exports.css = cssTask;
exports.htmlTask = htmlTask;
// exports.svgZw = svgZWTask;
// exports.svgCib = svgCIBTask;
// exports.svgUnicons = svgUniconsTask;