Angular Component Tasks

Common Gulp tasks used across angular component projects.

Table of contents

• Install
• Usage
• Configuration
• Paths
• Component Example
• Advance

Install

npm install --save-dev gulp
npm install --save-dev angular-component-tasks

Usage

// gulpfile.js
var tasks = require('angular-component-tasks')(require('gulp'), {
    // config here
})

Configuration

Example configuration see gulpfile.js

• name : the application name. Default: bower.name or package.name.
• src : the root where the source code lies. Default: ''
• dest : the destination directory where the build will be distributed. ''
• index : the html index file of application.
• temp : the temp directory where the files will be generated in develop mode. Default: .temp
• scripts
  • src : source directory of the js files
  • dest : destination directory of the js files
  • files : array of gulp src files
  • export : the js bundle name to export. Default: APP_NAME.js
• styles
  • src : source directory of the css files
  • dest : destination directory of the css files
  • files : array of gulp src files
  • export : the css bundle name to export. Default: APP_NAME.css
• templates
  • src : source directory of the html files
  • dest : destination directory of the html files
  • files : array of gulp src files
  • export : the filename to export. Default: APP_NAME-templates.html
  • module : the angular module of the templates. Default : undefined
  • url : the template url root path. Default: ''
• copy
  • files : [TODO]

Paths

This section explains how the paths are combined. The src, files and dest path are build using the tree configuration logic. By going from parent to child the files wil be a concatenation of

• config.src + config.script.src + config.script.files

To avoid the tree concatenation use the / character at the begining of path ex:

• config.scripts.files = /*.js -> this will search for root js.
• config.scripts.src = /src/js -> this will be the path specified from the root.

Example:

src: 'src',
scripts: {
  files: [
      '*.js',
      '/vendor/*.js',
      '!**/*.spec.js'
  ],
  src: 'js'
},
styles : {
  files: [
    '*.css', 
    '/vendor/*.css'
  ]
  src: '/styles'
}

from | to -----------------|------------------- scripts | *.js | src/js/*.js /vendor/*.js | vendor/js/*.js !**/*.spec.js | !src/js/**/*.spec.js styles | *.css | styles/*.css /vendor/*.css | vendor/*.css

Note: seems complex but keep in mind is the same as you are referencing files in an index.html, using '/' to reference the root.
Note: not sure how to use paths, avoid declaring src on parent and use absolute paths.
Note: to see the generated config use gulp config --verbose

Component Example

To see a real component example using this library goto Angular Component Seed To use the this example folder structure for you component don't define any configuration use only this line of code on you gulpfile.

require('angular-component-tasks')(require('gulp'), 'MODULE_NAME', 'EXPORT_FILENAME')

Advance

1. Generate GulpFile [TODO]