samfromaway / Gulp-Boilerplate01

Boilerplate for a Gulp-Workflow for a Youtube video. If you are lazy like me and are always on the watch out of how you can optimize your workflow especially in regards to deploying a HTML CSS Javascript website this boilerplate is for you.

Home Page:https://youtu.be/ssG5mziTF3E

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple CSS/JS sources

ABooooo opened this issue · comments

Hi, thank you for the tutorial and code. I wanted to change your code to work with multiple sources (files/folders). This my code now:

const concat = require('gulp-concat');
const terser = require('gulp-terser');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const { src, series, parallel, dest, watch } = require('gulp');

const jsPath = 'assets/js/*.js';
const cssPath = 'assets/css/**/*.css';

async function jsTask() {
  return src(['someOrdner/someFile.js', 'someOrdner/someFile.js', 'someOrdner/someFile.js'])
    .pipe(concat('all.js'))
    .pipe(terser())
    .pipe(dest('dist'));
}

async function cssTask() {
  return src(['someOrdner/someFile.css', 'someOrdner/someFile.css''])
    .pipe(concat('style.css'))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(dest('dist'));
}

function watchTask() {
  watch([cssPath, jsPath], { interval: 1000 }, parallel(cssTask, jsTask));
}

exports.cssTask = cssTask;
exports.jsTask = jsTask;
exports.default = series(
  parallel(jsTask, cssTask),
  watchTask
);

I need to do it like this because I have different source folders for CSS and JS files and I need to have an exact file order.
So when I compile I get this two errors.

For JS:

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

and for CSS

Gradient has outdated direction syntax. New syntax is like 'closest-side at 0 0' instead of '0 0, closest-side'

I've searched all over Stackoverflow and Googled and haven't found any useful information. Can you help me to solve this?

Thank you!