Proa-gulp NPM | npm.io

Proa Gulp

Gulp settings for front-end projects of Proa Data.

Get started

Install

npm install --save-dev proa-gulp

Folder structure

Here is the essential basic organization you must to put in your project:

├─ src/
│  ├─ styles/
│  │  ├─ _variables.scss
│  │  ├─ index.less
│  │  └─ index.scss
│  └─ index.html
├─ bower.json
├─ gulpfile.js
└─ package.json

In src, only index.html is required. However, if Sass is used, both files must to exist.

Gulp file

gulpfile.js simply would look like:

require('proa-gulp');

Optionally, to work with HTML5 mode, invoke html5Mode to prefix path of assets.

var proaGulp = require('proa-gulp');
proaGulp.html5Mode();

Dependencies

These ones are automatically built by Gulp Useref, Wiredep and Gulp Inject. Then, to reach this, index.html would have to look basically like:

<!DOCTYPE html>
<html>
<head>
	<!-- build:css styles/vendor.css -->
	<!-- bower:css --><!-- endbower -->
	<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/vendor.js -->
<!-- bower:js --><!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>

AngularJS modules

One of these should to be named "app", ideally the main one.

Domains

At least it should be defined the local one. See the proper section.

Usage

Tasks

Mainly the Gulp ones are the following:

gulp or gulp serve are for running a test server and develop with live reload.
gulp build only builds the distributable version.
With gulp serve:dist, a combination of the above is achieved: Specifically, the server runs this version but without reload.

Domains

Running Gulp command, an additional parameter can be included (e.g.: gulp --dev o gulp build --pro) to indicate the domain of connection path. Defaults to "local".

These domain URLs must to appear listed in package.json with the property domains (optionally also domainsAliases, to assign domain name for each alias).

And, to capture the selected URL, put {{PROA_DOMAIN}} where it would be located in your source code.

Support

The main supported packages/languages/libraries are:

Bower.
Preprocessors:
- HTML: Pug.
- CSS:
  - Less.
  - Sass.
AngularJS.

Pending

Improves to do:

Once the server waits for changes, synchronize also the deletion of files (from src).
Sass errors must not break the Gulp process (like Less).
Bower should be replaced as a dependency manager. It is currently under maintenance and, therefore, its use is not recommended.