import gulp from 'gulp'; import config from '../config'; import sass from 'gulp-sass'; import plumber from 'gulp-plumber'; import gulpif from 'gulp-if'; import size from 'gulp-size'; import stylelint from 'stylelint'; import postcss from 'gulp-postcss'; import syntaxScss from 'postcss-scss'; import reporter from 'postcss-reporter'; import notify from 'gulp-notify'; import notifier from 'node-notifier'; import header from 'gulp-header'; import minify from 'gulp-clean-css'; import rename from 'gulp-rename'; import del from 'del'; // STYLES // ------------------ // lints styles using stylelint (config under 'stylelint' in package.json) gulp.task('lint:styles', () => { return gulp .src([`${config.styles.source}/**/*.scss`, `!${config.styles.source}/bootstrap/**/*.scss`, `!${config.styles.source}/mixins/**/*.scss`], { base: './', since: gulp.lastRun('lint:styles'), }) .pipe( postcss( [ stylelint({ fix: true, syntax: 'scss', }), // see http://stylelint.io/user-guide/example-config/ reporter({clearMessages: true, clearReportedMessages: true}), ], {syntax: syntaxScss} ) ) .pipe(gulp.dest('./')); }); // Compiles sass into css & minifies it (production) gulp.task('make:styles', () => { return gulp .src(`${config.styles.source}/*.scss`) .pipe( plumber({errorHandler: notify.onError('Error: <%= error.message %>')}) ) .pipe( sass({ precision: 10, // https://github.com/sass/sass/issues/1122 includePaths: config.styles.include, }) ) .pipe(postcss()) .pipe(gulpif(config.production, header(config.banner))) .pipe(size({gzip: true, showFiles: true})) .pipe(gulp.dest(`${config.styles.build}`)) .pipe(minify()) .pipe(rename({ extname: '.min.css' })) .pipe(size({gzip: true, showFiles: true})) .pipe(plumber.stop()) .pipe(gulp.dest(`${config.styles.build}`)); }); gulp.task( 'styles', gulp.series('lint:styles', 'make:styles', (done) => { if (config.enable.notify) { notifier.notify({ title: config.notify.title, message: 'Styles task complete', }); } done(); }) ); // Clean styles files gulp.task('clean:styles', (done) => { return del([`${config.styles.build}/**/*`]).then(() => { if (config.enable.notify) { notifier.notify({ title: config.notify.title, message: 'Clean styles task complete', }); } done(); }); });