It would be nice to integrate node tooling for the Javascript. At a quick glance:

  • The gulpfile and package.json additions
  • The folder structure within ./js adjustments to handle ./js/src/ and ./js/dist/. Or something along those lines.
  • Adjustment to the libraries yaml to serve the compiled code.

Comments

devkinetic created an issue. See original summary.

devkinetic’s picture

Title: Add JS compilation & watch to Gulp File » Add JS Compilation & Watch
rajab natshah’s picture

Title: Add JS Compilation & Watch » [Suggestion] Add JS Compilation & Watch
Status: Active » Needs work

Thank you Ryan for reporting!

Not sure if you had a look at:
Creating automation tools for custom themes (Gulpjs)

We are using Gulp
https://github.com/Vardot/vartheme_bs4/blob/8.x-6.x/gulpfile.js
Our way is to copy from dist or src to our target location in the theme, then a Drupal library declaration will link to it

let gulp = require('gulp'),
  sass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  browserSync = require('browser-sync').create()

const paths = {
  scss: {
    src: 'scss/**/*/*.scss',
    dest: 'css',
    watch: 'scss/**/*/*.scss'
  },
  js: {
    bootstrap: {
      alert: './node_modules/bootstrap/js/dist/alert.js',
      button: './node_modules/bootstrap/js/dist/button.js',
      carousel: './node_modules/bootstrap/js/dist/carousel.js',
      collapse: './node_modules/bootstrap/js/dist/collapse.js',
      dropdown: './node_modules/bootstrap/js/dist/dropdown.js',
      modal: './node_modules/bootstrap/js/dist/modal.js',
      popover: './node_modules/bootstrap/js/dist/popover.js',
      scrollspy: './node_modules/bootstrap/js/dist/scrollspy.js',
      tab: './node_modules/bootstrap/js/dist/tab.js',
      toast: './node_modules/bootstrap/js/dist/toast.js',
      tooltip: './node_modules/bootstrap/js/dist/tooltip.js',
      util: './node_modules/bootstrap/js/dist/util.js',
      full_bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js'
    },
    bootstrap_dest: './js/bootstrap',
    popper: './node_modules/popper.js/dist/umd/popper.min.js',
    popper_dest: './js/popper'
  }
}

// Compile sass into CSS & auto-inject into browsers
function compile () {
  return gulp.src([paths.scss.src])
    .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(gulp.dest(paths.scss.dest))
    .pipe(browserSync.stream())
}

// Move the Bootstrap JavaScript files into our js/bootstrap folder.
function move_bootstrap_js_files () {
  return gulp.src([
        paths.js.bootstrap.alert,
        paths.js.bootstrap.button,
        paths.js.bootstrap.carousel,
        paths.js.bootstrap.collapse,
        paths.js.bootstrap.dropdown,
        paths.js.bootstrap.modal,
        paths.js.bootstrap.popover,
        paths.js.bootstrap.scrollspy,
        paths.js.bootstrap.tab,
        paths.js.bootstrap.toast,
        paths.js.bootstrap.tooltip,
        paths.js.bootstrap.util,
        paths.js.bootstrap.full_bootstrap
     ])
    .pipe(gulp.dest(paths.js.bootstrap_dest))
    .pipe(browserSync.stream())
}

// Move the Popper JavaScript files into our js/popper folder.
function move_popper_js_files () {
  return gulp.src([paths.js.popper])
    .pipe(gulp.dest(paths.js.popper_dest))
    .pipe(browserSync.stream())
}

// Watching scss files
function watch () {
  gulp.watch([paths.scss.watch], compile)
}

const build = gulp.series(compile, move_bootstrap_js_files, move_popper_js_files, gulp.parallel(watch))

exports.compile = compile
exports.move_bootstrap_js_files = move_bootstrap_js_files
exports.move_popper_js_files = move_popper_js_files
exports.watch = watch

exports.default = build

Our package.json file
https://github.com/Vardot/vartheme_bs4/blob/8.x-6.x/package.json

{
    "name": "vartheme_bs4",
    "private": true,
    "version": "8.6.0",
    "description": "Vartheme bootstrap 4 implementation",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "SASS",
        "Bootstrap",
        "Drupal",
        "Varbase"
    ],
    "author": "Vardot",
    "license": "GPL-2.0",
    "dependencies": {
        "bootstrap": "^4.3.1",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.3"
    },
    "devDependencies": {
        "browser-sync": "^2.24.7",
        "del": "^3.0.0",
        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^4.1.0",
        "gulp-scss-lint": "^1.0.0",
        "gulp-clean-css": "3.9.4",
        "gulp-concat": "^2.6.1",
        "gulp-html-replace": "^1.6.2",
        "gulp-rename": "^1.2.2",
        "gulp-sass": "^4.0.1",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-postcss": "^8.0.0",
        "gulp-uglify": "^3.0.0",
        "merge-stream": "^1.0.1"
    }
}

Any patch is welcome if you mad any changes in your sub-theme
If could have a wild card selector in Drupal libraries with some of the sub-search for dist or src

rajab natshah’s picture

Status: Fixed » Closed (fixed)