BasicGulp file to simple front end

.eslintrc.js

module.exports = {
  'root': true,
  'extends': 'eslint:recommended',
  'globals': {
    'wp': true,
  },
  'env': {
    'node': true,
    'es6': true,
    'amd': true,
    'browser': true,
    'jquery': true,
  },
  'parserOptions': {
    'ecmaFeatures': {
      'globalReturn': true,
      'generators': false,
      'objectLiteralDuplicateProperties': false,
      'experimentalObjectRestSpread': true,
    },
    'ecmaVersion': 2019,
    'sourceType': 'module',
  },
  'rules': {
    'no-console': 0,
    'quotes': ['error', 'single'],
    'comma-dangle': [
      'error',
      {
        'arrays': 'always-multiline',
        'objects': 'always-multiline',
        'imports': 'always-multiline',
        'exports': 'always-multiline',
        'functions': 'ignore',
      },
    ],
  },
};

.stylelintrc

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "no-empty-source": null,
    "indentation": 2,
    "declaration-colon-newline-after": "always-multi-line",
    "no-descending-specificity": null,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "critical-path",
          "at-root",
          "debug",
          "warn",
          "error",
          "if",
          "else",
          "for",
          "each",
          "while",
          "mixin",
          "include",
          "content",
          "return",
          "function",
          "tailwind",
          "apply",
          "responsive",
          "variants",
          "screen"
        ]
      }
    ]
  }
}

README.md

Gulp File with basic compressions and assets builder

To install

• Download the package.json and the gulpfile.js
• Once downloaded, go to the terminal and run the command npm install, once with the packages installed you can run the command below.

Commands

• gulp -> It will compress your files and move the font files to the folder /dist
• gulp watch -> will start to watch your files on the folder assets
• gulp production -> will compress your files using a hash on it name and generate a file called assets-manifest.json that will have all yor css and js files names.

Folder structure recommended

• gulpfile.js
• package.json
• assets
  • scripts
  • styles
  • images
  • fonts
• dist
  • scripts
  • styles
  • images
  • fonts
  • assets-manifest.json

gulpfile.js

const { series, src, dest, watch } = require('gulp');

const rename     = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const rev        = require("gulp-rev");
const gulpif     = require('gulp-if');
const rimraf     = require('rimraf');
const revDel     = require('rev-del');

const assets_basepath = './assets';
const output_basepath = './dist';
const manifest_name   = 'assets-manifest.json';
const manifest_path   = `../${manifest_name}`;

function clean(cb) {
  const is_production = process.argv.indexOf('--production') !== -1;

  if(!is_production) {
    rimraf(`${output_basepath}/**/main-*`, cb);
    rimraf(`${output_basepath}/${manifest_name}`, cb);
  }

  cb();
}

function scripts(cb) {
  const eslint  = require('gulp-eslint');
  const babel   = require('gulp-babel');
  const uglify  = require('gulp-uglify');
  const is_production = process.argv.indexOf('--production') !== -1;

  return src(`${assets_basepath}/scripts/[^_]*.js`)
  .pipe(eslint())
  .pipe(babel())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' }))
  .pipe(sourcemaps.write('./'))
  .pipe(gulpif(is_production, rev()))
  .pipe(dest(`${output_basepath}/scripts`))
  .pipe(gulpif(is_production, rev.manifest(manifest_path)))
  .pipe(gulpif(is_production, revDel({ dest: 'dist', oldManifest: manifest_path })))
  .pipe(gulpif(is_production, dest(`${output_basepath}/scripts`)))
}

function styles(cb) {
  const cssnano = require('gulp-cssnano');
  const gulpStylelint = require('gulp-stylelint');
  const is_production = process.argv.indexOf('--production') !== -1;

  return src(`${assets_basepath}/styles/[^_]*.scss`)
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(gulpStylelint({
    reporters: [
      {formatter: 'string', console: true}
    ]
  }))
  .pipe(cssnano())
  .pipe(rename({ extname: '.min.css' }))
  .pipe(sourcemaps.write(`./`))
  .pipe(gulpif(is_production, rev()))
  .pipe(dest(`${output_basepath}/styles`))
  .pipe(gulpif(is_production, rev.manifest(manifest_path, {merge: true})))
  .pipe(gulpif(is_production, revDel({ dest: 'dist', oldManifest: manifest_path })))
  .pipe(gulpif(is_production, dest(`${output_basepath}/styles`)))
}

function images() {
  const imageCompress = require('gulp-image');

  return src(`${assets_basepath}/images/*`)
  .pipe(imageCompress({
    pngquant: true,
    optipng: true,
    zopflipng: true,
    jpegRecompress: false,
    mozjpeg: true,
    svgo: true,
    concurrent: 10
  }))
  .pipe(dest(`${output_basepath}/images/`));
}

function filesWatch() {
  watch(`${assets_basepath}/scripts`, scripts);
  watch(`${assets_basepath}/styles`, styles);
  watch(`${assets_basepath}/images`, images);
  watch(`${assets_basepath}/fonts`, fonts);
}

function fonts(cb) {
  const fse = require('fs-extra');

  fse.copySync(`${assets_basepath}/fonts`, `${output_basepath}/fonts`, { overwrite: true });

  cb();
}

exports.default = series(clean, scripts, styles, images, fonts);
exports.watch = filesWatch;
exports.clean = clean;

package.json

{
  "name": "gulp-sample",
  "author": "Victor Larodiel <[email protected]> (https://github.com/larodiel)",
  "version": "1.0.0",
  "private": true,
  "main": "dist/scripts/main.min.js",
  "devDependencies": {
    "fs-extra": "^10.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-eslint": "^6.0.0",
    "gulp-if": "^3.0.0",
    "gulp-image": "^6.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-rev": "^9.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-stylelint": "^13.0.0",
    "gulp-uglify": "^3.0.2",
    "rev-del": "^2.0.0",
    "rimraf": "^2.6.3",
    "stylelint": "^13.13.1"
  },
  "scripts": {
    "start": "gulp",
    "watch": "gulp watch",
    "production": "gulp --production"
  },
  "dependencies": {
    "stylelint-config-recommended": "^5.0.0"
  }
}