Question

我是Drupal 8的新手，在设置环境方面遇到一些麻烦。我有一个gulpfile.js，可以从SASS文件创建一个style.css文件，清除所有缓存并使用浏览器同步更新浏览器。我的问题是，从SASS文件创建新的CSS文件时，浏览器同步无法刷新页面。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();

// Error notifications
var reportError = function(error) {
  notify({
    title: 'Gulp Task Error',
    message: 'Check the console.'
  }).write(error);
  console.log(error.toString());
  this.emit('end');
}
var config = {
    bootstrapDir: './bootstrap',
};

// Sass processing
gulp.task('sass', function() {
  return gulp.src('scss/**/*.scss')
    .pipe(sourcemaps.init())
    // Convert sass into css
    .pipe(sass())
    // Show errors
    .on('error', reportError)
    // Autoprefix properties
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    // Write sourcemaps
    .pipe(sourcemaps.write())
    // Save css
    .pipe(gulp.dest('css'))
    .pipe(notify({
      title: "SASS Compiled",
      message: "Your CSS files are ready.",
      onLast: true
    }));
});

// Run drush to clear the caches
gulp.task('drush', function() {
  return gulp.src('.', {
      read: false
    })
    .pipe(shell([
      'drush cr',
    ]))
    .pipe(notify({
      title: "Caches cleared",
      message: "Drupal caches cleared.",
      onLast: true
    }));
});

// BrowserSync reload
gulp.task('reload', function(done){
     gulp.src('css')
     .pipe(browserSync.reload({stream: true}))
     .pipe(notify({
       title: "Reload",
       message: "Browser reloaded.",
       onLast: true
     }));
     done();
});

// BrowserSync init
gulp.task('browser-sync', function(done){
  browserSync.init({
     injectChanges: true,
     server: {
      baseDir: './'
     }
  });

  gulp.watch('scss/**/*.scss', gulp.series('sass'));
  gulp.watch('css/style.css').on('change', gulp.series('drush','reload'));
});

// Default task to be run with `gulp`
gulp.task('default', gulp.series('sass','drush','browser-sync'));

输出

这是修改一个SASS文件后的控制台输出。

$ gulp
[19:08:27] Using gulpfile ~/Documents/Web/d8/themes/custom_theme/gulpfile.js
[19:08:27] Starting 'default'...
[19:08:27] Starting 'sass'...
[19:08:27] gulp-notify: [SASS Compiled] Your CSS files are ready.
[19:08:27] Finished 'sass' after 617 ms
[19:08:27] Starting 'drush'...
 [success] Cache rebuild complete.
[19:08:29] gulp-notify: [Caches cleared] Drupal caches cleared.
[19:08:29] Finished 'drush' after 1.48 s
[19:08:29] Starting 'browser-sync'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.103:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.103:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[19:08:38] Starting 'sass'...
[19:08:38] gulp-notify: [SASS Compiled] Your CSS files are ready.
[19:08:38] Finished 'sass' after 519 ms
[19:08:38] Starting 'drush'...
 [success] Cache rebuild complete.
[19:08:40] gulp-notify: [Caches cleared] Drupal caches cleared.
[19:08:40] Finished 'drush' after 1.43 s
[19:08:40] Starting 'reload'...
[19:08:40] Finished 'reload' after 1.97 ms
[Browsersync] 1 file changed (css)
[19:08:40] gulp-notify: [Reload] Browser reloaded.
[Browsersync] Reloading Browsers...

我们可以看到已经创建了CSS文件，缓存已清除，并且按预期触发了重新加载，但是修改未应用于浏览器页面...

package.json

这是我的NPM依赖项。

{
  "name": "custom_theme",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.7",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.0.1",
    "gulp-shell": "^0.6.5",
    "gulp-sourcemaps": "^2.6.4"
  },
  "dependencies": {}
}

Drupal 8模块

由于安装了Drupal 8 Browsersync module，我还安装了this以在HTML <body>标签中包含所需的JavaScript代码段。

我想念什么吗？

Answer 1

因此，经过数小时的努力，我无法完成这项工作，因此我从浏览器同步切换为 gulp-livereload （需要浏览器扩展程序））。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');
var shell = require('gulp-shell');
var livereload = require('gulp-livereload');

// Error notifications
var reportError = function(error) {
  notify({
    title: 'Gulp Task Error',
    message: 'Check the console.'
  }).write(error);
  console.log(error.toString());
  this.emit('end');
}
var config = {
    bootstrapDir: './bootstrap',
};

// Sass processing
gulp.task('sass', function() {
  return gulp.src('scss/**/*.scss')
    .pipe(sourcemaps.init())
    // Convert sass into css
    .pipe(sass())
    // Show errors
    .on('error', reportError)
    // Autoprefix properties
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    // Write sourcemaps
    .pipe(sourcemaps.write())
    // Save css
    .pipe(gulp.dest('css'))
    .pipe(notify({
      title: "SASS Compiled",
      message: "Your CSS files are ready.",
      onLast: true
    }));
});

// Run drush to clear the caches
gulp.task('drush', function() {
  return gulp.src('css', {
      read: false
    })
    .pipe(shell([
      'drush cr',
    ]))
    .pipe(livereload())
    .pipe(notify({
      title: "Caches cleared + Reload",
      message: "Drupal caches cleared + browser reloaded.",
      onLast: true
    }));
});

// Watch modifications on defined files
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./scss/**/*.scss', gulp.series('sass'));
  gulp.watch('./css/style.css', gulp.series('drush'));
  gulp.watch('./templates/**/*.twig', gulp.series('drush'));
});

// Default task to be run with `gulp`
gulp.task('default', gulp.series('sass','drush','watch'));

现在一切正常。

处理完SASS文件后，浏览器同步无法重新加载页面

gulpfile.js

输出

package.json

Drupal 8模块

1 个答案:

gulpfile.js