@kunoichi/gulp-assets-task-set NPM

Gulp Assets Task Set

A series of gulp task set for Web Development.

Install via npm library.

npm install --save-dev @kunoichi/gulp-assets-task-set

Run command and copy configs if wanted.

# Copy all config files.
npx copy-config

Or else, you can specify 1 by 1.

# copy gulp file and webpack.
npx copy-config --gulpfile --webpack

Here's a list of command options:

After installation, try npx gulp --tasks to find all tasks.

This library registers many tasks. Basic directory structure is:

src
├img/(*.jpg, *.png, *.gif, *.svg)
├js/*.js
├scss/*.scss
└html/*.pug

These source files are transpiled like:

dist
├img/(*.jpg, *.png, *.gif, *.svg, *.webp)
├js/*.js
├scss/*.css
└*.html

To customize directory name, change task registration in gulpfile.js like gulpTask.all( 'src', 'public' );.

All src/html/*.pug files are compiled to HTML by pug. And you can watch them with BrowserSync by gulp bs.

All src/js/*.js will be transpiled by webpack + babel.

You can import libraries with module loader import { foo } from 'var';. But on WordPress development we recommend @deps comment.

All src/scss/**/*.scss will be transpiled by gulp-sass.

All images in src/img/**/* will be optimized and minified.
Minified dist/img/**/*.{jpg,jpeg,png} will be ottimized into webp dist/img/**/*.jpg.webp.

All css and JS in dist/{js,css}/**/*.{js,css} will be parsed and dumped in wp-dependencies.json with @kunoichi/grab-deps.