Skip to content

Commit

Permalink
initial commit, no options, but working
Browse files Browse the repository at this point in the history
  • Loading branch information
Swiip committed Apr 28, 2014
0 parents commit 84f0926
Show file tree
Hide file tree
Showing 25 changed files with 912 additions and 0 deletions.
13 changes: 13 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules/
temp/
.DS_Store
21 changes: 21 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"node": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"white": true
}
7 changes: 7 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
language: node_js
node_js:
- '0.10'
before_install:
- currentfolder=${PWD##*/}
- if [ "$currentfolder" != 'generator-gulp-angular' ]; then cd .. && eval "mv $currentfolder generator-gulp-angular" && cd generator-gulp-angular; fi

100 changes: 100 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# generator-gulp-angular [![Build Status](https://secure.travis-ci.org/Swiip/generator-gulp-angular.png?branch=master)](https://travis-ci.org/Swiip/generator-gulp-angular)

> [Yeoman](http://yeoman.io) generator
Offers you a Yeoman generator to initiate a Web application with the following workflow:

<img height="100" align="left" src="https://raw.githubusercontent.com/yeoman/yeoman.io/master/app/assets/img/bullet-yo.gif">

<img height="100" align="left" src="http://bower.io/img/bower-logo.png">

<img height="100" align="left" src="https://s3.amazonaws.com/media-p.slid.es/uploads/hugojosefson/images/86267/angularjs-logo.png">

<img height="100" align="left" src="https://raw.github.com/gulpjs/artwork/master/gulp.png">

## Why generator-gulp-angular ?

This generator aims to takes the best from others generators like generator-angular, ngTailor and generator-gulp-webapp to offers the best workflow to start an application with AngularJS powered by Gulp!

generator-gulp-angular scaffolds out an Angularjs application with a full featured gulpfile.js wich offers all the tasks for a modern Web development.

## Getting Started

### What is Yeoman?

Trick question. It's not a thing. It's this guy:

![](http://i.imgur.com/JHaAlBJ.png)

Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create.

Not every new computer comes with a Yeoman pre-installed. He lives in the [npm](https://npmjs.org) package repository. You only have to ask for him once, then he packs up and moves into your hard drive. *Make sure you clean up, he likes new and shiny things.*

```
$ npm install -g yo
```

### Yeoman Generators

Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.

To install generator-gulp-angular from npm, run:

```
$ npm install -g generator-gulp-angular
```

Finally, initiate the generator:

```
$ yo gulp-angular
```

### Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.

If you'd like to get to know Yeoman better and meet some of his friends, [Grunt](http://gruntjs.com) and [Bower](http://bower.io), check out the complete [Getting Started Guide](/~https://github.com/yeoman/yeoman/wiki/Getting-Started).

## Directory structure

[Best Practice Recommendations for Angular App Structure](https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub)

But I think keeping first division by file type: scripts, styles, partials.

## Features included in the gulpfile
* useref
* ngMin
* uglify
* cssmin
* rev
* watch
* connect
* jshint
* **TODO** image optimization
* **TODO** lazy
* **TODO** browser sync
* **TODO** Unit test
* **TODO** e2e test

## Questions the generator will asks
* **TODO** jQuery: jQuery, Zepto, none
* **TODO** Angular modules: resources, animate...
* **TODO** Angular UI modules: Bootstrap, Router, Utils...
* **TODO** CSS Framework: Bootstrap with CSS, sass or less.
* **TODO** CSS preprocessor: less, sass, none
* **TODO** JS preprocessor: CoffeeScript, TypeScript, ECMAScript6 (Traceur)
* **TODO** HTML preprocessor: Jade ?
* **TODO** *Script loader: Require, Browserify, ES6 with Require ?*
* **TODO** Test framework: Jasmine, Mocha, Qunit

## Changelog

### 0.0.1

* Initial commit
* Scaffolds a working directory but with no options

## License

MIT
101 changes: 101 additions & 0 deletions app/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
'use strict';

var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var chalk = require('chalk');

var GulpAngularGenerator = yeoman.generators.Base.extend({
init: function () {
this.pkg = require('../package.json');

this.argument('appname', { type: String, required: false });
this.appname = this.appname || path.basename(process.cwd());
this.appname = this._.camelize(this._.slugify(this._.humanize(this.appname)));

this.on('end', function () {
if (!this.options['skip-install']) {
this.installDependencies();
}
});
},

askFor: function () {
//var done = this.async();

// have Yeoman greet the user
this.log(this.yeoman);

// replace it with a short and sweet description of your generator
this.log(chalk.magenta('You\'re using the fantastic GulpAngular generator.'));

/*var prompts = [{
type: 'confirm',
name: 'someOption',
message: 'Would you like to enable this option?',
default: true
}];
this.prompt(prompts, function (props) {
this.someOption = props.someOption;
done();
}.bind(this));*/
},

app: function () {
var directories = [
'app',
'app/images',
'app/partials',
'app/scripts',
'app/scripts/main',
'app/styles'
]

var copyFiles = [
'app/favicon.ico',
'app/404.html',
'app/images/yeoman.png',
'app/partials/main.html',
'app/styles/main.scss'
];

var templateFiles = [
'package.json',
'bower.json',
'gulpfile.js',
'app/index.html',
'app/scripts/main/main-ctrl.js'
];

var configFiles = [
'gitignore',
'editorconfig',
'jshintrc',
'bowerrc'
];

directories.forEach(function(directory) {
this.mkdir(directory);
}.bind(this));

copyFiles.forEach(function(file) {
this.copy(file, file);
}.bind(this));

templateFiles.forEach(function(file) {
var basename = path.basename(file);
var source = file.replace(basename, '_' + basename);
this.template(source, file);
}.bind(this));

this.template('app/scripts/_appname.js', 'app/scripts/' + this.appname + '.js')

configFiles.forEach(function(file) {
this.copy(file, '.' + file);
}.bind(this));
}
});

module.exports = GulpAngularGenerator;
14 changes: 14 additions & 0 deletions app/templates/_bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "<%= appname %>",
"version": "0.0.0",
"dependencies": {
"modernizr": "2.6.2",
"angular": "1.2.x",
"angular-route": "1.2.x",
"bootstrap-sass-official": "3.1.1"
},
"devDependencies": {},
"resolutions": {
"angular": "1.2.x"
}
}
128 changes: 128 additions & 0 deletions app/templates/_gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
'use strict';

var gulp = require('gulp');

// load plugins
var $ = require('gulp-load-plugins')();

gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.rubySass({ style: 'expanded' }))
.pipe($.autoprefixer('last 1 version'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});

gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter($.jshintStylish))
.pipe($.size());
});

gulp.task('html', ['styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');

return gulp.src('app/*.html')
.pipe($.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngmin())
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.useref.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(gulp.dest('dist'))
.pipe($.size());
});

gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});

gulp.task('fonts', function () {
return $.bowerFiles()
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/fonts'))
.pipe($.size());
});

gulp.task('clean', function () {
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
});

gulp.task('build', ['html', 'images', 'fonts']);

gulp.task('default', ['clean'], function () {
gulp.start('build');
});

gulp.task('connect', function () {
var connect = require('connect');
var app = connect()
.use(require('connect-livereload')({ port: 35729 }))
.use(connect.static('app'))
.use(connect.static('.tmp'))
.use(connect.directory('app'));

require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});

gulp.task('serve', ['connect', 'styles'], function () {
require('opn')('http://localhost:9000');
});

// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;

gulp.src('app/styles/*.scss')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app/styles'));

gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap-sass-official']
}))
.pipe(gulp.dest('app'));
});

gulp.task('watch', ['connect', 'serve'], function () {
var server = $.livereload();

// watch for changes

gulp.watch([
'app/*.html',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', function (file) {
server.changed(file.path);
});

gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
});
Loading

0 comments on commit 84f0926

Please sign in to comment.