adgile/tasks/task-sass.js

An easy-to-use automated front-end setup.

'use strict'

/**
 * A submodule for running the `adg build` task, 
 * responsible for compiling sass to css
 * @module task.sass
 */

const settings    	= require('../settings.default'),
      helpers     	= require('../helpers/index'),
      gulp        	= require('gulp'),
      chalk       	= require('chalk'),
      path        	= require('path'),
	  bsTask 	    = require('../tasks/task-browsersync'),
	  fs          	= require('fs-extra'),
      plugins     	= require('gulp-load-plugins')({
		config: path.join(__dirname, '../package.json')
	  }),
	  sortMediaQueries = require('postcss-sort-media-queries'),
	  autoprefixer 	= require('autoprefixer');

const sass = require('gulp-sass')(require('sass'));

/**
 * Compile all provided sass files to css, using PostCSS. All files are then autoprefixed, minified and renamed.
 * Changes are shown in the browser by reloading browsersync.
 */
function runTask() {
	helpers.verbose(chalk.grey('Running task "sass"'));

	var files = [
		settings.assetsFolder + '/sass/*.scss',
		settings.assetsFolder + '/sass/*.sass',
		settings.assetsFolder + '/sass/*.css'
	];

	var browserslistExists = fs.existsSync('./.browserslistrc');
	var autoprefixerOptions = {};

	// Check if a .browserslistrc file exists. If there is none, check the config for a browserslist option. If this option is absent, use the Adgile fallback value.
	if (browserslistExists !== true) {
		autoprefixerOptions = {
			overrideBrowserslist: (config.browserlist ? config.browserlist : ['defaults', '> 1%', 'last 2 version and > 0.2%', 'not dead and > 0.2%', 'safari 5', 'ie >=10', 'opera 12.1', 'iOS >=7', 'android 4']),
		}
	}

	return gulp.src(files)
		.pipe(plugins.if(!settings.isProduction, plugins.sourcemaps.init()))
		.pipe(sass({
				outputStyle: (settings.isProduction ? 'compressed' : 'expanded')
			}).on('error', (err, result) => {
				const msg = chalk.bold.hex('#d32f2f')('Sass error: ') + chalk.hex('#ff6f60')(err.messageOriginal) + 
									'\nIn ' + chalk.yellow(err.relativePath) + ' on ' + chalk.yellow('line ' + err.line) +  ', ' + chalk.yellow('column ' + err.column);
				console.log(msg);
			}))
		.pipe(plugins.postcss([autoprefixer(autoprefixerOptions)]))
		.pipe(plugins.if(settings.isProduction, plugins.bytediff.start()))
		.pipe(plugins.if(config.combineMediaQueries, plugins.postcss([ sortMediaQueries({ sort: 'desktop-first' }) ])))
		.pipe(plugins.if(settings.isProduction, plugins.postcss([ 
			require('cssnano')({ 		
				preset: 'default',
				autoprefixer: {browsers: (config.browserlist ? config.browserlist : ['defaults', '> 1%', 'last 2 version and > 0.2%', 'not dead and > 0.2%', 'safari 5', 'ie >=10', 'opera 12.1', 'iOS >=7', 'android 4'])}
			})
		])))
		.pipe(plugins.if(settings.isProduction, plugins.rename({suffix: '.min'})))
		.pipe(plugins.if(settings.isProduction, plugins.bytediff.stop(data => {
			data.percent = (100 - (data.percent*100)).toFixed(2);
			data.savings = (data.savings/1024).toFixed(2);

			return chalk.green('✄  Minified CSS files (saved '+ data.savings + ' kB - ' + data.percent + '%)');	
		})))
		.pipe(plugins.if(!settings.isProduction, plugins.sourcemaps.write('.')))
		.pipe(gulp.dest(config.export_assets + '/' + settings.assetsFolder + '/css'))
		.pipe(plugins.if(settings.livereload, bsTask.refresh(true)));
}

module.exports = {
    runTask
}