{"id":597,"date":"2021-04-14T18:19:33","date_gmt":"2021-04-14T10:19:33","guid":{"rendered":"http:\/\/blog.viter.top\/?p=597"},"modified":"2021-07-09T10:26:04","modified_gmt":"2021-07-09T02:26:04","slug":"gulp%e4%b8%ad%e5%bc%95%e5%85%a5tailwindcss","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2021\/04\/14\/gulp%e4%b8%ad%e5%bc%95%e5%85%a5tailwindcss\/","title":{"rendered":"gulp\u4e2d\u5f15\u5165tailwindcss"},"content":{"rendered":"\n<p>gulpfile.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nconst { src, dest, task, watch, series, parallel } = require('gulp');\nconst del = require('del'); \/\/For Cleaning build\/dist for fresh export\nconst options = require(\".\/config\"); \/\/paths and other options from config.js\nconst browserSync = require('browser-sync').create();\n\nconst sass = require('gulp-sass'); \/\/For Compiling SASS files\nconst postcss = require('gulp-postcss'); \/\/For Compiling tailwind utilities with tailwind config\nconst concat = require('gulp-concat'); \/\/For Concatinating js,css files\nconst uglify = require('gulp-terser');\/\/To Minify JS files\nconst imagemin = require('gulp-imagemin'); \/\/To Optimize Images\nconst cleanCSS = require('gulp-clean-css');\/\/To Minify CSS files\nconst purgecss = require('gulp-purgecss');\/\/ Remove Unused CSS from Styles\n\n\/\/Note : Webp still not supported in major browsers including forefox\n\/\/const webp = require('gulp-webp'); \/\/For converting images to WebP format\n\/\/const replace = require('gulp-replace'); \/\/For Replacing img formats to webp in html\nconst logSymbols = require('log-symbols'); \/\/For Symbolic Console logs :) :P \n\n\/\/Load Previews on Browser on dev\nfunction livePreview(done){\n  browserSync.init({\n    server: {\n      baseDir: options.paths.dist.base\n    },\n    port: options.config.port || 5000\n  });\n  done();\n} \n\n\/\/ Triggers Browser reload\nfunction previewReload(done){\n  console.log(\"\\n\\t\" + logSymbols.info,\"Reloading Browser Preview.\\n\");\n  browserSync.reload();\n  done();\n}\n\n\/\/Development Tasks\nfunction devHTML(){\n  return src(`${options.paths.src.base}\/**\/*.html`).pipe(dest(options.paths.dist.base));\n} \n\nfunction devStyles(){\n  const tailwindcss = require('tailwindcss'); \n  return src(`${options.paths.src.css}\/**\/*.scss`).pipe(sass().on('error', sass.logError))\n    .pipe(dest(options.paths.src.css))\n    .pipe(postcss(&#91;\n      tailwindcss(options.config.tailwindjs),\n      require('autoprefixer'),\n    ]))\n    .pipe(concat({ path: 'style.css'}))\n    .pipe(dest(options.paths.dist.css));\n}\n\nfunction devScripts(){\n  return src(&#91;\n    `${options.paths.src.js}\/libs\/**\/*.js`,\n    `${options.paths.src.js}\/**\/*.js`,\n    `!${options.paths.src.js}\/**\/external\/*`\n  ]).pipe(concat({ path: 'scripts.js'})).pipe(dest(options.paths.dist.js));\n}\n\nfunction devImages(){\n  return src(`${options.paths.src.img}\/**\/*`).pipe(dest(options.paths.dist.img));\n}\n\nfunction watchFiles(){\n  watch(`${options.paths.src.base}\/**\/*.html`,series(devHTML, devStyles, previewReload));\n  watch(&#91;options.config.tailwindjs, `${options.paths.src.css}\/**\/*.scss`],series(devStyles, previewReload));\n  watch(`${options.paths.src.js}\/**\/*.js`,series(devScripts, previewReload));\n  watch(`${options.paths.src.img}\/**\/*`,series(devImages, previewReload));\n  console.log(\"\\n\\t\" + logSymbols.info,\"Watching for Changes..\\n\");\n}\n\nfunction devClean(){\n  console.log(\"\\n\\t\" + logSymbols.info,\"Cleaning dist folder for fresh start.\\n\");\n  return del(&#91;options.paths.dist.base]);\n}\n\n\/\/Production Tasks (Optimized Build for Live\/Production Sites)\nfunction prodHTML(){\n  return src(`${options.paths.src.base}\/**\/*.html`).pipe(dest(options.paths.build.base));\n}\n\nfunction prodStyles(){\n  return src(`${options.paths.dist.css}\/**\/*`)\n  .pipe(purgecss({\n    content: &#91;'src\/**\/*.{html,js}'],\n    defaultExtractor: content =&gt; {\n      const broadMatches = content.match(\/&#91;^&lt;&gt;\"'`\\s]*&#91;^&lt;&gt;\"'`\\s:]\/g) || &#91;]\n      const innerMatches = content.match(\/&#91;^&lt;&gt;\"'`\\s.()]*&#91;^&lt;&gt;\"'`\\s.():]\/g) || &#91;]\n      return broadMatches.concat(innerMatches)\n    }\n  }))\n  .pipe(cleanCSS({compatibility: 'ie8'}))\n  .pipe(dest(options.paths.build.css));\n}\n\nfunction prodScripts(){\n  return src(&#91;\n    `${options.paths.src.js}\/libs\/**\/*.js`,\n    `${options.paths.src.js}\/**\/*.js`\n  ])\n  .pipe(concat({ path: 'scripts.js'}))\n  .pipe(uglify())\n  .pipe(dest(options.paths.build.js));\n}\n\nfunction prodImages(){\n  return src(options.paths.src.img + '\/**\/*').pipe(imagemin()).pipe(dest(options.paths.build.img));\n}\n\nfunction prodClean(){\n  console.log(\"\\n\\t\" + logSymbols.info,\"Cleaning build folder for fresh start.\\n\");\n  return del(&#91;options.paths.build.base]);\n}\n\nfunction buildFinish(done){\n  console.log(\"\\n\\t\" + logSymbols.info,`Production build is complete. Files are located at ${options.paths.build.base}\\n`);\n  done();\n}\n\nexports.default = series(\n  devClean, \/\/ Clean Dist Folder\n  parallel(devStyles, devScripts, devImages, devHTML), \/\/Run All tasks in parallel\n  livePreview, \/\/ Live Preview Build\n  watchFiles \/\/ Watch for Live Changes\n);\n\nexports.prod = series(\n  prodClean, \/\/ Clean Build Folder\n  parallel(prodStyles, prodScripts, prodImages, prodHTML), \/\/Run All tasks in parallel\n  buildFinish\n);<\/code><\/pre>\n\n\n\n<p>package.json<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"gulp-with-tailwindcss\",\n  \"version\": \"1.2.0\",\n  \"description\": \"TailwindCSS StarterKit with Gulp 4\",\n  \"main\": \"gulpfile.js\",\n  \"dependencies\": {\n    \"node-sass\": \"^5.0.0\",\n    \"postcss\": \"^8.2.9\",\n    \"tailwindcss\": \"^2.1.1\"\n  },\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.2.5\",\n    \"browser-sync\": \"^2.26.14\",\n    \"del\": \"^6.0.0\",\n    \"gulp\": \"^4.0.2\",\n    \"gulp-clean-css\": \"^4.3.0\",\n    \"gulp-concat\": \"^2.6.1\",\n    \"gulp-imagemin\": \"^7.1.0\",\n    \"gulp-postcss\": \"^9.0.0\",\n    \"gulp-purgecss\": \"^3.1.3\",\n    \"gulp-replace\": \"^1.0.0\",\n    \"gulp-sass\": \"^4.1.0\",\n    \"gulp-terser\": \"^2.0.1\",\n    \"log-symbols\": \"^4.1.0\"\n  },\n  \"scripts\": {\n    \"dev\": \"gulp\",\n    \"build\": \"gulp prod\",\n    \"prod\": \"gulp prod\"\n  }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>gulpfile.js package.json<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[15],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/597"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":2,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/597\/revisions\/643"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}