Gulp settings for front-end projects of Proa Data.
npm install --save-dev proa-gulpHere 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.
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();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>One of these should to be named "app", ideally the main one.
At least it should be defined the local one. See the proper section.
Mainly the Gulp ones are the following:
gulporgulp serveare for running a test server and develop with live reload.gulp buildonly builds the distributable version.- With
gulp serve:dist, a combination of the above is achieved: Specifically, the server runs this version but without reload.
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.
The main supported packages/languages/libraries are:
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.