Cheizer
@Cheizer

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

Приветствую, вопрос может не совсем корректно поставил, но суть в том, как в 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());
}
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
<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/'));
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@SergeiB
Самый популярный Gulp-плагин для версионирования файлов - gulp-rev. Также есть плагин gulp-rev-all, который учитывает изменение не только самого файла, но и его зависимостей (напр., если меняется картинка или шрифт, подключенные в css, то данный плагин это увидит и также обновит версию файла стилей).
Ответ написан
GogElf
@GogElf
Хокаге
Вам нужно что-то типа gulp-buster. Он создаст файл с hash файлов и это использовать в php как версию.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы