Question

我有一个django博客项目，该项目在实时服务器上启动并运行。

我正在使用TailwindCSS框架，作为其中的一部分，我遵循了关于设置Gulp的广泛教程。我正在尝试响应式设计，但是当我添加例如：

<div style="flex-wrap justify-end w-full p-6 m-auto border md:bg-blue sm:bg-yellow lg:bg-black>

当我在Chrome开发工具中更改窗口时，只有一个（有时是两个，但不是全部三个）响应式bg元素实际上有效。我已经尝试清除浏览器缓存，因为我知道这有时会导致问题。这让我觉得我的设置不对，然后我意识到我对gulp的理解需要改进。

我有root静态文件夹作为gulp输出和collectstatic的集合点，我的项目结构如下：

nomadpad-
    -static
        -css
            -styles.css
            -custom.css
    -posts (app)
        -static
            -css
                -styles.css
                -custom.css
    -src
        -css
            -styles.css (default tailwind config file)
    - ...

.gulpfile：

//Include Gulp

var gulp = require('gulp');
var connect = require('gulp-connect');
var postcss = require('gulp-postcss');
var pug = require('gulp-pug');
var autoprefixer = require('autoprefixer');

//Define base folders

var src = '/src/';
var dest = '/static/';
var posts = '/posts/static/';

// Include plugins

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
  replaceString: /\bgulp[\-.]/
});

// Concatenate & Minify JS

gulp.task('scripts', function() {

  var jsFiles = [posts + 'js/*'];
  //plugins.mainBowerFiles() returns an array of all the main 
  //files from the packages and 
  //plugins.filter('*.js') uses gulp-filter to pass only JS files.
  gulp.src(plugins.mainBowerFiles().concat(jsFiles))
    .pipe(plugins.filter('*.js'))
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'js'));

});

//Compile CSS

gulp.task('css', function() {

  var cssFiles = [posts +'css/*'];

  gulp.src(plugins.mainBowerFiles().concat(cssFiles))
    .pipe(plugins.filter('*.css'))
    .pipe(plugins.concat('main.css'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'css'));

});

// Compile tailwind

gulp.task('tailwind', function () {
  var postcss = require('gulp-postcss');
  var tailwindcss = require('tailwindcss');

  return gulp.src(posts + 'css/*')
    .pipe(postcss([
      tailwindcss('tailwind.js'),
      require('autoprefixer'),
    ]))
    .pipe(gulp.dest(dest + 'css/*'))
    .pipe(connect.reload())
});

gulp.task('html', function() {
  gulp.src('./templates/posts/*.html')
    .pipe(pug())
    .pipe(gulp.dest(dest + 'html'))
});

// Watch for changes in files

gulp.task('watch', function() {
   gulp.watch(dest + 'css/*', ['css']);
   gulp.watch(dest + 'html/*', ['html']);
   gulp.watch(dest + 'js/*', ['scripts']);

});

gulp.task('connect', function() {
  connect.server({
    root: 'build',
    livereload: true,
    open: true
  });
});

// Default Task

gulp.task('default', ['css', 'tailwind', 'html', 'scripts']);

gulp.task('start', ['connect', 'watch']);

我很欣赏这个文件的布局，我的结构有点乱。

在命令行中没有调用“gulp”，我的Tailwind样式大部分工作正常。我的问题是：

当我打电话给gulp时，我的静态文件夹中为什么没有输出？需要做出哪些改变才能确保其有效？例如：我的django模板应该通过html管道拉出来。
当我调用collectstatic时，这会更新/ static中的css文件（因此根静态中的两个CSS文件。使用gulp和collectstatic之间的区别是什么，以及如何一起使用它们？
我应该在什么时候使用gulp和gulp start？我觉得我已经付出了很多努力来实现这个目标，但这只是浪费在我身上： - （
我对TailwindCSS响应属性的问题是与我的gulp设置有关还是没有使用gulp？

非常感谢，大卫

Answer 1

我希望您能解决这个问题，以防万一您不愿意，我建议您使用此软件包轻松将顺风css与Django集成，请在此处https://github.com/timonweb/django-tailwind

Gulp与TailwindCSS设置问题 - Django项目

1 个答案: