avvo-styleguide/gulpFile.js

Avvo styleguide

"use strict";

// Gulp plugins
// 	const rename = require('gulp-rename'),
// 	const browserSync = require('browser-sync'),
// 	const plumber = require('gulp-plumber'),
// 	const autoprefixer = require('gulp-autoprefixer'),
// 	const useref = require('gulp-useref'),
// 	const iff = require('gulp-if'),
// 	const csso = require('gulp-csso');


// const reload = browserSync.reload;

const gulp = require('gulp')
const sass = require('gulp-sass')
const sourcemaps = require('gulp-sourcemaps')
const autoprefixer = require('gulp-autoprefixer')
const del = require('del')
const cleanCSS = require('gulp-clean-css')

const BASE_DEST = './dist';

gulp.task('sass', () => {
	return gulp.src('./source/stylesheets/**/*.scss')
	  .pipe(sass().on('error', sass.logError))
	  .pipe(autoprefixer({
		  browsers: ['last 3 versions'],
		  cascade: true
	  }))
	  .pipe(gulp.dest(`${BASE_DEST}`))
});

gulp.task('minify-css', ['sass'],() => {
  return gulp.src(`${BASE_DEST}/*.css`)
    .pipe(cleanCSS({debug: true}, function(details) {
		console.log(`${details.name} - Original Size: ${details.stats.originalSize}`)
		console.log(`${details.name} - Optimized Size: ${details.stats.minifiedSize}`)
		console.log(`${details.name} - Time build: ${details.stats.timeSpent} milliseconds`)
		console.log(`${details.name} - File Reduction: ~${Math.floor(details.stats.efficiency * 100)}%`)
	  }))
    .pipe(gulp.dest(`${BASE_DEST}`));
});

gulp.task('clean', () => {
	del([
		'./dist',
		'./source/stylesheets/**.css*'
	]);
	console.log('Deleted ./dist/*')
});


gulp.task('sass:watch', () => {
	gulp.watch('./source/stylesheets/**/*.scss', ['sass'])
});

gulp.task('release', ['minify-css', 'clean'], () => {
	return gulp.src([
			`${BASE_DEST}/**.css*`
		])
		.pipe(gulp.dest('./dist'))
})


// TODO: For Auto loading of styleguide and compiling

// gulp.task('html', ['compileSass'], () => {
// 	const assets = useref.assets();
// 	gulp.src('index.html')
// 		.pipe(assets)
// 		.pipe(iff('*.js'))
// 		.pipe(iff('*.css', csso()))
// 		.pipe(assets.restore())
// 		.pipe(useref())
// 		.pipe(gulp.dest('dist/'))
// });

// // gulp.task('jslint', () => {
// // 	return gulp.src( 'js/main.js' )
// // 		.pipe(plumber())
// // 		.pipe(jshint())
// // 		.pipe(jshint.reporter('checkstyle'))
// // 		.pipe(jshint.reporter('fail'));
// // });

// /*
// * Css related tasks
// */
// gulp.task('compileSass', () => {
// 	return gulp.src( "source/styles.scss")
// 		.pipe(plumber({ errorHandler: errorMessage }))
// 		.pipe(maps.init())

// 		.on('error', (error) => {
//         console.log(error);
//         this.emit('end');
//     })
//     .pipe(autoprefixer({
//     	browsers: ['last 3 versions'],
//     	cascade: true
//     }))
// 		.pipe(maps.write("./"))
// 		.pipe(gulp.dest( "styleguide/" ))
// 		.pipe(browserSync.stream({match: '**/*.css'}));
// });


// // Browser Syncing / Localhost server
// gulp.task('bs-reload', () => {
// 	browserSync.reload();
// });

// gulp.task('browser-sync', () => {
// 	return browserSync.init(['source/*.css', 'js/*.js'], {
// 		// start local server? or VM?
// 		server: {
// 			baseDir: './styleguide'
// 		},
// 		debug: true,
// 		// google chrome firefox explorer
// 		browser: ["google chrome"],
// 		port: 8100
// 	});
// });


// // Gulp Tasks
// gulp.task('watchFiles', ['browser-sync',], () => {
// 	gulp.watch( 'source/**/*.scss');
// });


// // Dev task
// gulp.task('serve', ['watchFiles']);