Skip to content

Assets: Add gulp tasks for custom modules

I'm currently working on a project with custom modules (creating bustom block plugins) with libraries.

I'd like to have thoses module assets following the same rules than the theme assets. So I'm adding some gulp tasks with this purpose.

Currently I'm dupplicating a lot of stuff. I'll create a MR when the code will be tested and clean(ish)

image

Something looking like this:

//gulpfile.js

//[...]

const modulesPath = '../../app/modules/custom';

//[...]

const paths = {
  myproject_modules: {
    styles: {
      src: modulesPath + '/**/assets/scss/**/*.{scss,sass}',
      dest: modulesPath + '/**/assets/css'
    },
    patternsStyles: {
      src: modulesPath + '/**/templates/patterns/**/styles/*.{scss,sass}'
    },
    //[...]
  },
  //[...]
  myproject_theme: {
    styles: {
      src: projectThemePath + '/assets/scss/**/*.{scss,sass}',
      dest: projectThemePath + '/assets/css'
    },
    //[...]
  }
};

//[...]

gulp.task('es6scripts_myproject_modules', function() {
  return themeES6Scripts('myproject_modules');
});

//[...]

// Watch.
gulp.task('watch', function (done) {
  //[...]
  gulp.watch(paths['myproject_modules'].scripts.src, gulp.series('es6scripts_myproject_modules'));
  //[...]
});

// Default task.
gulp.task('default', gulp.series(
  'es6scripts_myproject_modules',
  //[...]
));
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information