-1

When running gulp. It runs and compiles SASS one time. How can I adjust the watch so that it continues watching for changes. Do I need to add usePolling: true or usegulp.series. I am following the directions exactly from the Bootstrap 4 SASS - Barrio Starter Kit

My setup: drupal core 9.1.10 bootstrap_barrio 8.x-4.33 bootstrap_sass 8.x-1.13 node v12.22.1 npm 6.14.12 gulp CLI version: 2.3.0 gulp Local version: 4.0.2 Vagrant on Windows using a Redhat 7 virtual machine

let gulp = require('gulp'),
      sass = require('gulp-sass'),
      sourcemaps = require('gulp-sourcemaps'),
      cleanCss = require('gulp-clean-css'),
      rename = require('gulp-rename'),
      postcss = require('gulp-postcss'),
      autoprefixer = require('autoprefixer'),
      browserSync = require('browser-sync').create()

    const paths = {
      scss: {
        src: './scss/style.scss',
        dest: './css',
        watch: './scss/**/*.scss',
        bootstrap: './node_modules/bootstrap/scss/bootstrap.scss'
      },
      js: {
        bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
        jquery: './node_modules/jquery/dist/jquery.min.js',
        popper: 'node_modules/popper.js/dist/umd/popper.min.js',
        popper: 'node_modules/popper.js/dist/umd/popper.min.js.map',
        dest: './js'
      }
    }

    // Compile sass into CSS & auto-inject into browsers
    function styles () {
      return gulp.src([paths.scss.bootstrap, paths.scss.src])
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([autoprefixer({
          browsers: [
            'Chrome >= 35',
            'Firefox >= 38',
            'Edge >= 12',
            'Explorer >= 10',
            'iOS >= 8',
            'Safari >= 8',
            'Android 2.3',
            'Android >= 4',
            'Opera >= 12']
        })]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.scss.dest))
        .pipe(cleanCss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(paths.scss.dest))
        .pipe(browserSync.stream())
    }

    // Move the javascript files into our js folder
    function js () {
      return gulp.src([paths.js.bootstrap, paths.js.jquery, paths.js.popper])
        .pipe(gulp.dest(paths.js.dest))
        .pipe(browserSync.stream())
    }

    // Static Server + watching scss/html files
    function serve () {
      browserSync.init({
        proxy: 'http://orgex1',
        open: false,
      })

      gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
    }

    const build = gulp.series(styles, gulp.parallel(js, serve))

    exports.styles = styles
    exports.js = js
    exports.serve = serve

    exports.default = build

Result when running gulp:

    [vagrant@vagrant6 presentation]$ gulp
    [15:47:33] Using gulpfile /var/www/html/orgex1/web/themes/custom/presentation/gulpfile.js
    [15:47:33] Starting 'default'...
    [15:47:33] Starting 'styles'...
    [15:47:37] Finished 'styles' after 3.62 s
    [15:47:37] Starting 'js'...
    [15:47:37] Starting 'serve'...
    [Browsersync] 3 files changed (bootstrap.min.js, jquery.min.js, popper.min.js.map)
    [15:47:37] Finished 'js' after 56 ms
    [Browsersync] Proxying: http://orgex1
    [Browsersync] Access URLs:
     ----------------------------------
           Local: http://localhost:3000
        External: http://10.0.2.15:3000
     ----------------------------------
              UI: http://localhost:3001
     UI External: http://localhost:3001
     ----------------------------------
3
  • Are you getting an error? What's the command you are running? Commented Jun 18, 2021 at 17:59
  • Are you running/using the gulp watch command?
    – No Sssweat
    Commented Jun 18, 2021 at 20:38
  • There is no error, it's working and compiling, but it only compiles one time. You see the result says Staring...Finished. I am running the command gulp. Just like the directions here say to do. sass-barrio-starter-kit. In the pervious version of Drupal Bootstrap 3 subtheme. THis did not include a gulpfile.js. I was able to create my own gulpfile and the watch command used usePolling: true. Commented Jun 18, 2021 at 22:09

1 Answer 1

0

I found my mistake. Since I am using Vagrant on Windows and a Centos7 VM box. When I run the gulp command on the box. My Windows host browser will not see the CSS changes. I had to install Nodejs on Windows, then run the gulp command in my theme folder inside Windows explorer. Then my Windows browser receives the Browsersync update and displays the CSS changes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.