Tom's Gulp Config

Gulp config package which compiles JavaScript using Babel and Terser, SASS using Dart Sass and CleanCSS, and optimises images.

Installation

Install using npm install toms-gulp-config --save-dev. Installation should automatically add 3 scripts to your package.json file. In case this fails, you can add them manually as follows:

scripts: {
  watch: 'gulp --gulpfile=node_modules/toms-gulp-config/gulpfile.esm.js',
  dev: 'gulp build --gulpfile=node_modules/toms-gulp-config/gulpfile.esm.js',
  prod: 'gulp build --prod --gulpfile=node_modules/toms-gulp-config/gulpfile.esm.js',
}

Unlike most Gulp config packages, you don't need to copy the Gulpfile into your project. This is abstracted away via the commands above to reduce clutter and allow the config to be easily updated in the future.

Usage

Run npm run watch to watch files as they are edited.

Run npm run build to run a single development build.

Run npm run prod to build file ready for upload into production.

Included tools

SASS files are generated from src/sass/style.scss and src/sass/admin.scss into assets/css/style.css and assets/css/admin.css. Autoprefixer is always used, CleanCSS is used in production, and sourcemaps are generated when not in production.

JS files are generated from src/js/app.js and src/js/admin.js into assets/js/app.js and assets/js/admin.js. Babel and Terser are always used, and sourcemaps are generated when not in production.

JPG, JPEG, PNG, SVG, and GIF images from src/images/ are optimized into assets/images/.

Other files not mentioned above are copied from src/ into assets/.

Config

Alternatively, if these default directories do not suit your project, you can copy the gulp-config.json file to your project's root directory to override the defaults. Change any directory name, or set it to false to disable that module.