userstyles/gulpfile.js

const beautify = require('gulp-cssbeautify');
const gulp = require('gulp');
const eslint = require('gulp-eslint');
const fs = require('fs');
const stylelint = require('gulp-stylelint');
const sass = require('gulp-sass');

gulp.task('lint:js', () => {
  return gulp.src(['**/*.js','!node_modules/**'])
    .pipe(eslint())
    .pipe(eslint.format());
});

gulp.task('lint:sass', () => {
  const options = {
    reporters: [{formatter: 'string', console: true}],
  };
  return gulp.src('sass/**/*.s*')
    .pipe(stylelint(options));
});

gulp.task('build:dev', () => {
  const options = {
    outputStyle: 'compressed',
  };
  const bOptions = {
    indent: '  ',
    autosemicolon: true,
  };
  return gulp.src('sass/**/*.s*')
    .pipe(sass(options).on('error', sass.logError))
    .pipe(beautify(bOptions))
    .pipe(gulp.dest('temp'));
});

gulp.task('build:prod', () => {
  const options = {
    outputStyle: 'compressed',
  };
  const bOptions = {
    indent: '  ',
    autosemicolon: true,
  };
  return gulp.src('sass/**/*.s*')
    .pipe(sass(options).on('error', sass.logError))
    .pipe(beautify(bOptions))
    .pipe(gulp.dest('css'));
});

gulp.task('generate', ['lint:js', 'lint:sass', 'build:dev', 'build:prod'], () => {
  // Generates all *.user.css styles.
  const { bump } = require('./bump.js');
  const klawSync = require('klaw-sync');
  const path = require('path');
  const userCss = require('usercss-creator');

  // Define constants
  const stylesDirectory = path.join(__dirname, 'sass');
  const cssDirectory = path.join(__dirname, 'temp');

  // Walk recursively through styles directory
  let files = klawSync(stylesDirectory, {nodir: true});

  // Filter out any files that aren't .json files
  files = files.filter(file => path.extname(file.path) === '.json');

  let style;
  let incrementType;

  for (const arg of process.argv) {
    if (arg.includes('--bump')) {
      style = arg.substring('--bump='.length, arg.length);
    }
    switch (arg) {
    case '--major':
      incrementType = 'major';
      break;
    case '--minor':
      incrementType = 'minor';
      break;
    case '--patch':
      incrementType = 'patch';
      break;
    }
  }

  // Iterate through all .json files
  for (const file of files) {
    // Requiring the .json file as the descriptor of the style
    const descriptor = require(file.path);
    // If --bump=all then bump every style
    if (style === 'all') {
      bump(file.path, incrementType);
    }
    // Test if the style we want to bump is the one currently generating
    else if (style === descriptor.folder) {
      // Bump the style's .json with the increment type
      bump(file.path, incrementType);
    }
    // Create the css path and generate the .user.css file with the options
    const cssPath = path.join(cssDirectory, descriptor.folder, descriptor.entry);
    const outPath = path.join(__dirname, 'css', descriptor.folder);
    let styleFile = `@-moz-document domain('${descriptor.options.namespace}') {\n`;
    styleFile += fs.readFileSync(cssPath, {encoding: 'UTF-8'});
    styleFile += '}';
    fs.writeFileSync(cssPath, styleFile, {encoding: 'UTF-8'});
    userCss.create(cssPath, descriptor.options, outPath);
  }
});

gulp.task('watch', () => {
  gulp.watch('sass/**/*.s*', ['lint:js', 'lint:sass', 'build:dev']);
});