fuelfrontend/generator-smacss

Perfectionist generator that scaffolds out different types of Frontend apps

generator-smacss's Issues

In Angular js App - creating directives using cmd is not working. Please check it.

Angular scaffold folder structure

Please create default folder structure like (controller, models,directives...etc) while creating angular app.

Run server automatically

After the prompts the generator is automatically installing the dependencies.

Run the command gulp to fire the server also to reduce the user interaction by one step.

Bower - Save dev documentation

While installing bower components user should use --save-dev to include in bower.js while concat process.

This needs to be communicate to the user in documentation clearly.

Better error notification for dependency installation

On dependency failing: Provide comments to install as admin

Gulp server throws error as Uhoh. Got error listen EADDRINUSE ...

Even after running localhost server in different port, gulp throws error.

Steps to reproduce

1. Run a gulp in terminal with default port (3000)
2. Run one more application with another port as 4000, error message is printed in the terminal as
   Error: listen EADDRINUSE

But gulp server is working properly. Try it get rid of that message

Generator is missing latest update notifier

Since smacss is continuously updated with new features and issue fixes. There is no option to show to user that smacss is updated to newer version. So user has to manually update using npm update generator-smcass. By using update-notifier we can notify user that a new update for available in the command line.

gulp task suggestion - gulp-autoprefixer

gulp-autoprefixer task to auto prefix vendor specific css properties

while running gulp i am getting the problem

this is the problem i am getting while running gulp command in angular js app.

--------- Server started at http://localhost:3000 ------------------------

[22:26:05] Webserver started at http://localhost:3000

events.js:72
throw er; // Unhandled 'error' event
^
Error: getaddrinfo ENOTFOUND
at errnoException (dns.js:37:11)
at Object.onanswer as oncomplete

Adding README file for the application

It would be great if we can add a readme file for installation and other details of application user is creating.

New App Type - React App

Create a new app type for scaffolding React application

Modularize gulp file

Lets break down the gulp file - https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-across-multiple-files.md

In this way we will easily be able to include / exclude gulp tasks based on multiple factors.

Index page information update

Default index page of the scaffold app needs to hold the information about

1. App structure
2. Features
3. Quick commands

Gulp Prod command throws

While doing gulp prod in terminal, throws an error do minification of HTML files before gulp file include. I have fixed this issue in my latest PR.

Gulp cant find Modernizr Error on Fullpack

Tried installing the FullPack option with jQuery and Modernizer, but am getting an error:

[16:20:27] Error: Cannot find module '../bower_components/modernizr/bower.json'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at addPackage (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:45:16)
    at /Users/peterberwind/code/smacssFullpack/tasks/bower.js:66:7
    at Function._.each._.forEach (/Users/peterberwind/code/smacssFullpack/node_modules/underscore/underscore.js:158:9)
    at Gulp.<anonymous> (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:64:14)
    at module.exports (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/index.js:273:3)
Error running task sequence: { task: 'bundle-libraries',
  message: 'bundle-libraries catch',
  duration: 0.000709324,

  hrDuration: [ 0, 709324 ],
  err:
   { Error: Cannot find module '../bower_components/modernizr/bower.json'
       at Function.Module._resolveFilename (module.js:440:15)
       at Function.Module._load (module.js:388:25)
       at Module.require (module.js:468:17)
       at require (internal/module.js:20:19)
       at addPackage (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:45:16)
       at /Users/peterberwind/code/smacssFullpack/tasks/bower.js:66:7
       at Function._.each._.forEach (/Users/peterberwind/code/smacssFullpack/node_modules/underscore/underscore.js:158:9)
       at Gulp.<anonymous> (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:64:14)
       at module.exports (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/lib/runTask.js:34:7)
       at Gulp.Orchestrator._runTask (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/index.js:273:3) code: 'MODULE_NOT_FOUND' }
}

I tried running sudo npm install and sudo bower install

Does anyone know what might be causing this issue?

minor suggestion for directory structure

The gulp tasks directory should be outside the app directory.

The app directory should contain code which is necessary to build the dist directory. Even if the developer uses some other build system like grunt, we should be able to pass him the app directory and the developer should be able to continue the development.

node-sass error

Hi. Thanks for your time and work on the smacss generator.

I'm new to web development but would realllly like to use this generator but am not sure if I should post this problem as an issue on github or not.

josh@josh-700-310xt:~/Desktop/testy/testThisBitch$ gulp
[21:52:10] Warning: gulp version mismatch:
[21:52:10] Global gulp is 3.9.0
[21:52:10] Local gulp is 3.8.11
/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:22
throw new Error('libsass bindings not found. Try reinstalling node-sass?');
^

Error: libsass bindings not found. Try reinstalling node-sass?
at getBinding (/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:22:11)
at Object. (/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/home/josh/Desktop/testy/testThisBitch/node_modules/gulp-sass/index.js:3:17)
at Module._compile (module.js:425:26)

... Is this normal behavior?

Do I have to install and use gulp 3.8.11 globally or is there something else?

Should I create a new issue for this?

Follow generator directory structure for restify app

Generator follows a common directory structure throughout all app types. This needs to be followed in Restify App as well.

Current structure

├── controllers
│   └── userController.js
├── models
│   └── userSchema.js
├── route.js
├── app.js
├── config.json
├── db.js
├── node_modules
├── package.json
├── gulpfile.js
├── .gitattributes
└── .gitignore

Proposed structure

├── app
│   ├── controllers
│   │   └── userController.js
│   ├── models
│   │   └── userSchema.js
│   └── route.js
│   └── app.js
│   └── config.json
│   └── db.js
├── node_modules
├── package.json
├── gulpfile.js
├── .gitattributes
└── .gitignore

Bower components - Needs to be updated based on user choice in prompts

1. User selected features like (jquery, modernizer) or any other bower components needs to be include in bower file.
2. Include bower concat in gulpjs file.

Include Bootstrap framework in app types

Users may want to create quick applications sometimes, for one of the main reason

• No time to write all the code from scratch cause of less time

In that situation its better to opt for bootstrap.

Generator should give an option to select bootstrap for applications.

1. Simple web app (can consider)
2. Full Stack (have to include the option to select)
3. Angular (have to include the option to select)

Meta tag viewport is missing in the index page

Since the meta tag for viewport is not present, media query won't work in mobile and tablets.

Include testing frameworks

Integrate some testing frameworks for TDD

Suggestions
Mocha - http://mochajs.org/
Chai - http://chaijs.com/

Not listed in yeoman.io

This generator is not listed in the yeoman.io site

Unmet Peer dependency when i have installed all the dependencies. Plz refer to my attached screenshot.

Bower Components - Auto check dependencies and concat in right order

We will need a Gulp task that parse the bower components files and add main files to bower.js in the right order (dependencies first and then the library itself after) to avoid undefined error while running the application.

Tip: Each Bower library has its own bower.json file, which specifies the dependencies of that library.

Deactivate JSlint validating library files

JS lint is validating library files also. Create jslint config file and exclude library folder

image folder is not coming in build folder

When i try to do gulp,
Image folder is not coming in the build folder.

Please check this and let me know.

Angular App - bundling bower is not working

Getting a 404 error for bower.js file cause the gulp task is not bundling the bower files correctly.

Screenshot

Server - Port Issue

Current: If port is already occupied, gulp fails to start the server.

Expected: It should start assign new port and run server in that port.

Bower cannot import jquery lib

Hi, I'm trying to bring jquery in my project with bower install <package> but not occurs. The image below exemplifies what happens:

What can it be? Anyway, I really appreciate your project, it's very useful for my projects. Congratulations.

SCSS Directory structure suggestion

Hi @logeshpaul

Thinking about scalability, I would prefer separate directories for each components (base, layout, master etc.), rather than a single file.

Even modules can have different directories, for which we can provide with sub generators.

End user — Dependencies can be reduced

End user app has lot of dependencies which make the dependency installation heavy and taking quite long.

Suggested Solution

1. Once the user decides the app type(static, angular, etc.,) in step 2 of user prompting, ask for lite or full_packed or custom
2. lite - should only have limited and super necessary dependencies
3. full_packed - should have all necessary dependencies
4. custom - shows a list of useful dependencies which user can select from.

Let me know if you have a better suggestion.

gulp task suggestion - ng-annotate

It would be great to have ng-annotate task for angular apps.

Bower concat issue on watch task

1. Fonts not copied
2. Images not copied
3. Bower files are not copied

Index.js - Codeclimate copyMainFiles() complex method issue

File: app/index.js

Complex method copyMainFiles (complexity = 18)

https://codeclimate.com/github/FuelFrontend/generator-smacss/app/index.js

Angular - Quick commands

Quick commands
Example type in smacss: controller controllername --options in terminal and it should

1. create necessary files in JS, CSS, etc.,
2. Write default code in files
3. Make necessary connections between the files

An option to create project in current directory

Lets say we already have git repo and we need to create a project in the root of the cloned repo. There is not option to it add in same directory.

There should be flag to create project in current directory. Like below

yo smacss current

Detach prompting from common module, Create sub modules

1. Prompting the user has to separated from common module smacssGenerator
2. Create sub module for type of projects like 'Static-HTML', 'Angular' as of now
3. Remove hybrid app

Browser Sync as default to trigger server

Currently we are using gulp webserver for local server and to perform live reload feature. It doesn't comes with cool features like Sync: scroll, user input & connected devices.

Browser sync does comes along with those features. So why don't we directly opt for browser sync instead of old school gulp-webserver

Automation & Deployment quick commands

Write automation and deployment helper methods for complete workflow

Suggestion
Shipit - https://github.com/shipitjs/shipit

Problem in concating bootstrap and other libraries through bower

Through bower-install gulp task, libraries like bootstrap is not concating css and js file due to bower.json not present in bower_components/bootstrap

Bootstrap and some other libraries in bower contains .bower.json file instead bower.json. In bower task we have check this also

Gulpfile - Codeclimate complexity issues

File: app/templates/_gulpfile.js

1. Expected '===' and instead saw '=='. (Line 232)
2. 'change' is not defined. (Line 238)

Replace smacss-in-action image with demo gif

Replace smacss-in-action static image with quick demo gif for better understanding of the plugin.

Gif should show

1. Terminal - User Input
2. Terminal - App File Creation
3. Terminal - App Dependency Installation
4. Terminal - Server trigger
5. Browser - App running

Update main readme file with directory structure

Readme file has to show app structure for different type of type for the user to understand how the generator will scaffold the folders

Example

├── app
│   ├── bower_components
│   │   ├── jquery
│   │   └── modernizr
│   ├── images
│   ├── js
│   │   └── lib
│   │   │   └── third-party-files
│   │   └── main.js
│   ├── css
│   │   └── main.css
│   ├── scss
│   │   └── lib
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
├── dist
│   ├── scripts
│   └── styles
├── node_modules
├── test
├── .bowerrc
├── .gitignore
├── bower.json
├── gulpfile.js
└── package.json

Angular app - Basic configuration

1. Basic scaffolding
2. Directory structure - (JS based on module)
3. Angular dependencies