The configuration file must exports tasks
object. tasks
is the place where all gulp tasks will be registered and optionally configured. In most cases, gulp task should run some usefull function. Such function can be exported from separate module under tasks
directory. Module name must be the same as task name.
Each of tasks may run child tasks. This was implement in order to have the ability to build multiple icon packs or multiple CSS bundles for example.
To create such a task simply define the task as an array of options
. In that case, each options
must contain one of id
> name
> bundleName
field in order to properly set name for child task.
For example, if you need to build multiple CSS bundles, then you have to define task styles
as:
styles: [ {bundleName: 'first', /*...*/}, { bundleName: 'second', /*...*/}]
Now for build one of the bundles separately you able to run separate task: styles:first
or styles:second
. And task styles
will run them both.
Each task also may contain such fields:
src: string|string[]
Input path. Usually will be passed togulp.src()
;dest: string
Output path. Usually will be passed togulp.dest()
;watch: boolean|string|string[]
You can simply set this totrue
, and in this case,src
will be used as a path to watch for file changes, or you can set custom path to watch (it will be provided to thegulp.watch()
).deps: string[]
An array of tasks to be executed and completed before your task will run. Will be passed torun-sequence
.
-
Default
false
.Render only changed templates.
Default
null
.Path to
manageEnv
module. More here.Default
null
.Path to directory with locales for templates. All
.yml
,.yaml
or.json
files from here will be read, parsed, merged and passed into template vianunjucksOptions.data
.Default
{path: [/* src paths */], data: {/* localeData */}, envOptions: {watch: false, trimBlocks: true, lstripBlocks: true, autoescape: false}}
.Options for gulp-nunjucks-render.
Default
{indent_size: 2, wrap_attributes: 'auto', preserve_newlines: true, end_with_newline: true,}
.Options for gulp-prettify (HTML sections)
Default
{ extension: '.html' }
.Options for gulp-changed.
-
Default
name
.Default
true
.Default
{ precision: 5, outputStyle: process.env.NODE_ENV === 'production' ? 'compressed' : 'expanded', includePaths: ['node_modules'] }
. Options for gulp-sass/node-sassDefault
{ browsers: ['> 1%'], cascade: false }
. -
When
true
webpack will start in watch mode.Path to webpack configuration file. Specify your own configuration file. Default configuration are defined inside
tasks/webpack.js
file.The simplest way to register
webpack
task is adding a fieldwebpack: {}
in tasks config. And with additionalwatch
task:webpack: { watch: 'path/to/scripts' }
. In this case, gulp watcher will run webpack whenever files changes.But the more efficient way is to let webpack watch for file changes by himself. To do that, split
webpack
task into two child tasks:webpack: [{ name: 'run' }, { name: 'watch', webpackWatch: true }]
Now you have
webpack:run
for the regular build andwebpack:watch
for watch mode. -
Default
icons
.Name of icon bundle. Also used as the filename for generated images, styles and preview files.
Path to *.svg files. Will be passed to the
gulp.src()
.Path to where to store generated sprite. Will be passed to the
gulp.dest()
.Path to where to store generated styles. Will be passed to the
gulp.dest()
.Path to where to store generated html preview. Will be passed to the
gulp.dest()
.Default
false
.You can simply set this to
true
, and in this case,src
will be used as a path to watch for file changes, or you can set custom path to watch (it will be provided to thegulp.watch()
).Default
icon
.Base css class name. Also used as a prefix for each icon in the bundle.
Default
''
.CSS color. Can be any color. During build process this color will be raplaced by 'currentColor'. This little trick gives us ability to use dual color icons. Later in css main color of icon can be set with 'fill' property, and secondary color with 'color' property.
Exclude some icons from cleanup process. During build process from each icon will be removed
fill
,stroke
andopacity
attributes. This is necessary in order to gain control over these properties from CSS. Ignored icons will be included in sprite as is.Default
2
.Precision for icon size ratio.
Default
template.sass
. Path to styles template (relative to task js file).Default
preview.html
. Path to preview page template (relative to task js file).Default
true
.Toggle preview for icon bundle.
-
Default
{port: 3000, notify: false, ghostMode: false, open: false}
.Options for browser-sync.
-
Default
asset-manifest.json
.Options for gulp-rev.
Options for gulp-rev-delete-original.
Options for gulp-rev-replace.