From 3aa3eaed17526dd951fdd6673e4533c0c152efae Mon Sep 17 00:00:00 2001
From: jurgenhaas <juergen@paragon-es.de>
Date: Thu, 4 Feb 2021 18:52:40 +0100
Subject: [PATCH] docker/l3d#90 Documentation for the Node image with support
for gulp, sass and browsersync
---
docs/docker/gitlab-drupal-ci/changelog.md | 4 +
docs/docker/l3d/changelog.md | 4 +
docs/docker/node/gulp-sass.md | 128 ++++++++++++++++++++++
mkdocs.yml | 4 +-
4 files changed, 139 insertions(+), 1 deletion(-)
create mode 100644 docs/docker/node/gulp-sass.md
diff --git a/docs/docker/gitlab-drupal-ci/changelog.md b/docs/docker/gitlab-drupal-ci/changelog.md
index b122d02..b6e2e65 100644
--- a/docs/docker/gitlab-drupal-ci/changelog.md
+++ b/docs/docker/gitlab-drupal-ci/changelog.md
@@ -1,3 +1,7 @@
+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
diff --git a/docs/docker/l3d/changelog.md b/docs/docker/l3d/changelog.md
index 848568e..0b61156 100644
--- a/docs/docker/l3d/changelog.md
+++ b/docs/docker/l3d/changelog.md
@@ -1,3 +1,7 @@
+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
diff --git a/docs/docker/node/gulp-sass.md b/docs/docker/node/gulp-sass.md
new file mode 100644
index 0000000..80548e9
--- /dev/null
+++ b/docs/docker/node/gulp-sass.md
@@ -0,0 +1,128 @@
+---
+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'));
+```
diff --git a/mkdocs.yml b/mkdocs.yml
index f62b807..8f3491e 100644
--- a/mkdocs.yml
+++ b/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:
--
GitLab