RPeraltaJr
5/15/2019 - 8:36 PM

Gulpfile.js (Version 4)

Download Node.js - https://nodejs.org/en Node v18.17.1

/*
* ------------------------------------------------------------------------------
* Gulpfile.js
* https://gulpjs.com/
* ------------------------------------------------------------------------------
*/

const gulp = require('gulp');
// const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-dart-sass');
const rename = require('gulp-rename');
const sassGlob = require('gulp-sass-glob');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const es = require('event-stream');

const paths = {
  styles: {
    scssInput: 'assets/uncompiled/scss/*.scss',
    modules: 'components/**/**/*.scss',
    cssInput: 'assets/uncompiled/css/*.css',
    cssDest: 'assets/uncompiled/css/',
    cssDestMin: 'assets/build/css/',
  },
  scripts: {
    inputs: [
      './assets/uncompiled/js/page-home.js',
      './assets/uncompiled/js/page-submissions.js',
    ],
    modules: 'assets/uncompiled/js/modules/*.js',
    dest: 'assets/build/js/',
  },
};

const sassOptions = {
  outputStyle: 'expanded',
};

// * Compiles Sass and minifies CSS
function styles() {
  return gulp
    .src(paths.styles.scssInput)
    .pipe(sassGlob())
    .pipe(sass(sassOptions)).on('error', sass.logError)
    .pipe(autoprefixer({
      grid: true,
    }))
    .pipe(gulp.dest(paths.styles.cssDest))
    .pipe(cleanCSS())
    .pipe(rename({
      suffix: '.min',
    }))
    .pipe(gulp.dest(paths.styles.cssDestMin));
}
exports.styles = styles;

// * Compresses Scripts
async function scripts() {
  const tasks = await paths.scripts.inputs.map((entry) => {
    return (
      browserify({
        entries: [entry],
        debug: true,
      })
      .transform(babelify, {
        presets: ['@babel/preset-env'],
      })
      .bundle()
      .pipe(source(entry))
      .pipe(buffer())
      // .pipe(sourcemaps.init())
      .pipe(uglify())
      // .pipe(sourcemaps.write('./'))
      .pipe(rename({
        dirname: '',
        extname: '.min.js',
      }))
      .pipe(gulp.dest(paths.scripts.dest))
    );
  });

  return es.merge.apply(null, tasks);
}
exports.scripts = scripts;

// * Watch Task
function watch() {
  gulp.watch(paths.styles.scssInput, styles).on('all', (event, path, stats) => {
    console.log(`File ${path} was ${event}, running tasks...`);
  });
  gulp.watch(paths.styles.modules, styles).on('all', (event, path, stats) => {
    console.log(`File ${path} was ${event}, running tasks...`);
  });
  gulp.watch(paths.scripts.inputs, scripts).on('all', (event, path, stats) => {
    console.log(`File ${path} was ${event}, running tasks...`);
  });
  gulp.watch(paths.scripts.modules, scripts).on('all', (event, path, stats) => {
    console.log(`File ${path} was ${event}, running tasks...`);
  });
}
exports.watch = watch;

const build = gulp.parallel(styles, scripts, watch);
gulp.task('default', build);
{
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babelify": "^10.0.0",
    "browserify": "^16.2.3",
    "event-stream": "^4.0.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-cli": "^2.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-dart-sass": "^1.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass-glob": "^1.0.9",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.64.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}