Drupal不会刷新Chrome或Firefox中的外观

Question

我在Drupal主题上运行罗盘表（通过localhost构建） 在Drupal Performance中，我在带宽优化选项中没有未聚合的CSS。 如果我对scss进行了更改，则css文件会正确更新，并且在单击刷新时，Firefox外观将根据我的预期进行更改。 但在Chrome和Safari中，他们只是在Drupal中“清除所有缓存”之前不会更新外观。 我已经清空了历史，在Chrome中选择了“清空缓存和硬重载”，但这也没有改变它，我还是要在Chrome或Safari更新之前清除Drupal内部的所有缓存。有没有办法解决这个问题？

Answer 1

两种方式：

1。禁用所有Drupal缓存，source：

  

[...]使用Devel模块在​​每个模块上重建主题的注册表   页面重新加载。安装完成后，转到配置→开发→开发   设置。在那里，检查＆＃34;在每个页面加载时重建主题注册表＆＃34;   然后按＆＃34;保存配置＆＃34;按钮。记得取消选中（或   更好的是，当你完成开发时，完全禁用Devel。

2。将Compass替换为Gulp和Browsersync以同步您的更改，而无需重新加载浏览器。

安装Browsersync和Link CSS并使用npm（首先安装npm）和Gulp（首先全局安装Gulp）设置CSS编译。将以下文件放入主题文件夹中。替换SOMENAME，MYFILE.scss和MYDRUPAL.local。然后运行$ npm install和$ gulp。快乐，快乐。

的package.json

{
    "name": "SOMENAME",
    "private": true,
    "dependencies": {
        "browser-sync": "^2.18.13",
        "eslint": "^4.8.0",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^4.0.0",
        "gulp-cached": "^1.1.1",
        "gulp-sass": "^3.1.0",
        "gulp-sass-lint": "^1.3.4",
        "gulp-shell": "^0.6.3",
        "gulp-sourcemaps": "^2.6.1",
        "rimraf": "^2.6.2"
    },
    "scripts": {
        "postinstall": "node_modules/.bin/rimraf node_modules/**/*.info",
        "build": "gulp build"
    }
}

gulpfile.js

const gulp        = require('gulp'),
      browserSync = require('browser-sync'),
      sass        = require('gulp-sass'),
      prefix      = require('gulp-autoprefixer'),
      shell       = require('gulp-shell'),
      sourcemaps  = require('gulp-sourcemaps'),
      sassLint    = require('gulp-sass-lint'),
      cache       = require('gulp-cached');

// Only include config if exists.
var config;
try {
  config = require('./config.json');
}
catch (error) {
  config = require('./example.config.json');
}

/**
 * Launch the Server
 */
gulp.task('browser-sync', ['sass'], function() {
  browserSync.init({
    // Change as required
    proxy : config.proxy,
    socket: {
      // For local development only use the default Browsersync local URL.
      //domain: 'localhost:3000'
      // For external development (e.g on a mobile or tablet) use an external
      // URL. You will need to update this to whatever BS tells you is the
      // external URL when you run Gulp.
      domain: 'localhost:3000'
    }
  });
});

/**
 * @task sass
 * Compile files from scss
 */
gulp.task('sass', function() {
  return gulp.src('scss/MYFILE.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'})
      .on('error', function(err) {
        console.error(err.message);
        browserSync.notify(err.message, 3000); // Display error in the browser
        this.emit('end'); // Prevent gulp from catching the error and exiting
                          // the watch process
      }))
    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({stream: true}));
});

/**
 * @task clearcache
 * Clear all caches
 */
gulp.task('clearcache', function() {
  return shell.task([
    'drush -l ' + config.alias + ' cr'
  ]);
});

/**
 * @task reload
 * Refresh the page after clearing cache
 */
gulp.task('reload', ['clearcache'], function() {
  browserSync.reload();
});

/**
 * @task sass-lint
 * Lint only modified files
 */
gulp.task('sass-lint', function() {
  return gulp.src(['scss/*.scss', 'scss/**/*.scss'])
    .pipe(cache('sassLint'))
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

/**
 * @task watch
 * Watch scss files for changes & recompile
 * Clear cache when Drupal related files are changed
 */
gulp.task('watch', function() {
  gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass-lint', 'sass']);
  gulp.watch('**/*.{php,inc,info}', ['reload']);
});

/**
 * Default task, running just `gulp` will
 * compile Sass files, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'sass-lint', 'watch']);
gulp.task('build', ['sass']);

config.json

{
    "proxy": "MYDRUPAL.local",
    "alias": "default"
}

第2号会让您更加高兴，因为它会立即将您的更改注入您的网站。您可以将编辑器窗口和浏览器窗口放在彼此旁边，看看魔术发生了。 （我的示例也已经启用了sass-lint，因此它会期望所有属性的字母顺序和正确的选择器嵌套和命名）。但是当你赶时间的时候，请选择1号。