Наш телефон:

+7 (977) 797-50-30

Наш WhatsApp:

+7 (977) 797-50-30

Опубликовано: 15.06.2021
Веб-технолгии

Использование Tailwindcss вместе с Gulp

Использование Tailwindcss вместе с Gulp

Использование tailwindcss облегчает и убыстряет разработку html макетов, но на официальном сайте вы не найдете инструкции для разработки вместе со сборщиком gulp.


В данной статье мы разберем настройку tailwind.config.js, postcss.config.js, package.json и gulpfile.js


Подробнее о работе с gulp мы рассматривали в этой статье


tailwind.config.js


module.exports = {
    purge: ["./src/**/*.css", "./**/*.html"],
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
}

postcss.config.js


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ],
      flexbox: true
    },
  },
}

package.json


{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "dev": "gulp",
    "build": "NODE_ENV=production gulp css",
    "build-images": "gulp images"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp-autoprefixer": "^7.0.1",
    "gulp-postcss": "^9.0.0",
    "gulp-uglify": "^3.0.2",
    "tailwindcss": "^2.1.2",
    "autoprefixer": "^10.2.5",
    "gulp-sourcemaps" : "^3.0.0"
  }
}

gulpfile.js


const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create();
var postcss = require("gulp-postcss");
var tailwindcss = require('tailwindcss');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var autoprefixer = require('autoprefixer');
const imagemin = require("gulp-imagemin");

function cssTask(cb) {
    return src("./src/*.css")
        .pipe(sourcemaps.init())
        .pipe(postcss([
            tailwindcss('./tailwind.config.js'),
            autoprefixer()
            ]
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(dest("./assets/css"))
        .pipe(browserSync.stream());
    cb();
}
function jsTask(cb){
    return src("./src/*.js")
        .pipe(uglify())
        .pipe(dest("./assets/js"))
        .pipe(browserSync.stream());
    cb();
}

function imageminTask(cb) {
    return src("./assets/images/*")
        .pipe(imagemin())
        .pipe(dest("./assets/images"));
    cb();
}

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

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

function watchTask() {
    watch("./**/*.html", browsersyncReload);
    watch(["./src/*.js"], series(jsTask, browsersyncReload));
    watch(["./src/*.css"], series(cssTask, browsersyncReload));
}

exports.default = series(jsTask, cssTask, browsersyncServe, watchTask);
exports.css = cssTask;
exports.js = jsTask;
exports.images = imageminTask;

Структура папок


|-- Root dir
    |-- index.html
    |-- package.json
    |-- gulpfile.js
    |-- tailwind.config.js
    |-- src
        |-- style.scss
        |-- img
        |-- index.js
    |-- assets
        |-- css
        |-- js
        |-- image

Готовые файлы

Скачайте готовые файлы для работы и загрузите их в корневую папку проекта:

Автор:
Денис Суббота
Технический директор, работает в web сфере более 6 лет. Full-stack Developer с 15 года. Реклама и SEO с 16 года.

Заказать разработку сайта в веб студии Atekla

Подробнее
Получите бесплатный аудит вашего сайта,
что позволит выявить его слабые и сильные стороны
Пришлите нам свои данные, ссылку на сайт и краткое описание вашего бизнеса,
и мы сделаем для вас полный аудит. Вы получите аудид на свою почту.
Это совершенно бесплатно!
, , заявка на аудит сайта успешно отправлена.
В ближайшее время мы отправим результат на почту !
Спасибо, что обратились в нашу веб студию!
Получите бесплатную
консультацию!
Напишите нам, если вы считаете, что пора действовать, и мы сделаем ваш бизнес лучше
, , Ваша заявка успешно отправлена,
наши менеджеры свяжуться с Вами в ближайшее время!