Как в GULP прописывать дату в конце фала CSS?

Question

[Cheizer]

Приветствую, вопрос может не совсем корректно поставил, но суть в том, как в GULP к css итоговому файлу, добавлять дату? Это нужно для того что бы версия файла в статике обновлялась, и что бы клиент не чистил кеш браузера для обновления.

Обычно руками делал так раньше без GULP? в конце CSS добавлял ?v=3 и так далее 4,5,6

<link rel="stylesheet" type="text/css" href="/css/style.css?v=3">

На php просто, дату выводил с часами и минутами например,

<link rel="stylesheet" type="text/css" href="/css/style.css?v=202102081545">

Как бы в GULP так же сделать? Что бы дата подставлялась в конце файла?

саму функцию даты нашел, в gulpfile.js добавил

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) { var month = '0'+month; }
        if(day.toString().length == 1) { var day = '0'+day; }   
        if(hour.toString().length == 1) { var hour = '0'+hour; }
        if(minute.toString().length == 1) { var minute = '0'+minute; }
        if(second.toString().length == 1) { var second = '0'+second; }   
        var dateTime = year+'-'+month+'-'+day+'T'+hour+':'+minute+':'+second;   
        return dateTime;
    }

А вот как getDateTime() приклеить в выходному файлу не знаю тут

// styles
const styles = () => {
  return src(config.styles.src)
    .pipe(
      sass({
        outputStyle: "expanded"
      })
    )
    .pipe(
      group_media()
    )
    .pipe(postcss([
      require('autoprefixer'),
      require('postcss-discard-comments'),
      require('postcss-csso')
    ]))
    .pipe(
      rename({
        extname: ".min.css" 
       //extname: ".min.css?v=" + getDateTime() //если так сделать ошибка, не получается
      })
    )

    .pipe(dest(config.styles.dist))
    .pipe(server.stream());
}

Comments

[Сергей delphinpro]

А зачем? У вас статичный сайт?

[Cheizer]

Сергей delphinpro, да, когда верстку скидываю очередную версию dist папку, клиенту нужно кеш браузера чистить, да и мне даже browsersync не обновляет кеш. Или обновлять браузер через CTRL + F5, но не суть, нужно как то дописать дату в в get параметр файла стилей конечного, саму дату нашел, в gulpfile.js добавил

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) { var month = '0'+month; }
        if(day.toString().length == 1) { var day = '0'+day; }   
        if(hour.toString().length == 1) { var hour = '0'+hour; }
        if(minute.toString().length == 1) { var minute = '0'+minute; }
        if(second.toString().length == 1) { var second = '0'+second; }   
        var dateTime = year+'-'+month+'-'+day+'T'+hour+':'+minute+':'+second;   
        return dateTime;
    }

А вот как getDateTime() приклеить в выходному файлу не знаю тут

// styles
const styles = () => {
  return src(config.styles.src)
    .pipe(
      sass({
        outputStyle: "expanded"
      })
    )
    .pipe(
      group_media()
    )
    .pipe(postcss([
      require('autoprefixer'),
      require('postcss-discard-comments'),
      require('postcss-csso')
    ]))
    .pipe(
      rename({
        extname: ".min.css"
      })
    )
    //.pipe(concat(".min.css" + getDateTime())) //date
    .pipe(dest(config.styles.dist))
    .pipe(server.stream());
}

[Сергей delphinpro]

Cheizer, не здесь. в html таске нужно добавлять.
Или здесь, но отдельный пайплайн запускать для html

[Сергей delphinpro]

да и мне даже browsersync не обновляет кеш.

Держите консоль открытой во время разработки (с проставленной галочкой отключения кэше) и не будет подобных проблем (у вас, не клиента).

А хеши можно проставлять при билде для клиента. Dev билд стоит максимально ускорять для комфорта.

[Cheizer]

Сергей delphinpro, эмм у меня VSC и там терминал И консоль есть вкладка, но галочки про кеш нет

[Сергей delphinpro]

Cheizer, консоль браузера, я имею ввиду

[Cheizer]

Сергей delphinpro, ааа ну так у клиента все равно будет кеш css файла

Answer 1

[Сергей delphinpro]

<link
 rel="stylesheet"
 href="/css/style.css?v=%NO_CACHE%"
>

const replace = require('gulp-replace');
 
gulp.task('html', function(){
  gulp.src(['index.html'])
    // … other pipes
    .pipe(replace('%NO_CACHE%', (new Date)->getTime()))
    .pipe(gulp.dest('build/'));
});

или

const replace = require('gulp-replace');
 
gulp.task('html', function(){
  gulp.src(['index.html'])
    .pipe(replace('%NO_CACHE%', function() {
      const md5hash = checkCss('style.css'); // read css file and calculate md5 hash
      return md5hash;
    }))
    .pipe(gulp.dest('build/'));
});

Comments

[Cheizer]

Это добавил вначале файла gulpfile.js и в html NO_CAHEconst replace = require('gulp-replace');

Но не пойму где дальше pipe вызвать, у меня task нет такого, у меня так
Есть это

// html
const html = () => {
  return src(config.html.src)
    .pipe(fileinclude())
    .pipe(removeHtmlComments())
    .pipe(dest(config.html.dist))
    .pipe(server.stream());
}

Есть это еще что касаемо HTML

// path
const config = {
  // html
  html: {
    src: 'src/views/*.html',
    dist: 'dist/'
  },
........

[Сергей delphinpro]

Cheizer, ну вот, перед сохранением на диск

.pipe(removeHtmlComments())
   // here
    .pipe(dest(config.html.dist))

[Георгий Еремеев]

Cheizer, перед dest пробовал?

[Cheizer]

Сергей delphinpro, Благодарю! Заработало! Только я свою функцию getDateTime() подставил, установиk gulp-reolace его тоже не было, на вашу (new Date)->getTime() ругался на стрелочку > почему то gulp

[Cheizer]

Сергей delphinpro, а я после этой строки .pipe(dest(config.html.dist)) поставил сначала, и не работало, теперь порядок :)

[Сергей delphinpro]

Cheizer,

ругался на стрелочку > почему то gulp

это я в php закопался =)
точка там должна быть, конечно же.

Answer 2

[Сергей]

Самый популярный Gulp-плагин для версионирования файлов - gulp-rev. Также есть плагин gulp-rev-all, который учитывает изменение не только самого файла, но и его зависимостей (напр., если меняется картинка или шрифт, подключенные в css, то данный плагин это увидит и также обновит версию файла стилей).

Comments

[Cheizer]

О спасибо, сейчас посмотрю!

Answer 3

[Георгий Еремеев]

Вам нужно что-то типа gulp-buster. Он создаст файл с hash файлов и это использовать в php как версию.

Comments

[Cheizer]

спасибо, с php проблем нет, когда index.php главный файл, проблема когда index.html

[Георгий Еремеев]

Cheizer, Оу... Для меня было не ясно, что это нужно делать в .html Уже в ответах есть вариант с replace. Вообще погугли как собираются статичные сайты. Возможно найдешь что-то более удобное. Можно например html через pug генерировать, а через переменные закидывать туда данные.