swiip / generator-gulp-angular

Yeoman generator for AngularJS with GulpJS [UNMAINTAINED next iteration is FountainJS]

generator-gulp-angular

Yeoman generator for AngularJS + Gulp.

Lets you quickly set up a project with:

• your favorite technologies
• web best pratices.
• guidelines powered by Google.

Gulp provide fast workspace with quick feedback.

Unmaintained, Outdated ? 😔

Yup, this generator works but is unmaintained and outdated for various reasons.

But don't panic the most important features and more are present in our next iteration called FountainJS.

A tutorial is present in the Yeoman codelab. 😘

Usage

More informations, options, parameters in the usage documentation page

Install

Install required tools yo, gulp and bower:

npm install -g yo gulp bower

Install generator-gulp-angular:

npm install -g generator-gulp-angular

Run

Create a new directory, and go into:

mkdir my-new-project && cd $_

Run yo gulp-angular, and select desired technologies:

yo gulp-angular

Documentation

• docs/README
• More informations about how to use your new project is available in the docs/user-guide
• If you want to know: docs/how-it-works.

Features

List features included

Questions the generator will ask

Questions the generator will ask

Changelog

All changes listed in the GitHub releases

Contributing

Guidelines

License

MIT

generator-gulp-angular's Issues

Adding Jade and Coffeescript (need help)

MattCowski/gulp-angular-jade-coffee@980abc9

It seems close but I'm not too familiar with gulp so perhaps someone could point out what I'm doing wrong. Thanks.

Add angular generators

like in default generator:
angular:constant
angular:controller
angular:decorator
angular:directive
angular:factory
angular:filter
angular:main
angular:provider
angular:route
angular:service
angular:value
angular:view

UI Bootstrap / Angular Strap

I would like to use UI Bootstrap or Angular Strap in a project started with generator-gulp-angular.

That is on the TODO-list - but could anyone explain og suggest ways to manually incorporate these modules?

The 'bower_components' folder should be outside the 'app' folder

Modern editors creates an index of the project files to make easy navigate between they, search functions etc, the problem is that the 'bower_components' folder will be included in this index.

browser-sync error

When I run my project everything works as shout, but when opening developer tools on chrome, i'm getting this error:

GET http://localhost:3000/socket.io/?EIO=2&transport=polling&t=1411161214553-3 net::ERR_CONNECTION_REFUSED browser-sync-client.1.3.7.js:2

gulp serve will stop.

Any ideas whats wrong?

Blank page in clean project

Getting blank page when running gulp serve:dist in a clean project, please reproduce.

console output: Failed to load resource: the server responded with a status of 404 (Not Found)  http://192.168.20.32:3002/partials/main.html

Error: version not found: [email protected]

The npm install step failed systematically on my mac while trying to install :

"gulp-imagemin": "^0.6",

I've managed to make it work by bumping the version to :

"gulp-imagemin": "^1",

The dist/index.html file is not update with the revision number of js and css file

After doing '''yo gulp-angular''' the index.html file is not update with the js and css file with their revision numbers. I don't know if it depends from the depracted warning during the build process

Images are not copying over to the /dist folder

Running gulp images will not copy the files over to the /dist folder as it should.

I suspect it may have to do with using gulp-cache, because running the image task without the cache will show its output and will correctly place the images into the dist/ folder

.pipe($.imagemin({
    optimizationLevel: 3,
    progressive: true,
    interlaced: true
}))
.pipe(gulp.dest('dist/images'))
.pipe($.size());

[11:19:16] Using gulpfile d:\Projects\_test\gulp\gulpfile.js
[11:19:16] Starting 'images'...
[11:19:18] gulp-imagemin: Minified 10 images (saved 52.16 kB - 46.3%)
[11:19:18] all files 60.49 kB
[11:19:18] Finished 'images' after 2.33 s

foundation not injected in bower:css / bower:js

It might be due to my incapability, but:

After running yo gulp-angular, opting for foundation, in the index.html I don't get

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<!-- endbower -->
<!-- endbuild -->

as expected.

<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->

remains empty.

Likewise, foundation.js is not injected.

Is this a bug or am I missing something?

Thanks.

server crashes if there's a 404

If I open an invalid file on browser, it would crash the server. It seems there's no error handling for invalid file. Here's the error:

Error: getaddrinfo ENOTFOUND
    at errnoException (dns.js:37:11)
    at Object.onanswer [as oncomplete] (dns.js:124:16)

Nightwatch.js Intergration or Replacement for Protractor

Firstly... I LOVE THIS.

Secondly... I think Nightwatch.js would be a perfect fit. Pipe through the UI with CSS selectors and assert tests along the way. Super fun. I wrote a script recently to buy bitcoin, it was cool :).

Hopefully the site will be up soon.
Here is a cached copy in the meantime.
http://webcache.googleusercontent.com/search?q=cache:http://nightwatchjs.org/

Gulp watch is looking for scss files even though I picked less as my preprocessor of choice

partials ignored in build

The partials dir is not being bundled into the dist dir when the gulp build step is run.

I see this in the console
GET http://localhost:8000/partials/main.html 404 (File not found) vendor-31fc4caf.js:5

Remove foundation css in index.html

In index.html you defined foundation.css to be loaded. But in main.scss foundation is also imported.

This results in foundation beeing downloaded twice.

Set encoding header for served js files

I have a problem with encoding of .js file served by built-in server. How can I set the Content-type header to UTF-8?

[Suggestion] gulp-angular-fullstack

Is anyone interested in forking this project to do a fullstack solution with this generator as the client?
What do you guys think?

Bower: After installing, not automatically insert link of CSS in index.html

Insert this comment after favicon.ico

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->

Livereload fail

GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED

Replace ngmin by ng-annotate

ngmin is now deprecated in profit for ng-annotate

Error reporting when using less preprocessor

You are using gulp-plumber to report errors in .less files. But it stops gulp on error and user has to rerun it every time.

I use the following function to report errors:

function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

and then:

.pipe($.less().on('error', handleError))

So it has the same output on errors as gulp-plumber, but doesn't stop gulp.

Enable angular html5 mode (history api)

Love this generator... except I can't get my angular app to work when I enable HTML5 mode... $locationProvider.html5Mode(true).hashPrefix('!');

Every path other than the root path gives Cannot GET /path-name response as the request isn't going through the index.html file.

Is this possible with gulp/this generator?

Combine this project with another one

I don't really understand why this project was created instead of improving the other ones.

The real value of a generator is the body of people using exactly the same things as each other. This way, when someone has a problem, it is much more likely they will find someone else who uses the same set of things and can answer their question.

But there are many many other good reasons for having fewer generators and not more generators. Please give this a read and if you still think that creating a separate project was the better decision, clarify why you think so.

Directory structure

The documentation mentions the Best Practice Recommendations for Angular App Structure, but you recommend keeping to a division by file type: scripts, styles, partials.

My question is: Can generator-gulp-angular support a the directory structure recommended by the angular team? Something like:

config/
gulp/
gulpfile.js
app/
  index.html
  app.js
  app-controller.js
  app-controller.spec.js
  app.css
  components/
    main/
      main.js
      main-controller.js
      main-controller.spec.js
      main.css

Running "gulp watch" hangs on 'watch'

I ran the generator a few times now, even with the fast/default and making 0 changes afterwards, it hangs when i "gulp watch". Anyone else get this issue?

[17:06:34] Using gulpfile ~/Apps/yo-gulp/gulpfile.js
[17:06:34] Starting 'wiredep'...
[17:06:34] Finished 'wiredep' after 11 ms
[17:06:34] Starting 'styles'...
[17:06:50] gulp-size: total 126.64 kB
[17:06:50] Finished 'styles' after 15 s
[17:06:50] Starting 'watch'...
[17:06:50] Finished 'watch' after 24 ms

... and frozen....

Add CoffeeScript support

👍 Nice work on this. Not an issue, but I would love to see coffeescript support :) I know, I'm turning into "that coffeescript guy".

Gulp watch should not exit when problem with style file

Process:

1. run gulp watch
2. modify a style file, write something that generate an error (eg: an import to a non-existent file)
3. see gulp watch crash 💥

Bootstrap glyphs path fails with less

Check all the situations for the loading of the bootstrap glyphs : depending on sass / less / node, dev / build.

Check the gulp replace task if it's still needed and remove it if not bootstrap.

gulp-wiredep to inject a new path for files

for django, i am trying to insert a relative path ..

the wiredep section of my older grunt file looked like this

wiredep: {
      dashboard: {
        src: '<%= backOffice.dashboard %>/base.html',
        exclude: ['/selectize/', '/sifter/', '/microplugin/'],
        ignorePath: '../../static/',
        fileTypes: {
          html: {
            replace: {
              js: '<script src="{{ STATIC_URL }}{{filePath}}"></script>',
              css: '<link rel="stylesheet" href="{{ STATIC_URL }}{{filePath}}" />'
            }
          }
        }
      }
    }

i am trying to do the same with my wiredep.js for gulp task and this is what it looks like

'use strict';

var gulp = require('gulp');

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

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

  gulp.src('../../templates/backoffice/__base.html')
    .pipe(wiredep({
      fileTypes: {
        html: {
          replace: {
            js: '<script src="{{ STATIC_URL }}{{filePath}}"></script>',
            css: '<link rel="stylesheet" href="{{ STATIC_URL }}{{filePath}}" />'
          }
        }
      }
    }));

but this isn't working, can anybody help?

Generator ignores app name arg

Hi, when I run yo gulp-angular myAwesomeApp it doesn't create the project within that directory, it creates the files within the current directory.

Add option for no UI framework

Personally I'm not a big fan of UI frameworks like Bootstrap or Foundation. I also can imagine that other people do like UI frameworks, but perfer to add yet another one. For those use cases, can we have an option in the generator to not add a UI framework?

watch accidentally quit when open chrome developer tool

I start up an project with the following choices: Advanced Mode, angular 1.2.x, all option module , jquery 2.x, restangular, ui-router, Foundation, sass(ruby)
My OS is OSX10.9.4, nodejs version is v0.10.30, gulp#3.8.8

When I run grunt serve, Everything looks ok,until I right click the page and choose Inspect Element to open a Chrome Developer tool window. Then the gulp instantly quit with the following Error message

Error: getaddrinfo ENOTFOUND
    at errnoException (dns.js:37:11)
    at Object.onanswer [as oncomplete] (dns.js:124:16)

I check my npm global dependencies, everything is ok. I don't know how to fix this.

ENOENT error while running the generator

[email protected] node_modules/browser-sync
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])
execvp(): No such file or directory

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

Any suggestions?

Thanks in advance :)

Empty vendor.css

Hi, after a new install I see that vendor.css is empty. What vendor css is this file supposed to contain?

How to set default browser to chrome in gulp serve

I want to change the default browser as Chrome instead of Safari. How I can change it is gulp/server.js:

function browserSyncInit(baseDir, files, browser) {
browser = browser === undefined ? 'default' : browser;

browserSync.instance = browserSync.init(files, {
startPath: '/index.html',
server: {
baseDir: baseDir,
middleware: proxyMiddleware
},
browser: browser
});

}

Add support for LESS

Currently only SASS is supported.

Some roadblocks can come up with LESS when using Foundation, because Foundation is written using SASS and it does not have a less port.

Bootstrap supports less

Add support for angular 1.3.0

I would like to use 1.3.0 in my project. Therefore it would be nice to be able to choos whether to use 1.2.x or 1.3.0.

Errors installing

Sorry for the broken English is a Google perevodchik.

At just installed ubuntu 14.04 put nodejs, node and npm.
Do according to Your leadership.
And get errors. If it's bad, what to do?
And I apologize for not formatted code, I did not get this number to format.

gulp serve:dist yields blank page

First of all, I really like the generator, great work, I like your folder organization a lot :)

I'm pretty new at this so maybe I'm just overlooking something obvious here. gulp serve works fine, but when I run gulp serve:dist on a brand new install, it gives me a blank page with 404 errors for styles/vendor.css, styles/main.css, scripts/vendor.js, scripts/modernizr.js and scripts/main.js

I looked into the dist directory and saw that the files were there, but still had hashes appended to them, which led me to think it had something to do with the gulp rev/revReplace plugins.

I then commented out those two plugins in gulpfile.js and added the mangle:false option in the uglify plugin and this fixed the issue for me. It works fine now, but I guess this might create caching problems in the long run?

I'm not sure why this was happening for me and not for others though, could it be because I'm on windows?

gulp-rimraf was deprecated.

As the gulp-rimraf project page described, it was deprecated and it also suggest using del instead.

Heroku/Dokku deploy strategy?

First of all, great work building this. It's the exact seed that I was looking for, and it's really easy to hack additional features into.

Now then, do you have a recommended git-based deployment strategy for an app built on this, to something like Heroku or Dokku?

I was thinking about using the basic node buildpack, and just having it do something along these lines:

npm install &&
./node_modules/gulp/bin/gulp.js build &&
cd dist &&
python -m SimpleHTTPServer $PORT

It sounds simple enough, but I decided to ask anyway; maybe it's also something that's been done by someone else in a more robust fashion. 🐒

Add option for Ruby-Sass or Gulp-Sass

Nice work on the generator, I really like it and appreciate your hard work.
I find that if I replace Ruby-Sass with Gulp-Sass (based on libsass), compilation is much quicker and I've used it in a few of my own generators. I understand that libsass hasn't fully caught up to Ruby-sass 3.3, but Bootstrap & Foundation compile fine with Gulp-Sass. What do you think?

Adding support for browserify

Tasks to load up connect not included

Running the gulp protractor cmd fails due to the connect:src task not being implemented.

Error output

[gulp] Task 'connect:src' was not defined in your gulpfile but you tried to run it.

Also running gulp protractor-only throws an error with phantomJS

I tried changing the capabilities to

 capabilities: {
    'browserName': 'phantomjs',
    'phantomjs.binary.path': './node_modules/karma-phantomjs-launcher/node_modules/phantomjs/bin/phantomjs',
    'phantomjs.cli.args': ['--debug=true', '--webdriver', '--webdriver-logfile=webdriver.log', '--webdriver-loglevel=DEBUG']
  },

which get past the phantomJS error but then is throws a null error, thats as far as I got.

I pretty new to all these tool, so I many be missing something I'm supposed to be doing

Edit watch task for less preprocessor

If user chooses less as preprocessor, then the following line in "watch" task should be:

gulp.watch('app/styles/**/*.less', ['styles']);

but not

gulp.watch('app/styles/**/*.scss', ['styles']);

Error in plugin 'gulp-ruby-sass'

When the server starts gulp serve

acopalipsis@acopalipsis-pc:~/my-test-two$ gulp serve
[23:18:33] Using gulpfile ~/my-test-two/gulpfile.js
[23:18:33] Starting 'wiredep'...
[23:18:33] Finished 'wiredep' after 29 ms
[23:18:33] Starting 'styles'...
[23:18:34] 'styles' errored after 440 ms
[23:18:34] Error in plugin 'gulp-ruby-sass'
You need to have Ruby and Sass installed and in your PATH for this task to work.

How to fix?

Make the proxy works with html5Mode

Problem identified here: #52 (comment)

Handle CSS source mapping out of the box

Already works with node-sass.

Problematic with node-ruby-sass: #52 (comment)

To be done for less.

Error in plugin 'gulp-sass'

Ran into the following error after a clean install on windows.

$ gulp build

Plumber found unhandled error: Error in plugin 'gulp-sass'
Message:
source string:3: error: file to import not found or unreadable: '../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap'

the fix was changing the paths in /app/styles/vendor.scss to include vendor in the path

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
@import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

Error: getaddrinfo ENOTFOUND when 'api' anywhere in the path.

Strange one this.

Error: getaddrinfo ENOTFOUND when 'api' anywhere in the path.

to reproduce install latest gulp-angular (but it exists in 0.4 also)

yo gulp-angular myApp

[installation ensues]

gulp serve

navigate to any of:-

http://localhost:3000/api
http://localhost:3000/foo/api
http://localhost:3000/apifoo

Error: getaddrinfo ENOTFOUND
at errnoException (dns.js:37:11)
at Object.onanswer [as oncomplete] (dns.js:124:16)

This only happens when api is in the path....