Tooling

Setup Kickoff

We assume you have node and npm already installed. We require node version 6 or higher be installed to run Kickoff effectively.

Install Yeoman and the Kickoff Yeoman Generator

The command below will install Yeoman and the Kickoff Yeoman generator. The Yeoman generator is used to scaffold new projects using Kickoff and to help you while developing to make common tasks much more easier to achieve.

npm i -g yo generator-kickoff

Once you have got Kickoff, install all the Node dependencies

Kickoff’s package.json contains information for all the project’s dependencies

To install them, use your terminal to cd into the root of the Kickoff directory, and then run npm install. This will install all of the required dependencies to a new folder called node_modules inside your project.

Troubleshooting

Should you encounter problems with installing dependencies or running gulp commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.


Rock-solid build tasks

Kickoff comes with a number of useful gulp, webpack and other tasks configured for you to use. These are tasks that you can run in the command line from the root directory of your Kickoff project.

NPM run scripts

Command Description
npm run compile:css Sass (Libsass via node-sass), Postcss with Autoprefixer, CSSNano, Source Maps & more..
npm run compile:js Babel, Webpack
npm run compile:svg Auto-generated SVG sprites
npm run compress:images Image compression with imagemin
npm run compile:all Compile all the things
npm run watch Watch all files for changes
npm start Basic dev server using Browsersync
npm run lint:js Lint JS using xo
npm run fix:js Fix JS linting issues using xo
npm run lint:css Lint CSS using stylelint. We use the https://github.com/stylelint/stylelint-config-standard rules for our linting
npm run compile:release Add the --release flag to any other task, e.g. gulp javascript --release or gulp css --release
npm run deploy Compile all assets for production deployment
npm test Run javascript and css tests
npm run release-patch Creates a patch release using release-it
npm run release-minor Creates a minor release using release-it
npm run release-major Creates a major release using release-it
npm run release-premajor Creates a premajor release using release-it

Tooling config

Tooling config variables allow you to control some of the basic settings of your Kickoff project. They can be found in the .kickoff/config.js file. It is especially useful if you want to change the location of the assets directory, see this post on the subject.

Where next?