stylelint implementation.

autofix.md

Fixing property sort order:

• node ./node_modules/stylelint/bin/stylelint.js assets/styles/*.scss --fix
• node ./node_modules/stylelint/bin/stylelint.js assets/styles/**/*.scss --fix

{
  "plugins": [
  "stylelint-order"
  ],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

{
  "extends": "stylelint-config-property-sort-order-smacss"
}

config.json

{
  "browserSync": "https://project.lndo.site",
  "sass": {
    "includePaths": {
      "breakpoint": "./node_modules/breakpoint-sass/stylesheets"
    },
    "src": [
      "assets/styles/*.scss",
      "assets/styles/**/*.scss"
    ],
    "dest": "dist/styles"
  },
  "javascript": {
    "src": "assets/js/*.js",
    "dest": "dist/js/build"
  },
  "jpegs": {
    "src": "src/images/**/*.{jpg,jpeg}",
    "dest": "images"
  },
  "pngs": {
    "src": "src/images/**/*.png",
    "dest": "images"
  },
  "svgs": {
    "src": "src/images/**/*.svg",
    "dest": "images"
  }
}

gulpfile.babel.js

"use strict";

const gulp = require('gulp');
const browsersync = require('browser-sync').create();
const config = require('./config');

// -- development -- //

function css() {
  const sass = require('gulp-sass');
  const globImporter = require('node-sass-glob-importer');
  // Using node-sass transpiler.
  sass.compiler = require('node-sass');

  const gulpStylelint = require('gulp-stylelint');
  const sourcemaps = require('gulp-sourcemaps');
  const autoprefixer = require('gulp-autoprefixer');

  return gulp
    .src(config.sass.src)
    .pipe(gulpStylelint({
      failAfterError: false,
      reporters: [{
        formatter: 'string',
        console: true
      }]
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: "expanded",
      includePaths: config.sass.includePaths.breakpoint,
      importer: globImporter()
    })
      .on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.sass.dest))
    .pipe(browsersync.stream());
}

// -- optimization -- //

function css_optimization() {
  const sass = require('gulp-sass');
  const globImporter = require('node-sass-glob-importer');
  // Using node-sass transpiler.
  sass.compiler = require('node-sass');
  const autoprefixer = require('gulp-autoprefixer');

  return gulp
    .src(config.sass.src)
    .pipe(sass({
      outputStyle: "compressed",
      includePaths: config.sass.includePaths.breakpoint,
      importer: globImporter()
    })
      .on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(config.sass.dest));
}

function jpeg_optimization() {
  const imagemin = require('gulp-imagemin');
  return gulp
    .src(config.jpegs.src)
    .pipe(imagemin([
      imagemin.jpegtran({
        progressive: true
      })
    ]))
    .pipe(gulp.dest(config.jpegs.dest));
}

function png_optimization() {
  const imagemin = require('gulp-imagemin');
  return gulp
    .src(config.pngs.src)
    .pipe(imagemin([
      imagemin.optipng({
        optimizationLevel: 3
      })
    ]))
    .pipe(gulp.dest(config.pngs.dest));
}

function svg_optimization() {
  const imagemin = require('gulp-imagemin');
  return gulp
    .src(config.svgs.src)
    .pipe(imagemin([
      imagemin.svgo()
    ]))
    .pipe(gulp.dest(config.svgs.dest));
}

function js_compression() {
  const uglify = require('gulp-uglify');
  return gulp
    .src(config.javascript.src)
    .pipe(uglify())
    .pipe(gulp.dest(config.javascript.dest))
}

//-- watch & browserSync --//

function serve() {
  browsersync.init({
    proxy: config.browserSync,
  });
}

//-- build --//
function clean() {
  const del = require('del');
  return del('css/');
}

function copyVendors() {
  return gulp.src('node_modules/aos/dist/*')
    .pipe(gulp.dest('dist/vendors/aos/'));
}

function watch() {
  gulp.watch(config.sass.src, css);
  gulp.watch(config.javascript.src, js_compression);
  gulp.watch(config.jpegs.src, jpeg_optimization);
  gulp.watch(config.pngs.src, png_optimization);
  gulp.watch(config.svgs.src, svg_optimization);
}

const image_optimization = gulp.parallel(png_optimization, jpeg_optimization, svg_optimization);
const optimize = gulp.series(js_compression, image_optimization, css_optimization);

exports.dev = gulp.series(
  gulp.parallel(css, js_compression),
  gulp.parallel(watch)
);

exports.image_optimization = image_optimization;

exports.browsersync = gulp.series(
  gulp.parallel(css),
  gulp.parallel(watch, serve)
);

exports.build = gulp.series(
  gulp.series(clean, optimize)
);

exports.copy = gulp.series(copyVendors);