docker/l3d#90 Documentation for the Node image with support for gulp, sass and browsersync

docs/docker/gitlab-drupal-ci/changelog.md

+next
+----
+docker/l3d#90 Adjust node_cmd script to work with Traefik 2
+
 v1.7.5 2021-02-03
 -----------------
 - docker/l3d#89 Add nano editor

docs/docker/l3d/changelog.md

+next
+----
+docker/l3d#90 Adjust node_cmd script to work with Traefik 2
+
 v2.0.2 2021-02-03
 -----------------
 - docker/l3d#84 Allow to delete multiple projects at once

docs/docker/node/gulp-sass.md

+---
+title: Docker Node, Gulp SASS and BrowserSync
+tags:
+- docker
+---
+# Using Gulp SASS and BrowserSync
+
+## The file packages.json
+
+```json
+{
+  "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
+
+```javascript
+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'));
+```

mkdocs.yml

@@ -54,7 +54,9 @@ nav:
       - Drupal: docker/l3d/drupal.md
       - Changelog: docker/l3d/changelog.md
     - Maven: docker/maven-build/index.md
-    - Node: docker/node/index.md
+    - Node:
+      - Home: docker/node/index.md
+      - Gulp, SASS, BrowserSync: docker/node/gulp-sass.md
   - Composer:
     - Home: composer/index.md
     - Libraries: