Gulp scss

Gulp - Get started

Gulp get started guide https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md

Gulp - Watch

What does this do?

This will watch a group of files then run some commands

npm install --save-dev gulp-watch

gulp.task('watch-css', () => {
  watch('./server/web/public/**/*.scss', {ignoreInitial: true}, recompileCSS);
});

recompileCSS

This is a custom file for compiling scss into css.

libraries

• autoprefixer
• postcss
• csso
• node-sass

Full file

// @flow
/* eslint-disable spaced-comment */

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
const csso = require('csso');
const sass = require('node-sass');
const fs = require('fs');

const {chalk, log} = require('distraught');

function transpileSass() {
  return sass.renderSync({
    file: 'server/web/public/css/app.scss',
  }).css;
}

function autoprefix(css /*: string */) {
  return postcss([autoprefixer])
    .process(css)
    .then((postcssResult) => {
      postcssResult.warnings().forEach((warn) => {
        log(chalk.white.bold(warn.toString()));
      });

      return postcssResult.css;
    });
}

function minify(css /*: string */) {
  return csso.minify(css).css;
}

function writeToFile(css /*: string */) {
  fs.writeFile('server/web/public/css/main.css', css, (err) => {
    if (err) {
      throw err;
    }

    log(chalk.green.bold('CSS updated'));
  });
}

exports.recompileCSS = () => {
  const transpiledSass = transpileSass();
  autoprefix(transpiledSass)
    .then((autoprefixedCSS) => {
      const minifiedCSS = minify(autoprefixedCSS);
      return writeToFile(minifiedCSS);
    });
};

/* eslint-enable spaced-comment */

• transpileSass: This transpiles the scss into css.
• autoprefix: This will look for css properties that have browser specific properties.

@media (min-resolution: 2dppx) {
    .image {
        background-image: url([email protected]);
    }
}

compile to

@media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
    .image {
        background-image: url([email protected]);
    }
}

• minify: minify the css file.
• writeToFile: write this now minified css string to file.