gulp不识别顺风类

xlpyo6sf  于 9个月前  发布在  Gulp
关注(0)|答案(1)|浏览(160)

我试图使配置与gulp,sass广告tailwindcss,一切工作正常,但当我第一次运行gulp我可以看到我的顺风类应用,但当我试图添加更多的类,我看不到的变化,即使服务器正在运行,类编译在我的CSS文件在dist文件夹,我应该回来运行gulp另一次,查看最新的更改。这里你可以看到我的gulpjs配置和tailwind配置,我做错了什么,我希望能够看到我的CSS更改,而无需每次重新启动服务器:/

const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const tailwindcss = require('tailwindcss');
let imagemin;
const imagewebp = require('gulp-webp');
const browserSync = require('browser-sync').create();

// css Task
function scssTask() {
  return src('assets/src/scss/app.scss', { sourcemaps: true })
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(postcss([cssnano(), tailwindcss()]))
    .pipe(dest('dist', { sourcemaps: '.' }))
    .pipe(browserSync.stream());
}

// Js Task
function jsTask() {
  return src('assets/src/js/*.js', { sourcemaps: true })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(terser())
    .pipe(dest('dist', { sourcemaps: '.' }));
}

const optimizeimg = series(
    async () => {
        imagemin = await import('gulp-imagemin');
    },
    () => src('assets/src/images/**/*')
        .pipe(
            imagemin.default(
                [
                    imagemin.mozjpeg({ quality: 80, progressive: true }),
                    imagemin.optipng({ optimizationLevel: 2})
                ]))
        .pipe(dest('./dist/images'))
);

//optimize and move images
function webpImage() {
  return src('dist/images/*.{jpg,png}') // change to your source directory
    .pipe(imagewebp())
    .pipe(dest('dist/images')) // change to your final/public directory
};

function browserSyncServer(cb) {
  browserSync.init({
    server: {
      baseDir: './',
    },
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
  });
  cb();

}

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

function watchTasks(cb) {
  watch('*.html', browserSyncReload);
  watch(
    ['assets/src/scss/**/*.scss', 'assets/src/scss/*.scss', 'assets/src/images/*.{png,jpg}'],
    series(scssTask,optimizeimg,webpImage, browserSyncReload)
  );
  cb();
}
exports.default = series(scssTask, optimizeimg,webpImage,browserSyncServer, watchTasks);

exports.build = series(scssTask,optimizeimg, webpImage);

字符串
我的顺风配置文件

module.exports = {
  content: ['./assets/src/**/*.html',
    './assets/src/**/*.js',
    './assets/src/**/*.scss',
    './index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

jc3wubiy

jc3wubiy1#

当HTML中发生更改时,您需要重新加载页面。要应用必要的样式,您需要运行一个任务来构建它们。

function watchTasks(cb) {
  watch('*.html', scssTask, browserSyncReload);
  watch(
    ['assets/src/scss/**/*.scss', 'assets/src/scss/*.scss', 'assets/src/images/*.{png,jpg}'],
    series(scssTask,optimizeimg,webpImage, browserSyncReload)
  );
  cb();
}

字符串

相关问题