toddmotto / fireshell Goto Github PK

When trying to start the project using fireshell by running the grunt-dev.command file on the terminal, it aborts due to the warnings. Is --force the way to solve this issue?

I stumbled across FireShell while searching for static generator (I've tried few of them; octopress, hexo, ghost and assemble) but so far none works to what I've trying to achieve. Assemble.io was the closest but have some part not doable.

Then I saw Fireshell and it gives the impression that it's able to achieve what I was looking for; but would appreciate some feedbacks and guides from those with experience in Fireshell if this is doable;

Thanks for your time and concern!

Hey there,

I believe that the .zip download doesn't match the updated repository. This may be on purpose, but there are a few differences and it doesn't include the bower configurations.

Regards,

Jason Ruhlin

is JS Testing something that would fall into the scope of this projects build process?

When I try to install a new fireshell project, grunt-dev.command execution ends in an error saying :
Local Npm module "grunt-bower" not found. Is it installed ?

Complete output :

npm ERR! Linux 3.13.0-37-generic
npm ERR! argv "node" "/usr/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm v2.1.3
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: bower-config@'>=0.2.0 <0.3.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.0-rc.1","0.1.0-rc.2","0.1.0-rc.3","0.1.0-rc.4","0.1.0-rc.5","0.2.0-rc.1","0.2.0-
rc.2","0.3.0","0.3.1","0.3.3","0.3.4","0.3.5","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.4.5","0.5.0","0.5.1","0>.5.2"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! Please include the following file with any support request:
npm ERR! /home/matutinal/PhpstormProjects/matutinal.fr/fireshell/npm-debug.log

Local Npm module "grunt-bower" not found. Is it installed?
Warning: Task "bower:dev" not found. Use --force to continue.

Aborted due to warnings.

I have followed the getting started tutorial.

Suggestion : I have succesfully started fireshell projects in the past, this issue is recent (1 week maybe). Replicated in both ubuntu 12.04 & 14.04 (elementary os). I also use Phpstorm with nodejs plugin, which may be conflicting, but uninstalling it did not work.

Find npm-debug.log here

I am fairly new to Grunt & Bower and am trying to understand how fireshell works but I can't quite seem to get why normalize-css/normalize.css isn't appearing in the components/ folder.
#27 and #32 are suppose to manage normalize trough bower, as in download the latest build from necolas's build, right?... well that's what I think I understand.

The problem is that when I run grunt-dev.bat for the first time bower doesn't get the file but everything else seems to work.
Am I missing or misunderstanding something? Do I have to add it manually into the folder?

Bower 1.2.8
Node 0.12.7
Windows 7 x64

Migrate this project to Gulp over Grunt.

Have you considered using bower as package manager?

Btw, nice project

Docs says including only 1 file in index.html is best practice, reduces http requests. How to include jquery or bootstrap ^{merge them all?}? And should we use same practise for angularjs apps ^{merge them all?}?

Any chance that versions like v1.0.0 and v1.1.0 can be git tagged? Currently there are no tags pushed.

grunt-dev.command return this error:

Running "connect:livereload" (connect) task
Started connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Waiting...Fatal error: Port 35729 is already in use by another process.
logout

if i display the list of open network connections:

Sublime   1156 macbookpro    7u  IPv4 0xffffff801a66ba40      0t0  TCP *:35729 (LISTEN)

I use a reverse proxy in apache to use my local web files and route to a local instance of weblogic on a diff port. would i be able to use fireshell in this environment? i know the reload plugin for grunt supports this, but does watch/livereload?

when I use firebase rules '.validate ' to filter data, then creating a chart, but is there a using way to do it?
my code as below:
".validate": "newData.hasChildren(['x', 'y']) && newData.child('x').exists() && newData.child('y').exists()"
to ensure x attribute and y attribute are valid.

Hey guys,
So this morning I go to hit the file to start the server and it opens in terminal as usual, but it closes itself saying it cannot start. This has happened twice now, the first time I had to restart the project by copying every thing to a fire shell project. Anything would be helpful. I love the framework, just can't put up with this every other time I go to start it though...

I have tried to install Bootstrap, Font-Awesome and few other libraries into Fireshell

the bower command seems to work, but then on site the installed libraries do not work.

Here is some of my output:

tithos ~/Documents/Sites/mighyMC $ [master*]$ grunt
Running "sass:dev" (sass) task
File "app/assets/css/style.unprefixed.css" created.

Running "bower:dev" (bower) task
src/components/bootstrap-sass-official/assets/javascripts/bootstrap-sprockets.js copied to.
src/components/bootstrap-sass-official/assets/javascripts/bootstrap-sprockets.js copied to.
src/components/bootstrap-sass-official/assets/javascripts/bootstrap-sprockets.js copied to.
src/components/bootstrap-sass-official/assets/javascripts/bootstrap-sprockets.js copied to.
src/components/bootstrap-sass-official/assets/javascripts/bootstrap-sprockets.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js copied to.
src/components/bootstrap/dist/js/bootstrap.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap/dist/css/bootstrap.css copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/bootstrap/dist/js/bootstrap.js copied to.
src/components/bootstrap/dist/js/bootstrap.js copied to.
src/components/bootstrap/dist/js/bootstrap.js copied to.
src/components/bootstrap/dist/js/bootstrap.js copied to.
src/components/bootstrap/dist/js/bootstrap.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/components-font-awesome/css/font-awesome.css copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/jquery/jquery.js copied to.
src/components/modernizr/modernizr.js copied to.
/Users/tithos/Documents/Sites/mighyMC/src/components/normalize-css/normalize.css copied to.

Running "autoprefixer:dev" (autoprefixer) task
File "app/assets/css/style.min.css" created.

and

tithos ~/Documents/Sites/mighyMC $ [master*]$ bower install components-font-awesome
bower components-font-awesome#*       not-cached git://github.com/components/font-awesome.git#*
bower components-font-awesome#*          resolve git://github.com/components/font-awesome.git#*
bower components-font-awesome#*         download https://github.com/components/font-awesome/archive/4.1.0.tar.gz
bower components-font-awesome#*          extract archive.tar.gz
bower components-font-awesome#*     invalid-meta components-font-awesome is missing "ignore" entry in bower.json
bower components-font-awesome#*         resolved git://github.com/components/font-awesome.git#4.1.0
bower components-font-awesome#~4.1.0     install components-font-awesome#4.1.0

and

tithos ~/Documents/Sites/mighyMC $ [master*]$ bower install bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.0.3
bower bootstrap#*             validate 3.0.3 against git://github.com/twbs/bootstrap.git#*
bower bootstrap#*                  new version for git://github.com/twbs/bootstrap.git#*
bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.2.0.tar.gz
bower bootstrap#*              extract archive.tar.gz
bower bootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.2.0
bower bootstrap#~3.2.0         install bootstrap#3.2.0

Cloned your git repo and ran the grunt-dev.command and for the subject error. Bower is installed and so is grunt-bower both locally and globally

What does this mean?

I have a suggestion regarding the directory structure. Currently you have src folder outside the app. This ways our development and production folder is the same. It works fine when you want to JavaScript and CSS files but I prefer using requirejs to manage my Javascript assets and this way my development index.html is different from production. I prefer using grunt-usemin to replace some content from my development file.

Let me show you one scenario where my i use requirejs to load source files asynchronously and in my production / deployment file I don;t have to use requirejs and can can make just one http request to my bundle file. Another reason can be if you want to optimise your images via some grunt plugin and in the current structure you will override them.

Development

<!-- build:js scripts/bundle.js -->
<script data-main="scripts/config" src="scripts/libs/require.js"></script>
<!-- endbuild -->

Deployment

<script src="scripts/bundle.js"></script>

So my suggested scaffolding will look something like this

├── deploy
│   ├── apple-touch-icon-precomposed.png
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   ├── img
│   │   └── js
│   ├── favicon.ico
│   └── index.html
├── app
│   ├── apple-touch-icon-precomposed.png
│   ├── js
│   │   └── scripts.js
│   └── scss
│       ├── mixins
│       ├── modules
│       ├── partials
│       ├── vendor
│       └── style.scss
│   ├── favicon.ico
│   └── index.html
├── docs
├── grunt-build.command
├── grunt-build.bat
├── grunt-dev.command
├── grunt-dev.bat
├── package.json
├── README.md
├── .editorconfig
├── .gitignore
├── .jshintrc
└── .travis.yml

I really wanted to use the bootstrap for my projects but the current structure will not fit well in my most projects. I you agree I can help in restructure in a separate branch.

If you would consider adding assemble I would be happy to submit a PR.

Essentially all this would do is split the HTML into a few different files, heading, footer, etc. allowing devs to easily modify the markup (and paths to CSS/JS, etc) to meet their own preferences.

The config would look something like this:

/**
 * Build HTML
 * https://github.com/assemble/assemble
 * Generates clean HTML from templates and data.
 */
assemble: {
  options: {
    assets: '<%= project.assets %>',
    partials: ['src/templates/includes/*.hbs'],
    layout: 'src/templates/layouts/default.hbs'
  },
  dist: {
    files: {
      'app/': ['src/templates/*.hbs']
    }
  }
},

Is it to import styles provided by vendors (ie from a bower package)? If so, why does normalize.css get placed directly into the components folder, as opposed to @included here?

Hello there, I must be doing something wrong as my php script files doesn't seem to work when I start the grunt server on localhost:9000 (or any other port for that matter) but they work fine if I use the localhost/location/of/file.php

Is there any setting that allows me to work with those php files on the normal grunt server. I'm loving fireshell and this is screwing up my workflow!

Thanks in advance.

I think it would be a good thing to add the autoprefixer task. because then you don't need to use any mixins for vendor prefiexes. it's being done automatically.

example for useful options in Gruntfile.js

autoprefixer: {
  dist: {
    options: {
      'last 2 version',
      'chrome 27',
      'ff 21',
      'safari 6',
      'ie 9',
      'ios 6',
      'android 4'
  },
  files: {
    'style.css': ['style-to-prefix.css']
  }
}

Sorry, to put this here. I'm new to GIT. need to learn how to pull request...

I can't seem to get any URL's to be recognized by my SCSS.

This is the snippet from my _main.scss file

background-image: url(../../../app/assets/img/bg.jpg)

So... that's going up the tree out of the Partials, Scss, Src, and then goes into the app file tree to find my bg.jpg.

Any help would be greatly appreicated.

Hi, your framework is really intriguing - you are running a lot of the stuff I've been learning and have been wanting to get all working together nicely. I downloaded a copy and got it running out of the box fine under Win8, the server popped up and displayed your intro page np ..

I need to run Susy 2.0 beta under grunt-sass/libsass because its super fast. So the first thing I did was try and hack it in to get it running :

$>bower install "susy#2.2.0.beta.3" .. at the command line, seemed to download fine .. then ..

$>npm install grunt-sass --save-dev .. again, seemed to install fine no issues .. however ..

$grunt --verbose .. gets me:

// [ .. all seemed good until .. ]

Running "bower:dev" (bower) task
Verifying property bower.dev exists in config...OK
Files: -> app/assets/components/

Reading S:\_base-frameworks\fireshell\src\components\normalize-css\normalize.css...OK
Writing app\assets\components\normalize-css.css...OK

S:\_base-frameworks\fireshell\src\components\normalize-css\normalize.css copied to.
Warning: Cannot call method 'split' of undefined Use --force to continue.

Aborted due to warnings.

The first thing that came to mind even before I tried this was that you have this in your Gruntfile:

/**
   * Dynamically load npm tasks
   */
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

... which I am unfamiliar with, I was looking to delete the loadNpmTasks for grunt-contrib-sass and load grunt-sass instead -- I am thinking this is a conflict, can you help address this? Thanks!

Hey guys I have a question more than an issue, but it might still be a good thing for the project as a whole:

When you install bower components, they go into the components folder. When you then build the project, the way I understand the Grunfile.js file, it will simply copy-paste the content of the src components to its app equivalent.

My questions are :

1. Is there any way of only transfering the relevant files (e.g. jquery.min.js) into the app components folder instead of the whole bower component files ? I know of grunt-bower-clean but you really need to precisely target which files are gonna go into your build...
2. The way the bower stuff is now transferred means there is no way for me to concat and compress those files in the build. I know most of them are often production ready but still it would be nice to have the option to at least concat them...

Thoughts ?

I would suggest you to add require.js to manage dependency of modules within the application. For large scale applications it will very useful.

I have some experience with it. If you want I can add and send a PR if you have any plans for that.

Integrate a html validation task like this?

https://github.com/praveenvijayan/grunt-html-validation

I'm doing this on a project locally so let me know if you want me to do a PR for this

Being new to grunt/bower I may be not understanding how grunt-bower-task works...

When it's run in it's default setup, it seems to take the name of the package and makes that as the name of the file.

i.e. normalize-css becomes normalize-css.css. Not typically a problem, but is there a way to rename it when it gets put into the app/assets/components folder?

i.e. ericmmartin.simplemodal puts jquery.simplemodal.js (in the src folder) as ericmmartin.simplemodal.js in the app/assets/components folder.

I wanted to throw this idea out there, I can make this contribution, but I'm not going to if nobody is interested.

Yeoman describes itself as "Modern Workflows for Modern Webapps", it uses npm, grunt, and bower to quickly generate scaffolding for projects. It has hundreds of generators for different kinds of projects (eg. ember, bootstrap, firefox-os).

Using the command yo [generator] [--options], you can create a file tree and install all your assets with npm install and bower install, then use grunt commands to compile assets, run your tests, and start a server.

Yeoman is a very powerful tool, but most generators are framework specific (eg. angular, wordpress, express), which is great they are all very useful for getting something quickly set up. However it would be nice to have more generators that are framework independent (eg. webapp, mobile).

For a list of generators: http://yeoman.io/community-generators.html

Many people write their own generators, sort of like having a dotfiles repository. There's even a yeoman generator for generating generators (inception).

Since Yeoman requires a certain directory structure, many projects choose to have a secondary repository for maintaining that structure (eg. h5bp).

Fireshell is already rolling with most of the tools inside yeoman except for yeoman itself. I encourage you to check out the ember generator as it is one of my personal favorites and has an excellent grunt setup.

I was working on a project today and when I returned to work on it again.
It was a shock when I fired up the directory and it started over wiping out all the css.
How do I prevent this from happening?

Hey Todd,

Great resource, great markup, perfectly simple and optimized.
Have you considered making this a yeoman generator?

I installed Fireshell, but also updated the node modules. With that said, Sass along side grunt-contrib-sass now support sourcemaps. I have used it with Grunt successfully in other projects. However, I noticed Fireshell's setup does not coordinate properly. For example, if I declare a style in _app.scss, Web Inspector is telling me the style is found in _print.scss when it's clearly not.

Any idea what may be the cause?

I've downloaded a copy of fireshell and run npm install. If I then run the the dev command (grunt) it will spin up the webpage to serve and it uses minified css as if I was doing a grunt build (production builds)

Add jade templating engine support.`

grunt-build.command and grunt-dev.command should have equivalent Windows command files. Should be fairly simply but I have no idea about Windows batch files.