我有一个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 Dev Tools中更改窗口时，只有一个(有时是两个，但不是全部三个)响应式bg元素实际上有效。我尝试清除浏览器缓存，因为我知道这有时会导致问题。这让我想到我的设置不正确，然后我意识到我对 gulp 的理解需要提高。
我有根静态文件夹作为我的gulp输出和收集静态的收集点，我的项目结构如下：
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 有什么区别，我如何将它们一起使用？
我应该在什么时候使用大口大口地开始？我觉得我已经付出了很多努力来实现这一点，但它只是浪费在我身上：-(
我在使用 TailwindCSS 响应属性时遇到的问题是否与我的 gulp 设置或缺乏使用 gulp 有关？
非常感谢， 大卫
我希望你解决了这个问题，以防你没有，我建议你使用这个包轻松地将顺风CSS与Django集成，在这里查看 https://github.com/timonweb/django-tailwind