@ominestre/zugzug
v2.0.2
Published
Gulp Build Workers
Downloads
3
Readme
[DEPRECATED] ZugZug - Gulp Peon Workers!
I haven't worked with Gulp in several years and haven't put any maintenance or thought into this Gulp scaffold.
~~This module is for quickly adding some common Gulp tasks used in web projects. Work, work.~~
Installation & Setup
Pre-requirements
- NodeJS
- Gulp
Use npm install --save-dev <link-to-this-repo>
or npm install --save-dev @ominestre/zugzug
to install zugzug as one of your projects development dependencies.
How to use
Each function of ZugZug takes a configuration object with the following properties:
- source {Array | String} - path to your source files relative to gulpfile.js
- destination {String} - where to drop the processed files relative to gulpfile.js
- name {String} - OPTIONAL
- This is the name of your output file. Not required for images.
- During minification ".min" will be suffixed onto the name. So if you specify "bundle.js" the final output will be "bundle.min.js".
You will need to create a gulpfile in your primary project directory and pass in the configurations for each task. Here is a sample gulpfile.js using this module with JavaScript and CSS builds:
const gulp = require('gulp');
const build = require('@ominestre/zugzug');
gulp.task('css', () => {
build.css({
source: './path/to/css/test.css',
name: 'work-complete.css',
destination: './build/more/farms/'
});
}));
gulp.task('js', () => {
build.js({
source: './what/you/want.js',
destination: './stop/poking/me/'
});
});
Each task is then invoked from the command line using gulp task-name
. See gulpjs.com for more details on the ins and outs of Gulp.
!important Don't use array notation to pass params into the function due to the JavaScript object having a stowaway for webpack.
gulp.task('js', build.javascript[{
//this is a lazy peon and won't work
}]);
Tasks
CSS
Standalone
The CSS task is included for convenience and legacy support but it is recommended that you adopt SASS instead.
This task features file concatenation of all specified CSS files, auto-prefixing, generates a sourcemap, and minification.
const build = require('@ominestre/zugzug');
build.css({
source: '/path/to/files/*.css',
destination: '/path/to/destination/',
name: 'optional.file.name' //defaults to styles.css if not specified
});
SASS
Does not include minification and concetenation. Chain CSS task after.
This will compile all of your SASS files. It will also run each through an auto-prefixer and generate source maps. For minification it is recommended that you chain the output of this into the CSS task (example below);
const build = require('@ominestre/zugzug');
build.sass({
source: '/path/main.scss',
destination: '/path/to/destination/'
}).on('end', () => {
build.css({
source: '/path/to/destination/main.scss',
destination: '/path/to/destination/',
name: 'sass-demo.css'
});
})
Images
Standalone
Images uses Gulp Imagemin for compression of PNG, JPG, GIF, and SVG files. It will compress all files specified in source. If you use a wild card it will simply pass through all non-image files to the specified destination.
const build = require('@ominestre/zugzug');
build.images({
source: '/path/to/images/*.*',
destination: '/path/to/destination/'
});
JavaScript - Standard
Standalone
With ZugZug, JavaScript handling comes in two flavors. Standard has concatenation of files, babel for ES5 support, sourcemapping, and minification. Webpack is the same as standard with Webpack added for code splitting.
const build = require('@ominestre/zugzug');
build.javascript({
source: '/path/to/files/*.js',
destination: '/path/to/destination/',
name: 'optional.output.name' //uses scripts.js if not specified
});
JavaScript - Webpack
Standalone
The webpack protion of zugzug allows for code splitting of your JavaScript so that you don't end up supporting a monolithic beast script.
To use simply point it to your primary file you wish to bundle like so:
const build = require('@ominestre/zugzug');
build.javascript.webpack({
source: '/path/to/main-js-file.js',
destination: '/path/to/destination/',
name: 'optional.output.name' //uses bundle.js if not specified
});
Zipper
Standalone
Creates a zip file. Or maybe it alerts you when you leave your fly down after taking a whiz.
const build = require('@ominestre/zugzug');
build.zipper({
source: '/path/to/files/**/*.*',
destination: '/path/to/destination/',
name: 'optional.file.name' //defaults to zippity.zip if not specified
})
Mover
Standalone
This is just a simple file mover, equivalent of the mv command.
const build = require('@ominestre/zugzug');
build.mv({
source: '/path/to/files/*',
destination: '/path/to/destination/'
});