Почему мой попутный ветер не вступает в силу на HTML после изменения? - PullRequest
Новая
       30

Почему мой попутный ветер не вступает в силу на HTML после изменения?

0 голосов
/ 29 июня 2019

Интересно, где я ошибаюсь в gulpfile?Я использовал browsersync, поэтому он будет автоматически перезагружать мой HTML каждый раз, когда в моем коде происходят изменения.Но когда я применяю класс попутного ветра к тегу html, он не действует в браузере.

Это мой код для gulpfile: 

const { src, dest, watch, series, parallel } = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const purgecss = require('gulp-purgecss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');
var replace = require('gulp-replace');
var browserSync = require('browser-sync').create();

function browser(){
    browserSync.init({
        server: { baseDir: './' }
     })
}

const files = { 
    cssPath: 'app/styles/**/*.css',
    jsPath: 'app/scripts/**/*.js'
  }

function cssTask(){    
    return src(files.cssPath)
        .pipe(sourcemaps.init()) // initialize sourcemaps first
        .pipe(postcss([ tailwindcss(), autoprefixer(), cssnano() ]))
        .pipe(purgecss({ content: ['./*.html'] }))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist/css')
        .pipe(browserSync.stream())
    ); // put final CSS in dist folder
  }

function jsTask(){
    return src([
        files.jsPath
        ])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist/js')
    );
  }

var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
        .pipe(dest('.'));
}

function watchTask(){
    watch([files.cssPath, files.jsPath], 
    watch('./*.html').on('change', browserSync.reload),
    parallel(cssTask, jsTask));    
}

exports.default = series(
    parallel(browser, cssTask, jsTask), 
    cacheBustTask,
    watchTask
);

А это мой main.css выглядит так: 

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply .bg-gray-100;
}
...