Skip to content

Commit

Permalink
refactor without gulp involved
Browse files Browse the repository at this point in the history
  • Loading branch information
@leftstick
leftstick committed May 8, 2016
1 parent fd0b839 commit 6610053
Show file tree
Hide file tree
Showing 65 changed files with 774 additions and 883 deletions.
46 changes: 16 additions & 30 deletions README.md
View file
@@ -1,21 +1,20 @@
# generator-es6-angular
==================
generator-es6-angular
======================

[![NPM version][npm-image]][npm-url]
![][david-url]
![][dt-url]
![][license-url]

Yeoman generator for es6 based angular skeleton with webpack
Yeoman generator for es6 based angular skeleton


> You can view the online demo at: [http://leftstick.github.io/generator-es6-angular](http://leftstick.github.io/generator-es6-angular)
## Prerequisites ##

1. Install [yeoman](http://yeoman.io/): `npm install -g yo`
2. Install [gulp](http://gulpjs.com/): `npm install -g gulp`
3. Install __this__: `npm install -g generator-es6-angular`
2. Install __this__: `npm install -g generator-es6-angular`

> prepend with `sudo` if you are running on `*nix` OS.
Expand All @@ -29,55 +28,42 @@ Yeoman generator for es6 based angular skeleton with webpack

And then, the [es6](https://github.com/lukehoban/es6features) based project generated.

## Debug your app ##
## Quick start ##

The full featured `gulp` and `webpack` are embedded, it's easy to start debugging your app.
### Debug your app ###

The full featured `dev/dist` tools are provided, it's easy to start debugging your app.

Just move into the created directory with the given `project name`.

Run `gulp dev` to start a debug web server for current working directory.
Run `npm start` to start a debug web server for the project.

Open [http://localhost:8080/webpack-dev-server/index.html](http://localhost:8080/webpack-dev-server/index.html), and have fun.
Open [http://localhost:8080/](http://localhost:8080/) to see the playable skeleton, and have fun.


## Release your app ##
### Release your app ###

Move the root of the created project.

Run `gulp release` to compile all the source code into webpack bundles. And all required resources are generated into `{root}/build/`.
Run `npm run release` to compile all the source code into webpack bundles. And all required resources are generated into `{root}/build/`.

You can copy the `build` folder to anywhere you like, it's the released app.

### Like have a try with the released app? ###
#### Like have a try with the released app? ####

Install [sero-cli](https://github.com/leftstick/Sero-cli): `npm install -g sero-cli`

Move into `{root}/build/`

Run `sero server -r . -p 8080`, a static web server launched at port 8080.
Run `sero server -p 8080 -h`, a static web server launched at port 8080.

Open [http://localhost:8080](http://localhost:8080) to watch the released version.


## note ##

If you'd like to add [jquery](http://jquery.com/) as replacement of `jqLite`, you have to modify the `webpack.config.dev.js` and `webpack.config.prod.js` with following plugin added:

```javascript
new webpack.ProvidePlugin({
$: 'jquery',
'window.jQuery': 'jquery'
}),
```
## More read ##

## References ##
Looking for detail? Check it [here](https://github.com/leftstick/generator-es6-angular/blob/master/docs/api.md)

1. [yeoman](http://yeoman.io/)
2. [gulp](http://gulpjs.com/)
3. [webpack](http://webpack.github.io/)
4. [es6-features](https://github.com/lukehoban/es6features)
5. [angular](https://angularjs.org/)
6. [angular-material](https://material.angularjs.org/latest/)


## LICENSE ##
Expand Down
48 changes: 48 additions & 0 deletions docs/api.md
View file
@@ -0,0 +1,48 @@
## How to involve external library ##

```bash
npm install --save <external library>
```

Open `js/fw/ext/main.js`, `import` it, and append the module name to `export` array if provided.

## Why Dependency Injection looks so weird in this skeleton ##

This is because [ng-annotate](https://github.com/olov/ng-annotate) is chosen for for providing quick DI.

## How to add new route ##

You will find a `Routes.js` in each "feature" folder, it's an `Array` to be exported, and each `object` in it is used to describe a `Route`.

You can easily append more to an exist `feature`, or add a new `feature` with route.

## Why `main.js` exist in each folder ##

The `main.js` in each folder takes the responsibility for managing all modules in that folder, according to such concept, it's more robust to extend functionality without modifying other features.

## How to use jquery ##

```bash
npm install --save jquery
```

If you'd like to add [jquery](http://jquery.com/) as replacement of `jqLite`, you have to modify the `webpack.config.dev.js` and `webpack.config.prod.js` with following plugin added:

```javascript
new webpack.ProvidePlugin({
$: 'jquery',
'window.jQuery': 'jquery'
}),
```

>This is because `AngularJS` internally check if `window.jQuery` provided

## References ##

1. [yeoman](http://yeoman.io/)
2. [gulp](http://gulpjs.com/)
3. [webpack](http://webpack.github.io/)
4. [es6-features](https://github.com/lukehoban/es6features)
5. [angular](https://angularjs.org/)
6. [angular-material](https://material.angularjs.org/latest/)
40 changes: 21 additions & 19 deletions generators/app/index.js
View file
Expand Up @@ -71,15 +71,16 @@ var gen = generators.Base.extend({
'https://registry.npmjs.org'
]
}
], function(answers) {
require('date-util');
this.answers = answers;
this.answers.date = new Date().format('mmm d, yyyy');
this.obj = {answers: this.answers};
done();
}.bind(this));
])
.then(function(answers) {
require('date-util');
self.answers = answers;
self.answers.date = new Date().format('mmm d, yyyy');
self.obj = {answers: self.answers};
done();
});
},
configuring: function() {
configuring: function(answers) {
var path = require('path');
var fs = require('fs');
var self = this;
Expand All @@ -104,20 +105,21 @@ var gen = generators.Base.extend({
interpolate: /<%=([\s\S]+?)%>/g
})(self.obj);
});
self.directory(self.templatePath('less'), self.destinationPath('less'));
self.directory(self.templatePath('font'), self.destinationPath('font'));
self.directory(self.templatePath('mock'), self.destinationPath('mock'));
self.copy(self.templatePath('gitignore'), self.destinationPath('.gitignore'));
self.copy(self.templatePath('gulpfile.js'), self.destinationPath('gulpfile.js'));
self.fs.copyTpl(self.templatePath('index.html_vm'), self.destinationPath('index.html'), self.obj);
self.directory(self.templatePath('css'), self.destinationPath('css'));
self.fs.copy(self.templatePath('eslintrc'), self.destinationPath('.eslintrc'));
self.fs.copy(self.templatePath('gitignore'), self.destinationPath('.gitignore'));
self.fs.copy(self.templatePath('index.html_vm'), self.destinationPath('index.html_vm'));

self.fs.copyTpl(self.templatePath('package.json_vm'), self.destinationPath('package.json'), self.obj);
self.copy(self.templatePath('webpack.config.dev.js'), self.destinationPath('webpack.config.dev.js'));
self.copy(self.templatePath('webpack.config.prod.js'), self.destinationPath('webpack.config.prod.js'));

self.fs.copyTpl(self.templatePath('webpack.config.dev.js'),
self.destinationPath('webpack.config.dev.js'), self.obj);

self.fs.copyTpl(self.templatePath('webpack.config.prod.js'),
self.destinationPath('webpack.config.prod.js'), self.obj);
},
install: function() {
this.npmInstall(undefined, {
registry: this.answers.registry
});
this.npmInstall(null, {registry: this.answers.registry});
},
end: function() {
this.log.ok('Project ' + this.answers.name + ' generated!!!');
Expand Down
177 changes: 177 additions & 0 deletions generators/app/templates/css/main.css
View file
@@ -0,0 +1,177 @@
/* body */
*{
box-sizing: border-box;
}

html, body{
margin: 0;
padding: 0;
}

body{
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

a[disabled]{
pointer-events: none;
color: #7f8c8d;
}

a{
text-decoration: none;
color: #2E64FE;
}

[ng-view]{
text-align: center;
}

/* nav */
#nav {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

#nav li {
display: inline-block;
line-height: 40px;
}

.nav-link {
color: #7f8c8d;
cursor: pointer;
text-decoration: none;
padding-bottom: 3px;
margin: 0 25px;
}

.nav-link.active {
color: #424242;
}

.nav-link:first-child {
margin-left: 0;
}

.nav-link:hover {
border-bottom: 3px solid #dd1b16;
}

/* logo */
#logo-wrap {
margin: 55px 0 20px 0;
}

#logo-wrap img{
margin-bottom: 15px;
}

#logo-wrap h1 {
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
font-size: 27px;
}

#desc {
max-width: 800px;
padding: 0 20px;
text-align: center;
margin: 10px auto;
color: #7f8c8d;
}

#github{
margin: 30px 0 30px 0;
}

#todo-app{
width: 250px;
margin: 0 auto;
}

#todo-app input[type="text"]{
width: 250px;
height: 35px;
font-size: 16px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}

#todo-app .todos{
width: 100%;
list-style-type: none;
margin: 10px 0 10px 0 ;
padding: 0;
text-align: left;
}

#todo-app .todos li{
padding-top: 4px;
}

#todo-app .todos li span{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 225px;
display: inline-block;
line-height: 24px;
vertical-align: middle;
}

#todo-app .archive{
text-decoration: none;
}

#why{
width: 600px;
margin: 55px auto 15px auto;
padding: 5px;
text-align: left;
border: 1px solid #D8D8D8;
border-radius: 2px;
background-color: #f7f7f9;
}

#why h4{
margin-top: 0;
}

#why ul li {
padding-top: 5px;
}

#more{
width: 600px;
margin: 30px auto 15px auto;
padding: 5px;
}

#more .button{
display: inline-block;
width: 150px;
height: 35px;
line-height: 35px;
color: #fff;
border-radius: 2px;
border-width: 0;
background-color: #FE2E2E;
box-shadow: 2px 2px 1px #a6120d;
transition: all 0.3s ease 0s;
}

#more .button:hover{
box-shadow: 4px 4px 2px #a6120d;
}

/* footer */
#footer{
margin-top: 20px;
text-align: center;
padding: 20px 0;
background-color: #D8D8D8;
}

0 comments on commit 6610053

Please sign in to comment.