An open API service indexing awesome lists of open source software.

https://github.com/eyolas/gulp-angular-starter

A started project using AngularJS (can build less or compass)
https://github.com/eyolas/gulp-angular-starter

Last synced: 7 months ago
JSON representation

A started project using AngularJS (can build less or compass)

Awesome Lists containing this project

README

          

Gulp - AngularJS Starter Project
==============================

This repository contains a starter project using AngularJS.
Based on [gulp-angularjs-starter-project](https://github.com/wlepinski/gulp-angularjs-starter-project)

### Compilation phase

To compile the project go to a terminal window pointing to the project's root folder. First of all you need to install all Node dependencies using the command npm install. This will take some time and after that you can use the gulp or gulp compile commands to compile your project.

The compilation result will be stored on the build folder.

The compilation phase has some steps described below:

- Cleans the build folder.
- Compile all css (less and compass see )
- Lint all JS files
- If there's something wrong it stops the stream and show all linting errors on console.
- Creates a new header based on some information available on package.json to be inserted on top off every CSS and JS files.
- Instrospect all HTML files and find all compilation comments.
- For both CSS and JS we're minifying (uglyfing for JS) and revisioning all files present inside a compilation comment.
- For JS files, runs ngMin to assemble AngularJS DI dependencies that doesn't follow the ['dep', function(dep){ }] convention.
- Concatenate all JS libraries and insert a SHA fingerprint on the file.
- Inject a compiled version of all views.
- Copy images files and optimize them.
- Minify all entry HTML files.
- Drop the compilated HTML file on the build directory.

### Serve tasks

There's two serve tasks available to be used. The gulp serve:app and the gulp serve:build.

The gulp serve:app should be used during development. It uses a connect server pointing to the app folder and configures a Livereload server to automatically refresh files. This task depends on another task called watch, that does exactly what you expect it to do.

The gulp serve:build should be used to test the whole compilation process. It uses a connect server pointing to the build folder and there's no Livereload server running on this task.

### Build compass
- Compile all SASS files and drop then on the .tmp folder.
- Refresh the livereload server
- If there's something wrong it stops the stream and show all compilation errors on console.

To build compass, install gulp-compass
```bash
$ npm i --save-dev gulp-compass
```
Uncomment this line
```js
// var compass = require('gulp-compass');
```

add compass in array CSS_COMPILE
```js
var CSS_COMPILE = ['compass', 'nativeCss'];
```

### Build less
- Compile all less files and drop then on the .tmp folder.
- Refresh the livereload server

To build less, install gulp-less
```bash
$ npm i --save-dev gulp-less
```
Uncomment this line
```js
// var less = require('gulp-less');
```

add less in array CSS_COMPILE
```js
var CSS_COMPILE = ['less', 'nativeCss'];
```

## Authors

- [David Touzet](https://github.com/eyolas)
- [William Lepinski](william.lepinski@rga.com) ([gulp-angularjs-starter-project](https://github.com/wlepinski/gulp-angularjs-starter-project))

## License

The [MIT](LICENCE) License