goalgorilla / sweet-pea Goto Github PK

The socialbase theme currently has a gulp task specifically for mime-icons that's implemented as follows:

// #################
//
// Image mime icons
//
// #################
//
// Copy the mime icons from the components folder to the assets folder (manual task)
// ===================================================

gulp.task('mime-image-icons', function () {
  return gulp.src(options.icons.src + 'mime-icons/*.png')
    .pipe(gulp.dest(options.basetheme.build + 'images/mime-icons/'))
});

This task seems to have been unneeded for a long time but being able to configure copying of certain folders is a useful feature.

The current gulp task is described as follows.

// #################
//
// Sprite icons
//
// #################
//
// svgmin minifies our SVG files and strips out unnecessary
// code that you might inherit from your graphics editor.
// svgstore binds them together in one giant SVG container called
// icons.svg. Then cheerio gives us the ability to interact with
// the DOM components in this file in a jQuery-like way. cheerio
// in this case is removing any fill attributes from the SVG
// elements (you’ll want to use CSS to manipulate them)
// and adds a class of .hide to our parent SVG. It gets
// deposited into our inc directory with the rest of the HTML partials.
// ===================================================

var svgmin        = require('gulp-svgmin'),
    svgstore      = require('gulp-svgstore'),
    cheerio       = require('gulp-cheerio');

gulp.task('sprite-icons', function () {
  return gulp.src(options.icons.src + '*.svg')
    .pipe(svgmin())
    .pipe(svgstore({inlineSvg: true}))
    .pipe($.rename('icons.svg') )
    .pipe(cheerio({
      run: function ($, file) {
        $('svg').addClass('hide');
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(gulp.dest(options.icons.dest))
});

Currently only themes are supported. However, modules in the Open Social distribution also have SCSS/JS files and should adhere to the same coding standards and compilation style as themes.

We should add a -d/--directory option that allows you to specify a different folder than the current working directory (or even multiple directories at the same time).

Currently this build tool is very CLI focused. The CLI file should be separated from the actual processing done on the files.

In theory it should be possible to call the various processing functions from your own program without using the CLI.

The current gulp setup uses ESLint for linting javascript files but this has not yet been implemented.

In order to facilitate easier usage by developers the packages should be published to NPM.

A -w/--watch option should be added to automatically re-run the selected task on a watched file. This is currently supported in the gulp set-up but is not yet supported in Sweet Pea.

We should use https://github.com/paulmillr/chokidar to do this because it has better performance when used with Docker than the built-in Node fs.watch.

#7 requires some files from the base theme to be compiled alongside files in the current theme. This means that the DrupalTheme class should be aware of parent themes and potentially load parent themes from the theme.info.yml file.

The current gulp workflow creates some separate stylesheets for the color module preview (with a class prefix). This is not yet supported in Sweet Pea but should be added.

Yarn uses a proper command parsing library that could make our live easier in the CLI. Take a look into that.

The current gulp workflow uses sasslint to lint sass files but this has not yet been ported to Sweet Pea

A README should be added to this project that explains how it can be used.

Related to #10

Currently implemented in Gulp as follows:

// #################
//
// Image icons
//
// #################
//
// Besides the sprite we sometimes still need the individual svg files
// to load as a css background image. This task optimises and copies
// the icons to the assets folder.
// ===================================================

gulp.task('image-icons', function () {
  return gulp.src(options.icons.src + '*.svg')
    .pipe(svgmin())
    .pipe(gulp.dest(options.basetheme.build + 'images/icons/'))
});

The current gulp set-up uses KSS to build a styleguide for socialbase/socialblue but a lot of work is required to make KSS work with Drupal.

We should instead investigate whether we can create a Drupal focused styleguide builder that requires less custom work and configuration.

This should possibly be a tool separate from Sweet Pea.