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']); });