1

我有一个 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 的理解需要改进。

我有根静态文件夹作为我的 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)
    - ...

.gulp 文件：

//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 样式大部分都可以正常工作。我的问题是：

  1. 当我调用 gulp 时，为什么我的静态文件夹中没有输出？需要进行哪些更改以确保其有效？例如：我的 django 模板应该通过 html 管道拉出。

  2. 当我调用 collectstatic 时，这会更新 /static 中的 css 文件（因此根 static 中的两个 CSS 文件。使用 gulp 和 collectstatic 有什么区别，如何将它们一起使用？

  3. 我应该在什么时候使用 gulp 和 gulp start？我觉得我已经付出了很多努力来实现这一点，但这只是浪费在我身上:-(

  4. 我在使用 TailwindCSS 响应属性时遇到的问题是否与我的 gulp 设置或缺少 gulp 使用有关？

非常感谢，大卫

4

1 回答 1

0

我希望你解决了这个问题，如果你没有，我建议你使用这个包来轻松地将 tailwind css 与 Django 集成，在这里查看https://github.com/timonweb/django-tailwind

于 2020-02-04T10:03:50.553 回答