Skip to content

Using Gulp SASS and BrowserSync

The file packages.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "name": "example",
  "version": "0.0.0",
  "description": "Example dependencies for the theme project",
  "dependencies": {
    "autoprefixer": "^9.7.6",
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-if": "^2.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-watch": "^5.0.1",
    "minimist": "^1.2.0",
    "popper.js": "^1.14.7",
    "replace": "^1.2.0"
  }
}

The file gulp.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var autoprefixer = require('autoprefixer'),
  gulp = require('gulp'),
  gulpif = require('gulp-if'),
  postcss = require('gulp-postcss'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  watch = require('gulp-watch'),
  minimist = require('minimist'),
  replace = require("replace"),
  browsersync = require('browser-sync').create(),
  config = {
    cssPath: './css',
    fontsPath: './font',
    imgPath: './img',
    jsPath: './js',
    sassSources: ['scss/style.scss'],
    sassBasePath: './scss',
    sassWatchPaths: [
      './scss/**/*.scss'
    ],
  },
  knownOptions = {
    string: 'env',
    default: {env: process.env.NODE_ENV || 'development'}
  },
  options = minimist(process.argv.slice(2), knownOptions);

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function () {
  return gulp.src(config.sassSources)
    .pipe(gulpif(options.env !== 'production', sourcemaps.init()))
    .pipe(sass({
      outputStyle: gulpif(options.env !== 'production', 'nested', 'compressed'),
      includePaths: [
        config.sassBasePath,
        config.sassBasePath + '/environment/' + options.env,
      ]
    })
      .on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulpif(options.env !== 'production', sourcemaps.write('./maps')))
    .pipe(gulp.dest(config.cssPath))
    .pipe(browsersync.reload({ stream: true }));
});

// Copy the javascript files into our js folder
gulp.task('js-copy', function () {
  return gulp.src([
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js.map',
    'node_modules/popper.js/dist/umd/popper.min.js',
    'node_modules/popper.js/dist/umd/popper.min.js.map'
  ])
    .pipe(gulp.dest(config.jsPath));
});

// Patch the javascript files
gulp.task('js-patch', function(done) {
  done();
});

// Copy and patch the javascript files
gulp.task('js', gulp.series('js-copy', 'js-patch'));

// Move the img files into our img folder
gulp.task('img', function () {
});

// Move the font files into our font folder
gulp.task('fonts', function () {
});

// Static Server + watching scss/html files
gulp.task('watch', function () {
  browsersync.init({
    proxy: 'apache',
    socket: {
      domain: 'bs-' + process.env.DOCKER4DRUPAL_NODE_DOMAIN + process.env.DOCKER4DRUPAL_NODE_PORT
    },
    open: false,
    callbacks: {
      ready: function(err, bs) {
        console.log(' Docker:');
        console.log('        Site: ' + process.env.DOCKER4DRUPAL_NODE_SCHEMA + '://bs-' + process.env.DOCKER4DRUPAL_NODE_DOMAIN + process.env.DOCKER4DRUPAL_NODE_PORT);
        console.log('          UI: ' + process.env.DOCKER4DRUPAL_NODE_SCHEMA + '://bsui-' + process.env.DOCKER4DRUPAL_NODE_DOMAIN + process.env.DOCKER4DRUPAL_NODE_PORT);
        console.log(' -----------------------------------');
      }
    }
  });
  return watch(config.sassWatchPaths, {verbose: true}, gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('fonts', 'img', 'js', 'sass', 'watch'));