A scalable modular Gulp based assets pipeline.
1. Update your Node JS installation
2. Install gulp globally:
If you have previously installed a version of gulp globally, please run
npm rm -g gulp
to make sure your old version doesn't collide with gulp-cli.
$ npm install -g gulp-cli
3. Initialize in your project directory:
$ npm init
4. Install the Webdev Toolkit in your project devDependencies:
$ npm install webdev-toolkit --save-dev
If you don't have some of the required files, the toolkit will create them for you:
5. Load the toolkit in your Gulpfile
// Add to your gulpfile.js// Require Gulpvar gulp = ;// Import front-end toolkit tasksgulp;
- Loads individual tasks from the webdev-toolkit for use in your project.
- Easily integrates into your gulpfile.js without breaking your existing tasks.
- Each task is stored in it's own local node module to completely separate concerns.
We suggest using the following default folder layout. You can change it to suit your own structure by setting the correct paths in configuration.
put this in the 'main' property of your 'package.json' for StealJS.
gulp The default task. Use this for front-end development. Builds your assets, starts a watcher and live reloads changes in the browser using Browser-Sync.
gulp build Use this when building your project. Mostly used by back-end developers and on Jenkins CI.
gulp test Use this to run both the styles and script linter.
gulp -T for a list of all available tasks
Run tasks with the
--production handle on your build system. This ensures that hard errors are thrown (so builds fail on errors) and stuff gets minified.
gulp build --production
You can configure the toolkit by setting options in
.webdevtoolkitrc or a
webdevtoolkit key in your
// .webdevtoolkitrc// Set options
||Main dist folder followed by a forward slash|
||Comma separated list of filetypes|
||Filename for concatenated npm styles|
||Location of node modules|
||Where to copy static assets for distribution|
||Fonts source dir|
||Distribution fonts dir|
||Images source dir|
||Distribution images dir|
||Stylesheets that are parsed|
||Stylesheets source folder|
||Location of styles components|
||Indexable components to ignore, handy if you dont have any components at all.|
||Distribution css dir|
||Location of Apache htdocs for Browser Sync|
||Decide which URL to open automatically when Browsersync starts.|
||Glob with additional folders to watch, for example your template files or php views.|
||Options for Steal-Tools Build|
Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 2 versions or > 5%.
You can configure autoprefixer by setting the
browserslist key in your
Front-end dependencies are loaded via NPM, so install them into your project by running:
$ npm install name-of-package --save
Module loading with StealJS
StealJS is a module loader and builder that will help you create the next great app. It's designed to simplify dependency management while being extremely powerful and flexible. StealJS is composed of two parts.
You can configure Steal by setting a steal property in
Steal-tools is configured by setting the Stealtools property in
You can overwrite the main property of a package in your package.json, to get for example some fonts or images into your
When a stylesheet is included, the relative paths to background-images and font-path etc. will be rewritten to point to the
npm.dist folder. Styles will be bundled in
.eslintrc and ignores can be added in *
Styles are linted by stylelint. A mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets. Finding and loading of your configuration object is done with cosmiconfig. Starting from the current working directory, it will look for the following possible sources, in this order:
stylelint property in package.json
stylelint.config.js file exporting a JS object